Cypresstesting~15 mins

CSS assertions in Cypress - Build an Automation Script

Choose your learning style10 modes available

Learn Why Deep Trace Try Challenge Automate Recall Frame

Verify CSS properties of a button on the homepage

Preconditions (2)

Step 1: Open the homepage URL in a browser

Step 2: Locate the button with id 'submit-btn'

Step 3: Check that the button's background color is '#007bff'

Step 4: Check that the button's font size is '16px'

Step 5: Check that the button's border radius is '4px'

✅ Expected Result: The button with id 'submit-btn' has the background color '#007bff', font size '16px', and border radius '4px'

Automation Requirements - Cypress

Assertions Needed:

Verify background-color CSS property

Verify font-size CSS property

Verify border-radius CSS property

Best Practices:

Use cy.get() with id selector for locating elements

Use should('have.css', property, value) for CSS assertions

Avoid hardcoding CSS values in multiple places; keep them consistent

Use descriptive test names

Include comments for clarity

Automated Solution

Cypress

describe('CSS Assertions for Submit Button', () => {
  beforeEach(() => {
    cy.visit('https://example.com'); // Replace with actual homepage URL
  });

  it('should have correct CSS properties on submit button', () => {
    // Locate the button by id
    cy.get('#submit-btn')
      // Assert background color
      .should('have.css', 'background-color', 'rgb(0, 123, 255)')
      // Assert font size
      .and('have.css', 'font-size', '16px')
      // Assert border radius
      .and('have.css', 'border-radius', '4px');
  });
});

This Cypress test suite named CSS Assertions for Submit Button runs on the homepage URL.

The beforeEach hook opens the homepage before each test.

The test locates the button with id submit-btn using cy.get('#submit-btn').

It then asserts the CSS properties using should('have.css', property, value):

background-color is checked as rgb(0, 123, 255) because browsers return colors in rgb format.
font-size is checked as 16px.
border-radius is checked as 4px.

Using chaining with .and() keeps the assertions clean and readable.

This approach follows Cypress best practices for CSS assertions and element selection.

Common Mistakes - 4 Pitfalls

{'mistake': "Using hex color code directly in CSS assertion like '#007bff'", 'why_bad': 'Browsers return computed colors in rgb format, so the assertion will fail.', 'correct_approach': "Use the rgb equivalent 'rgb(0, 123, 255)' in the assertion."}

{'mistake': "Using generic selectors like 'button' instead of specific id selectors", 'why_bad': 'May select multiple elements causing flaky tests or wrong assertions.', 'correct_approach': "Use specific selectors like '#submit-btn' to target the exact element."}

{'mistake': 'Not waiting for the page to load before assertions', 'why_bad': 'Assertions may run before elements are ready, causing false failures.', 'correct_approach': "Use cy.visit() and Cypress's automatic waits to ensure elements are ready."}

Hardcoding CSS values in multiple tests without centralizing

Bonus Challenge

Now add data-driven testing to verify CSS properties for three different buttons with ids 'submit-btn', 'cancel-btn', and 'reset-btn' each having different expected CSS values.

Show Hint

Practice

(1/5)

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.

Recommended

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard

CSS assertions in Cypress - Build an Automation Script

Practice

Solution

Step 1: Understand the CSS property being checked

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

Final Answer:

Quick Check:

Solution

Step 1: Identify the correct assertion method

Step 2: Match the syntax with the options

Final Answer:

Quick Check:

Solution

Step 1: Understand the expected CSS value

Step 2: Compare with actual CSS value

Final Answer:

Quick Check:

Solution

Step 1: Check the type of CSS value in assertion

Step 2: Verify other parts of the command

Final Answer:

Quick Check:

Solution

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

Step 2: Assert background-color is not transparent

Step 3: Review options for correctness

Final Answer:

Quick Check:

Ready to prove it?