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.

Practice

1. What does the Cypress command cy.get('input').should('have.value', 'hello') check?

easy

A. It confirms the input field is enabled for typing.

B. It checks that the input field has an attribute named 'value' regardless of content.

C. It checks that the input field contains the text 'hello' as its value.

D. It verifies the input field is visible on the page.

Solution

1. Step 1: Understand the command context

   The command targets an input element and uses should('have.value', 'hello') which asserts the value property of the input.

2. Step 2: Interpret the assertion meaning

   This assertion checks the actual content inside the input field, expecting it to be exactly 'hello'.

3. Final Answer:

   It checks that the input field contains the text 'hello' as its value. -> Option C

4. Quick Check:

   Value assertion = check input content [OK]

Hint: Value assertions check input content, not just attribute presence [OK]

Common Mistakes:

• Confusing 'have.value' with checking attribute existence
• Assuming it checks visibility or enabled state
• Mixing up value with text content

2. Which of the following is the correct Cypress syntax to assert that a button has an attribute disabled?

easy

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

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

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

D. cy.get('button').should('be.disabled')

Solution

1. Step 1: Identify attribute assertion syntax

   The correct way to check for an attribute presence is using should('have.attr', 'attributeName').

2. Step 2: Match the attribute name

   Here, the attribute is 'disabled', so the command is should('have.attr', 'disabled').

3. Final Answer:

   cy.get('button').should('have.attr', 'disabled') -> Option A

4. Quick Check:

   Attribute assertion uses 'have.attr' [OK]

Hint: Use 'have.attr' to check attribute presence [OK]

Common Mistakes:

• Using 'have.value' instead of 'have.attr' for attributes
• Using 'contain' which checks text content, not attributes
• Confusing 'be.disabled' which checks element state, not attribute

3. Consider this Cypress code snippet:

cy.get('input#email')
  .should('have.attr', 'placeholder', 'Enter your email')
  .and('have.value', '')

What will this test verify?

medium

A. The input has placeholder text 'Enter your email' and is empty.

B. The input has value 'Enter your email' and placeholder is empty.

C. The input is visible and enabled for typing.

D. The input has attribute 'value' set to 'Enter your email'.

Solution

1. Step 1: Analyze the attribute assertion

   should('have.attr', 'placeholder', 'Enter your email') checks the placeholder attribute equals 'Enter your email'.

2. Step 2: Analyze the value assertion

   and('have.value', '') asserts the input's current value is empty (no text typed).

3. Final Answer:

   The input has placeholder text 'Enter your email' and is empty. -> Option A

4. Quick Check:

   Attribute + value assertions combined = The input has placeholder text 'Enter your email' and is empty. [OK]

Hint: Attribute checks attribute text; value checks input content [OK]

Common Mistakes:

• Mixing placeholder attribute with input value
• Assuming value is placeholder text
• Ignoring the empty string value assertion

4. You wrote this Cypress test:

cy.get('input[name="username"]').should('have.value', 'admin')

But it fails even though the input shows 'admin' on the page. What is the likely problem?

medium

A. The test should use 'have.attr' instead of 'have.value'.

B. The selector is incorrect and does not find the input.

C. The input is disabled, so value cannot be read.

D. The input's value attribute is empty; text is shown by placeholder.

Solution

1. Step 1: Understand difference between value and placeholder

   If the input visually shows 'admin' but have.value fails, likely 'admin' is placeholder text, not actual value.

2. Step 2: Confirm attribute vs value difference

   Placeholder text appears when value is empty. The test checks value, so it fails if value is empty.

3. Final Answer:

   The input's value attribute is empty; text is shown by placeholder. -> Option D

4. Quick Check:

   Value assertion fails if text is placeholder [OK]

Hint: Check if text is placeholder, not actual input value [OK]

Common Mistakes:

• Confusing placeholder text with input value
• Assuming selector is wrong without checking
• Using 'have.attr' incorrectly for value check

5. You want to verify a checkbox is checked and has a custom attribute data-test with value agree. Which Cypress assertion chain is correct?

hard

A. cy.get('input[type="checkbox"]').should('have.attr', 'checked').and('have.value', 'agree')

B. cy.get('input[type="checkbox"]').should('be.checked').and('have.attr', 'data-test', 'agree')

C. cy.get('input[type="checkbox"]').should('have.value', 'checked').and('have.attr', 'data-test')

D. cy.get('input[type="checkbox"]').should('be.checked').and('have.value', 'agree')

Solution

1. Step 1: Check checkbox state assertion

   To verify a checkbox is checked, use should('be.checked').

2. Step 2: Check attribute with specific value

   To verify an attribute and its value, use should('have.attr', 'data-test', 'agree').

3. Step 3: Combine assertions correctly

   Chain both assertions with and() to check both conditions on the same element.

4. Final Answer:

   cy.get('input[type="checkbox"]').should('be.checked').and('have.attr', 'data-test', 'agree') -> Option B

5. Quick Check:

   Checkbox checked + attribute value = cy.get('input[type="checkbox"]').should('be.checked').and('have.attr', 'data-test', 'agree') [OK]

Hint: Use 'be.checked' for checkbox state, 'have.attr' for attribute value [OK]

Common Mistakes:

• Using 'have.value' to check checkbox state
• Checking 'checked' attribute instead of state
• Not specifying attribute value in assertion