CSS assertions in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a CSS assertion in Cypress testing?

A CSS assertion checks if a web element has a specific CSS property value during a test. It helps verify the style or appearance of elements.

beginner

How do you check the color of a button using Cypress CSS assertions?

Use cy.get('button').should('have.css', 'color', 'rgb(255, 0, 0)') to assert the button's text color is red in RGB format.

intermediate

Why is it better to use should('have.css', ...) instead of checking styles manually?

Because should('have.css', ...) waits for the element to have the style and retries automatically, making tests more reliable and less flaky.

intermediate

What CSS property value format does Cypress expect in assertions?

Cypress expects computed CSS values, usually in formats like rgb() for colors or exact strings for other properties, matching what the browser computes.

beginner

Example: How to assert that a div has a font size of 16 pixels in Cypress?

Use cy.get('div').should('have.css', 'font-size', '16px') to check the font size is exactly 16 pixels.

Which Cypress command checks if an element has a specific CSS property?

A should('have.css', property, value)

B expect(element).toHaveStyle(property, value)

C checkCss(property, value)

D assertCss(property, value)

In Cypress, should('have.css', property, value) is the correct way to assert CSS properties.

What format should color values be in for Cypress CSS assertions?

A Hexadecimal (#FF0000)

B RGB format (rgb(255, 0, 0))

C Named colors (red)

D HSL format (hsl(0, 100%, 50%))

Cypress uses the computed style, which usually returns colors in RGB format.

Why does Cypress retry CSS assertions automatically?

A To ignore CSS errors

B To slow down tests

C To wait for animations or style changes to complete

D To cache CSS values

Cypress retries assertions to wait for dynamic style changes like animations or transitions.

Which CSS property would you check to verify text is bold?

A font-weight

B font-style

C text-decoration

D font-size

The font-weight property controls boldness of text.

What happens if the CSS property value does not match in a Cypress assertion?

A Test retries forever

B Test passes anyway

C Test skips the assertion

D Test fails with an assertion error

If the CSS value does not match, Cypress fails the test with a clear error.

Explain how to write a CSS assertion in Cypress to check an element's background color.

Think about selecting the element and checking the computed style property.

Describe why CSS assertions are important in UI testing with Cypress.

Consider how CSS affects user experience and why testing it matters.