CSS assertions in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ assertion

intermediate

Check background color of a button

You want to verify that a button with id #submitBtn has a background color of rgb(0, 128, 0). Which Cypress assertion is correct?

Cypress

cy.get('#submitBtn').should('have.css', 'background-color', 'rgb(0, 128, 0)')

A cy.get('#submitBtn').should('have.style', 'background-color', 'rgb(0, 128, 0)')

B cy.get('#submitBtn').should('have.css', 'background-color', 'rgb(0, 128, 0)')

C cy.get('#submitBtn').should('have.attr', 'background-color', 'rgb(0, 128, 0)')

D )')0 ,821 ,0(bgr' ,'roloc-dnuorgkcab' ,'ssc.evah'(dluohs.)'ntBtimbus#'(teg.yc

💡 Hint

Use the correct assertion method to check CSS properties.

The correct Cypress assertion to check CSS properties is 'have.css'. Option B uses it correctly. Option B uses 'css' which is not a valid assertion. Option B tries to check an attribute which is incorrect for CSS properties. Option B uses 'have.style' which is not a valid Cypress assertion.

❓ assertion

intermediate

Verify font size of a paragraph

Which Cypress command correctly asserts that a paragraph with class .intro has a font size of 16px?

Cypress

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

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

B cy.get('.intro').should('have.attr', 'font-size', '16px')

C cy.get('.intro').should('contain.css', 'font-size', '16px')

D cy.get('.intro').should('have.style', 'font-size', '16px')

💡 Hint

Remember CSS properties are checked with 'have.css' in Cypress.

Option A correctly uses 'have.css' to check the font size. Option A incorrectly uses 'have.attr' which checks HTML attributes, not CSS. Option A uses 'contain.css' which is not a valid assertion. Option A uses 'have.style' which is invalid in Cypress.

❓ Predict Output

advanced

Output of CSS color assertion failure

What will be the test result when running this Cypress code if the element's color is rgb(255, 0, 0) but the assertion expects rgb(0, 0, 255)?

Cypress

cy.get('.title').should('have.css', 'color', 'rgb(0, 0, 255)')

A Test fails with a syntax error in the test code

B Test passes because color values are case-insensitive

C Test fails with an assertion error showing expected 'rgb(0, 0, 255)' but found 'rgb(255, 0, 0)'

D Test passes but logs a warning about color mismatch

💡 Hint

Think about what happens when expected and actual CSS values differ.

Cypress assertions compare exact CSS values. Since the actual color is red (rgb(255, 0, 0)) but the test expects blue (rgb(0, 0, 255)), the test fails with an assertion error showing the mismatch. There is no syntax error or warning in this case.

❓ locator

advanced

Best locator for CSS assertion on a disabled button

You want to assert the opacity of a disabled button. Which locator is best to select the disabled button for CSS assertion?

A cy.get('button:disabled')

B cy.get('button[disabled="true"]')

C cy.get('button.disabled')

D cy.get('button[disabled]')

💡 Hint

Consider how HTML disabled attribute works and how to select it in CSS.

Option D correctly selects buttons with the disabled attribute regardless of its value. Option D uses the :disabled pseudo-class which works but is less explicit in Cypress selectors. Option D looks for disabled="true" which is incorrect because disabled attribute is boolean and usually has no value or empty. Option D selects buttons with class 'disabled' which is different from the disabled attribute.

❓ framework

expert

Handling dynamic CSS changes in Cypress tests

You have a button that changes its background color from rgb(255, 0, 0) to rgb(0, 255, 0) after a click. Which Cypress code correctly asserts this dynamic CSS change?

A cy.get('#colorBtn').should('have.css', 'background-color', 'rgb(255, 0, 0)').click().should('have.css', 'background-color', 'rgb(0, 255, 0)')

B cy.get('#colorBtn').click().should('have.css', 'background-color', 'rgb(0, 255, 0)')

C cy.get('#colorBtn').click(); cy.get('#colorBtn').should('have.css', 'background-color', 'rgb(0, 255, 0)')

D cy.get('#colorBtn').click().then(() => { cy.get('#colorBtn').should('have.css', 'background-color', 'rgb(0, 255, 0)') })

💡 Hint

Check the initial state before click and then the changed state after click.

Option A first asserts the initial background color, then clicks, then asserts the changed color. This ensures the test checks both states clearly. Option A only checks after click, missing initial state. Option A separates commands but may cause timing issues. Option A uses then callback unnecessarily and may cause flaky tests.