Value and attribute assertions in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a value assertion in Cypress?

A value assertion checks if an element's value matches the expected value, like verifying the text inside an input field.

beginner

How do you assert an attribute value in Cypress?

Use .should('have.attr', 'attributeName', 'expectedValue') to check if an element has a specific attribute with the expected value.

beginner

Example: How to check if a button has the attribute disabled in Cypress?

Use cy.get('button').should('have.attr', 'disabled'). This checks if the button has the disabled attribute, meaning it is not clickable.

beginner

What does .should('have.value', 'text') do in Cypress?

It asserts that the element's value property equals the given text, useful for input fields or textareas.

beginner

Why are value and attribute assertions important in testing?

They confirm that the UI elements have the correct data and states, ensuring the app behaves as expected for users.

Which Cypress command checks if an element has a specific attribute with a certain value?

A cy.get('selector').should('have.class', 'value')

B cy.get('selector').should('have.text', 'value')

C cy.get('selector').should('contain', 'value')

D cy.get('selector').should('have.attr', 'attributeName', 'value')

The command should('have.attr', 'attributeName', 'value') checks for a specific attribute and its value.

How do you assert the value of an input field in Cypress?

A cy.get('input').should('have.value', 'expectedValue')

B cy.get('input').should('have.text', 'expectedValue')

C cy.get('input').should('contain', 'expectedValue')

D cy.get('input').should('have.attr', 'value')

Use should('have.value', 'expectedValue') to check the input's value property.

What does the assertion .should('have.attr', 'disabled') verify?

A The element contains text 'disabled'

B The element is visible

C The element has a disabled attribute, meaning it is disabled

D The element has a class named 'disabled'

Checking for the 'disabled' attribute confirms the element is disabled.

Which assertion would you use to check if a button's title attribute equals 'Submit'?

A cy.get('button').should('have.attr', 'title', 'Submit')

B cy.get('button').should('have.value', 'Submit')

C cy.get('button').should('contain', 'Submit')

D cy.get('button').should('have.text', 'Submit')

Use have.attr with the attribute name and expected value.

Why is it better to use attribute assertions instead of text assertions for checking element states?

A Text assertions cannot fail

B Attributes reflect element states more reliably than visible text

C Attributes are only for styling

D Text assertions are faster

Attributes like 'disabled' or 'checked' show actual element states, which text may not reveal.

Explain how to use Cypress to assert that an input field contains the expected value.

Think about how you check the text inside a form field.

Describe how attribute assertions help verify UI element states in Cypress tests.

Consider how a button can be disabled or enabled.