cypress-testing-library - Build an Automation Script

Verify user can search and see results on the search page

Preconditions (1)

Step 1: Locate the search input field by its accessible label 'Search'

Step 2: Type the text 'apple' into the search input field

Step 3: Locate and click the button with the accessible name 'Submit Search'

Step 4: Wait for the search results to appear

Step 5: Verify that at least one search result item is visible containing the text 'apple'

✅ Expected Result: The page displays search results related to 'apple' and at least one result item is visible with the text 'apple'

Automation Requirements - Cypress with @testing-library/cypress

Assertions Needed:

Verify the search input field is found by label 'Search'

Verify the search button is found by role and name 'Submit Search'

Verify at least one search result contains text 'apple' and is visible

Best Practices:

Use testing-library commands like cy.findByLabelText and cy.findByRole for accessibility-friendly selectors

Avoid using brittle selectors like CSS classes or IDs

Use explicit assertions to check visibility and content

Use Cypress commands chaining and built-in retries for stability

Automated Solution

Cypress

import '@testing-library/cypress/add-commands';

describe('Search Page Tests', () => {
  beforeEach(() => {
    cy.visit('/search');
  });

  it('allows user to search and see results', () => {
    // Find the search input by its label and type 'apple'
    cy.findByLabelText('Search').type('apple');

    // Find the submit button by role and name and click it
    cy.findByRole('button', { name: 'Submit Search' }).click();

    // Verify that at least one search result containing 'apple' is visible
    cy.findAllByText(/apple/i).should('be.visible').and('have.length.greaterThan', 0);
  });
});

The test imports the testing-library commands to use accessibility-friendly selectors.

Before each test, it visits the '/search' page as per precondition.

It finds the search input by its label 'Search' and types 'apple'.

Then it finds the submit button by its role 'button' and accessible name 'Submit Search' and clicks it.

Finally, it asserts that at least one visible element contains the text 'apple' (case-insensitive), ensuring search results appear.

This approach uses best practices by relying on accessible selectors and Cypress's automatic waiting for elements.

Common Mistakes - 3 Pitfalls

Using cy.get() with CSS selectors instead of testing-library queries

{'mistake': 'Not waiting for search results before asserting', 'why_bad': 'Assertions may run before results load, causing flaky test failures.', 'correct_approach': "Use testing-library queries that automatically retry until elements appear, like cy.findAllByText with should('be.visible')."}

Hardcoding text case in assertions

Bonus Challenge

Now add data-driven testing with 3 different search terms: 'apple', 'banana', 'cherry'

Show Hint