Cypress - Text Verification

Cypress - Text Content Verification

Verifying the text content of web elements is a fundamental part of UI testing. Cypress offers several ways to obtain and assert text, ensuring your application displays the correct information to users.

Method 1: Using invoke('text') and expect

You can use the invoke('text') command to get the text content of a DOM element. This command yields the text, which you can then use in a .then() callback with assertion libraries like Chai (which Cypress bundles) to perform verifications.

Implementation with invoke('text')

Let’s say you want to verify the text of a heading on a page:

describe('Text Verification Demo', () => {
    it('Scenario 1: Verifies text using invoke("text") and expect', () => {
        cy.visit('https://example.cypress.io/commands/querying');

        // Get the main heading element
        cy.get('h1').first().invoke('text').then((actualText) => {
            // The 'actualText' variable now holds the string "Querying"
            // It's good practice to trim whitespace if necessary
            const trimmedText = actualText.trim();
            expect(trimmedText).to.equal('Querying'); // Chai assertion for exact match
            expect(trimmedText).to.contain('Query'); // Chai assertion for partial match
        });
    });
});

In this example, invoke('text') retrieves the text content. The .then() callback receives this text, and we use Chai’s expect syntax for assertions. This method gives you flexibility if you need to manipulate or perform complex logic with the text before asserting.

Method 2: Using Cypress’s Built-in should Assertions

Cypress provides powerful built-in assertions using the .should() command. This is often the more idiomatic and concise way to verify text content directly.

Common Text Assertions with should:

• should('have.text', 'expected text'): Asserts that the element’s text content is an exact match to the expected text. This considers the full text content, including that of child elements.
• should('contain.text', 'partial text') or should('include.text', 'partial text'): Asserts that the element’s text content includes the partial text. This is useful for checking for the presence of a substring.
• should('match', /regex/): Asserts that the element’s text content matches the given regular expression.

Implementation with should Assertions

describe('Text Verification Demo', () => {
    it('Scenario 2: Verifies text using .should() assertions', () => {
        cy.visit('https://example.cypress.io/commands/querying');

        // Verify exact text of the main heading
        cy.get('h1').first().should('have.text', 'Querying');

        // Verify partial text of a button
        // Assuming there's a button with id 'query-btn' and text 'Submit Query Button'
        cy.get('#query-btn').should('contain.text', 'Button');
        // Alternatively using include.text
        cy.get('#query-btn').should('include.text', 'Submit Query');

        // Example with a more specific element containing text
        // On example.cypress.io/commands/assertions, there's a table.
        cy.visit('https://example.cypress.io/commands/assertions');
        cy.get('.assertion-table td').first() // Gets the first cell in the assertion table
            .should('have.text', 'Column content'); // Verify its exact text
    });
});

Using .should() is generally preferred for text verification in Cypress due to its conciseness and alignment with Cypress’s retry-ability. Cypress will automatically retry the assertion until it passes or times out, which is helpful for dealing with dynamic content.

Choosing the Right Method

• Use .should('have.text', ...) for exact text matches.
• Use .should('contain.text', ...) or .should('include.text', ...) for partial text matches.
• Use .invoke('text').then(...) when you need to retrieve the text for further processing (e.g., parsing, comparing with another dynamic value) before making an assertion.

Effective text verification is crucial for ensuring UI correctness. Cypress provides flexible and powerful tools to accomplish this efficiently. For more assertion options, refer to the Cypress documentation on assertions and the bundled Chai BDD assertions.