CSS assertions in Cypress - Build an Automation Script

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