CSS assertions in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to check if the element has the correct background color.

Cypress

cy.get('.button').should('have.css', 'background-color', [1]);

Drag options to blanks, or click blank then click option'

A'rgba(255, 0, 0, 1)'

B'red'

C'rgb(255, 0, 0)'

D'#ff0000'

Attempts:

3 left

💡 Hint

Common Mistakes

Using color names like 'red' instead of rgba format.

Using hex codes which Cypress does not return in computed styles.

The correct CSS value for red in rgba format is 'rgba(255, 0, 0, 1)'. Cypress returns computed styles in rgba format.

2fill in blank

medium

Complete the code to assert that the element is visible and has the correct font size.

Cypress

cy.get('#title').should('be.visible').and('have.css', 'font-size', [1]);

Drag options to blanks, or click blank then click option'

A'16em'

B'1.6rem'

C'16pt'

D'16px'

Attempts:

3 left

💡 Hint

Common Mistakes

Using rem, pt, or em units which Cypress does not return in computed styles.

Cypress returns computed font sizes in pixels, so '16px' is the correct value to assert.

3fill in blank

hard

Fix the error in the code to correctly assert the element's border style.

Cypress

cy.get('.card').should('have.css', 'border-style', [1]);

Drag options to blanks, or click blank then click option'

A'border: 1px solid black'

B'1px solid black'

C'solid'

D'solid 1px black'

Attempts:

3 left

💡 Hint

Common Mistakes

Using full border shorthand values instead of just the style.

Including width or color in the assertion value.

The 'border-style' CSS property only expects the style part like 'solid'. The other options include width and color which are incorrect here.

4fill in blank

hard

Fill both blanks to assert the element's text color and font weight.

Cypress

cy.get('.header').should('have.css', 'color', [1]).and('have.css', 'font-weight', [2]);

Drag options to blanks, or click blank then click option'

A'rgb(0, 0, 0)'

B'bold'

C'700'

D'black'

Attempts:

3 left

💡 Hint

Common Mistakes

Using color names instead of rgb values.

Using 'bold' instead of '700' for font-weight.

Cypress returns computed colors in rgb format, so 'rgb(0, 0, 0)' is correct for black. Font weight is returned as a numeric string like '700' for bold.

5fill in blank

hard

Fill all three blanks to assert the element's margin, padding, and display properties.

Cypress

cy.get('.container').should('have.css', 'margin', [1]).and('have.css', 'padding', [2]).and('have.css', 'display', [3]);

Drag options to blanks, or click blank then click option'

A'16px'

B'0px'

C'flex'

D'block'

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up margin and padding values.

Using incorrect display values like 'inline-block' if not set.

Margin is set to '16px', padding to '0px', and display to 'flex' as per the computed styles Cypress returns.

Practice

1. What does the Cypress command cy.get('button').should('have.css', 'color', 'rgb(255, 0, 0)') check?

easy

A. It checks if the button is clickable.

B. It checks if the button's text color is red.

C. It checks if the button has a red background.

D. It checks if the button is visible on the page.

Solution

1. Step 1: Understand the CSS property being checked

   The command checks the CSS property 'color', which controls the text color of the element.

2. Step 2: Interpret the value 'rgb(255, 0, 0)'

   This RGB value represents the color red.

3. Final Answer:

   It checks if the button's text color is red. -> Option B

4. Quick Check:

   CSS property 'color' = text color [OK]

Hint: Check the CSS property name to know what style is tested [OK]

Common Mistakes:

• Confusing 'color' with 'background-color'
• Assuming it checks visibility instead of style
• Mixing RGB values with hex codes incorrectly

2. Which of the following is the correct Cypress syntax to assert that an element has a font size of 16 pixels?

easy

A. cy.get('p').should('css', 'font-size', '16px')

B. cy.get('p').should('have.style', 'font-size', '16px')

C. cy.get('p').assert('font-size', '16px')

D. cy.get('p').should('have.css', 'font-size', '16px')

Solution

1. Step 1: Identify the correct assertion method

   The correct Cypress assertion to check CSS is should('have.css', property, value).

2. Step 2: Match the syntax with the options

   cy.get('p').should('have.css', 'font-size', '16px') uses should('have.css', 'font-size', '16px'), which is correct syntax.

3. Final Answer:

   cy.get('p').should('have.css', 'font-size', '16px') -> Option D

4. Quick Check:

   Use should('have.css') for CSS assertions [OK]

Hint: Use 'should' with 'have.css' for CSS property checks [OK]

Common Mistakes:

• Using 'should' without 'have.css'
• Using 'assert' which is not a Cypress command
• Confusing 'have.style' with 'have.css'

3. Given the following Cypress code snippet, what will be the test result if the element's background color is actually 'rgb(0, 128, 0)'?

cy.get('.alert').should('have.css', 'background-color', 'rgb(255, 0, 0)')

medium

A. The test will fail because the background color does not match 'rgb(255, 0, 0)'.

B. The test will pass because the element has a background color.

C. The test will throw a syntax error.

D. The test will be skipped automatically.

Solution

1. Step 1: Understand the expected CSS value

   The test expects the background color to be 'rgb(255, 0, 0)', which is red.

2. Step 2: Compare with actual CSS value

   The actual background color is 'rgb(0, 128, 0)', which is green, so it does not match.

3. Final Answer:

   The test will fail because the background color does not match 'rgb(255, 0, 0)'. -> Option A

4. Quick Check:

   CSS value mismatch causes test failure [OK]

Hint: Match exact CSS values to avoid test failures [OK]

Common Mistakes:

• Assuming any color presence passes the test
• Confusing RGB values for different colors
• Expecting Cypress to auto-correct CSS mismatches

4. Identify the error in this Cypress CSS assertion and choose the fix:

cy.get('#header').should('have.css', 'font-weight', 700)

medium

A. The font-weight value should be a string: '700'.

B. The selector '#header' is invalid and should be '.header'.

C. The method 'have.css' should be replaced with 'css'.

D. The assertion should use 'expect' instead of 'should'.

Solution

1. Step 1: Check the type of CSS value in assertion

   Cypress expects the CSS value as a string, so 700 should be '700'.

2. Step 2: Verify other parts of the command

   The selector '#header' is valid, and 'should' with 'have.css' is correct syntax.

3. Final Answer:

   The font-weight value should be a string: '700'. -> Option A

4. Quick Check:

   CSS values must be strings in assertions [OK]

Hint: Always quote CSS values in Cypress assertions [OK]

Common Mistakes:

• Passing numbers instead of strings for CSS values
• Changing valid selectors unnecessarily
• Confusing assertion methods in Cypress

5. You want to verify that a button with class .submit-btn has a border radius of 5 pixels and a background color that is not transparent. Which Cypress code correctly asserts both styles?

hard

A. cy.get('.submit-btn').should('have.css', 'border-radius', '5px').and('have.css', 'background-color').not('transparent')

B. cy.get('.submit-btn').should('have.css', 'border-radius', '5px').and('have.css', 'background-color', 'rgba(0, 0, 0, 0)')

C. cy.get('.submit-btn').should('have.css', 'border-radius', '5px').and('have.css', 'background-color').should(value => expect(value).not.to.equal('rgba(0, 0, 0, 0)'))

D. cy.get('.submit-btn').should('have.css', 'border-radius', 5).and('have.css', 'background-color', 'transparent')"

Solution

1. Step 1: Assert border-radius with correct value and type

   Use should('have.css', 'border-radius', '5px') to check border radius as a string with units.

2. Step 2: Assert background-color is not transparent

   Since 'transparent' can be represented as 'rgba(0, 0, 0, 0)', use a callback assertion to check the value is not equal to that.

3. Step 3: Review options for correctness

   cy.get('.submit-btn').should('have.css', 'border-radius', '5px').and('have.css', 'background-color').should(value => expect(value).not.to.equal('rgba(0, 0, 0, 0)')) uses a callback with should and expect to verify background-color is not transparent, which is correct.

4. Final Answer:

   cy.get('.submit-btn').should('have.css', 'border-radius', '5px').and('have.css', 'background-color').should(value => expect(value).not.to.equal('rgba(0, 0, 0, 0)')) -> Option C

5. Quick Check:

   Use callback assertions for negative CSS checks [OK]

Hint: Use callback assertions to check CSS values are not equal [OK]

Common Mistakes:

• Passing numeric values without units for CSS properties
• Trying to chain 'not' directly after 'have.css' without callback
• Checking for exact transparent string instead of rgba value