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.