Value and attribute assertions in Cypress - Deep Dive

Overview - Value and attribute assertions

What is it?

Value and attribute assertions are checks in Cypress tests that confirm if an element on a web page has a specific value or attribute. Values usually refer to the content or input inside elements like text boxes, while attributes are properties like 'href' or 'class' that describe the element. These assertions help testers verify that the web page behaves as expected by checking these details.

Why it matters

Without value and attribute assertions, testers cannot be sure if the web page elements hold the correct data or properties. This can lead to bugs going unnoticed, such as wrong links, missing classes, or incorrect form inputs. These assertions ensure the user interface works correctly and improves user experience by catching errors early.

Where it fits

Before learning value and attribute assertions, you should understand basic Cypress commands and how to select elements on a page. After mastering these assertions, you can move on to more complex testing topics like event handling, custom commands, and end-to-end test flows.

Mental Model

Core Idea

Value and attribute assertions check if a web element’s content or properties match what we expect to ensure the page works correctly.

Think of it like...

It's like checking a label on a jar to make sure it says the right flavor and that the lid is sealed properly before buying it.

┌───────────────────────────────┐
│        Web Element             │
│ ┌───────────────┐             │
│ │ Value: 'text' │             │
│ │ Attribute:    │             │
│ │  class='btn'  │             │
│ └───────────────┘             │
│                               │
│  Assertions check if these    │
│  match expected values        │
└───────────────────────────────┘

Build-Up - 6 Steps

1

Foundation

Understanding element values

Concept: Learn what element values are and how to check them in Cypress.

In web pages, some elements like input boxes have a 'value' property that holds user input or default text. In Cypress, you can check this value using the .should('have.value', expectedValue) assertion. For example, to check if an input has 'hello' typed in, you write: cy.get('input#name').should('have.value', 'hello')

Result

The test passes if the input's value is exactly 'hello'; otherwise, it fails.

Understanding that 'value' is a property holding user or default input helps you verify form data accurately.

2

Foundation

Basics of element attributes

Concept: Learn what attributes are and how to assert them in Cypress.

Attributes are properties of HTML elements that describe them, like 'href' for links or 'class' for styling. Cypress lets you check attributes using .should('have.attr', attributeName, expectedValue). For example, to check a link's URL: cy.get('a#home').should('have.attr', 'href', '/home')

Result

The test passes if the 'href' attribute equals '/home'; otherwise, it fails.

Knowing attributes describe elements lets you confirm elements have correct properties, which affects behavior and appearance.

3

Intermediate

Checking partial attribute values

🤔Before reading on: do you think Cypress can check if an attribute contains part of a value, or only exact matches? Commit to your answer.

Concept: Learn to assert that an attribute contains a substring instead of an exact match.

Sometimes attributes have long values, like multiple classes. Cypress supports checking if an attribute contains a substring using .should('include.attr', attributeName, substring). For example: cy.get('button').should('include.attr', 'class', 'active') This passes if the button's class attribute includes 'active' anywhere.

Result

The test passes if the attribute contains the substring; otherwise, it fails.

Knowing you can check partial matches helps test dynamic or compound attributes without needing exact full values.

4

Intermediate

Asserting multiple attributes and values

🤔Before reading on: do you think you can chain multiple assertions on one element in Cypress, or must you write separate commands? Commit to your answer.

Concept: Learn to check several attributes or values on the same element efficiently.

Cypress allows chaining multiple .should() assertions on one element. For example: cy.get('input#email') .should('have.value', '[e-mail]') .should('have.attr', 'type', 'email') This checks both the input's value and its type attribute in one go.

Result

The test passes only if all assertions are true; otherwise, it fails.

Chaining assertions keeps tests concise and readable while verifying multiple element properties.

5

Advanced

Custom attribute assertions with callbacks

🤔Before reading on: can you write a custom check on an attribute's value using a function in Cypress assertions? Commit to your answer.

Concept: Learn to use callback functions for flexible attribute assertions beyond exact or partial matches.

Cypress lets you pass a function to .should() to perform custom checks. For example, to check if a data attribute starts with 'user-': cy.get('div.profile').should(($el) => { const attr = $el.attr('data-id') expect(attr).to.match(/^user-/) }) This allows complex logic inside assertions.

Result

The test passes if the function's expectation is met; otherwise, it fails.

Using callbacks unlocks powerful, flexible assertions for complex attribute validation.

6

Expert

Handling dynamic attributes in tests

🤔Before reading on: do you think static assertions work well for attributes that change often, or do you need special strategies? Commit to your answer.

Concept: Learn strategies to test attributes that change dynamically, like timestamps or random IDs.

Dynamic attributes can cause flaky tests if checked for exact values. Instead, use pattern matching, partial checks, or custom functions to verify expected formats or presence. For example: cy.get('span.timestamp').should(($el) => { const time = $el.attr('data-time') expect(time).to.match(/\d{4}-\d{2}-\d{2}/) // date format }) This avoids brittle tests that fail on every change.

Result

Tests become stable and meaningful even with changing attribute values.

Knowing how to handle dynamic attributes prevents flaky tests and improves test reliability in real projects.

Under the Hood

Cypress runs in the browser and accesses DOM elements directly. When you use .should('have.value', val) or .should('have.attr', attr, val), Cypress queries the element's properties or attributes from the DOM node. It then compares these live values to your expected values using JavaScript equality or custom logic. Assertions are retried automatically until they pass or timeout, handling asynchronous page updates.

Why designed this way?

Cypress was designed to test real user experiences by interacting with the actual browser DOM. Accessing live element properties and attributes ensures tests reflect true page state. Automatic retries handle dynamic content without flaky failures. This approach is simpler and more reliable than simulating or mocking DOM states.

┌───────────────┐       ┌───────────────┐       ┌───────────────┐
│ Cypress Test  │──────▶│ Browser DOM   │──────▶│ Element Value │
│ .should(...)  │       │ Element Node  │       │ or Attribute  │
└───────────────┘       └───────────────┘       └───────────────┘
       │                      ▲                        │
       │                      │                        │
       │                      └───────────────┐        │
       │                                      │        │
       └───────── Assertion Comparison ◀─────┘        │
                                                    │
                                          Pass or Fail Result

Myth Busters - 4 Common Misconceptions

Quick: Does .should('have.value', val) check the visible text inside an element or the input's value property? Commit to your answer.

Common Belief: Many think 'have.value' checks the visible text inside any element, like a

or .

Reality: 'have.value' only checks the value property of input, textarea, or select elements, not visible text inside other elements.

Why it matters: Using 'have.value' on non-input elements leads to false test failures or confusion, wasting debugging time.

Quick: Can you use 'have.attr' to check multiple attributes at once? Commit to your answer.

Common Belief: Some believe 'have.attr' can check several attributes in one call by passing multiple names.

Reality: 'have.attr' checks only one attribute per assertion; to check multiple, you must chain assertions.

Why it matters: Trying to check multiple attributes at once causes syntax errors or silent test failures.

Quick: Does Cypress retry assertions on attributes automatically until timeout? Commit to your answer.

Common Belief: Some think Cypress retries attribute assertions automatically like other commands.

Reality: Cypress retries assertions on values and attributes automatically until they pass or timeout, helping with dynamic content.

Why it matters: Knowing this prevents adding unnecessary waits or retries manually, making tests cleaner and faster.

Quick: Is it safe to assert exact attribute values on elements with dynamic IDs? Commit to your answer.

Common Belief: Many assume exact attribute assertions work well even if attribute values change every page load.

Reality: Exact assertions on dynamic attributes cause flaky tests; partial or pattern matching is better.

Why it matters: Ignoring this leads to unstable tests that fail unpredictably, reducing confidence in test results.

Expert Zone

1

Attribute values can be case-sensitive or insensitive depending on HTML standards; knowing this avoids false negatives.

2

Some attributes like 'class' can contain multiple space-separated values; checking for one class requires substring or token matching.

3

Cypress retries assertions but does not retry if the element disappears; handling element detachment requires extra care.

When NOT to use

Avoid exact value or attribute assertions on elements with frequently changing or randomized attributes like session IDs or timestamps. Instead, use pattern matching, partial checks, or test higher-level behaviors. For non-DOM data, consider API testing or mocking.

Production Patterns

In real projects, testers combine value and attribute assertions with accessibility checks and visual tests. They use custom commands to wrap common assertions for readability. Tests often assert attributes like 'aria-label' for accessibility and 'data-*' attributes for test stability.

Connections

Accessibility Testing

Builds-on

Knowing how to assert attributes helps verify accessibility properties like 'aria-label', improving inclusive design.

API Testing

Complementary

While value and attribute assertions check UI state, API testing verifies backend data, together ensuring full app correctness.

Quality Control in Manufacturing

Similar pattern

Just like checking product labels and features ensures quality in factories, value and attribute assertions ensure software quality by verifying element details.

Common Pitfalls

#1 Checking visible text with 'have.value' instead of 'contain.text'.

Wrong approach:

cy.get('div.message').should('have.value', 'Success')

Correct approach:

cy.get('div.message').should('contain.text', 'Success')

Root cause:

Confusing element value property with visible text content.

#2 Trying to check multiple attributes in one assertion.

Wrong approach:

cy.get('a.link').should('have.attr', 'href', '/home', 'target', '_blank')

Correct approach:

cy.get('a.link').should('have.attr', 'href', '/home').should('have.attr', 'target', '_blank')

Root cause:

Misunderstanding that 'have.attr' accepts only one attribute at a time.

#3 Asserting exact dynamic attribute values causing flaky tests.

Wrong approach:

cy.get('span.timestamp').should('have.attr', 'data-time', '2024-06-01T12:00:00Z')

Correct approach:

cy.get('span.timestamp').should(($el) => {
const time = $el.attr('data-time')
expect(time).to.match(/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}Z/)
})

Root cause:

Not accounting for changing attribute values in tests.

Key Takeaways

Value assertions check the input or content value of form elements, not visible text in all elements.

Attribute assertions verify element properties like 'href' or 'class' and require one attribute per assertion.

Cypress retries value and attribute assertions automatically, helping with dynamic page content.

Using partial matches or custom functions for attributes prevents flaky tests on dynamic values.

Chaining assertions on one element keeps tests clear and efficient.