How to search with Playwright

Test a site’s search function end to end with Playwright by entering a term and asserting the expected number and content of results are shown.

If you’re using Playwright for end-to-end testing, you should check out Playwright Check Suites and start testing in production.

Searching a website is an everyday action for most internet users. For most services, the speed at which their customers are able to get to the products they are looking for is directly tied to revenue. To enable that, a performant and reliable search function is needed.

Steps

The example below, which is running against our test webshop, shows how we can verify the correctness of a search’s result from an end-to-end perspective. In short, we will:

1. Enter a known search term
2. Firstly, assert the expected number of results is being shown
3. If the previous point is true, assert that all expected search results are shown

search.spec.ts

// Example code for testing search functionality
import { test, expect } from '@playwright/test';

test('search functionality', async ({ page }) => {
  await page.goto('https://danube-web.shop/');

  // Enter search term
  await page.fill('#search-input', 'book');
  await page.click('#search-button');

  // Assert expected number of results
  await expect(page.locator('.search-result')).toHaveCount(4);

  // Assert all expected search results are shown
  await expect(page.locator('.search-result')).toContainText([
    'Haben oder haben',
    'Parry Hotter',
    'Laughterhouse-Five',
    'To Mock a Killingbird'
  ]);
});

Run this example as follows:

npx playwright test search.spec.ts

When testing search on large sets of data, you might additionally need to handle result pagination, together with the possibility of duplicate results.

Listing search terms and their corresponding expected results in a file could be helpful for additional, more thorough testing. The contents of the file would be then used to drive the searches and comparisons. An example could look like the following JSON:

[
    {
        "search": "pen",
        "results": [
            "red pen",
            "blue pen",
            "fountain pen"
        ]
    },
    {
        "search": "pencil",
        "results": [
            "short pencil",
            "pencil sharpener",
            "pencil case"
        ]
    }
]

Takeaways

1. Moving test data to a separate file can help when running more thorough comparisons.
2. Assertion libraries help us cleanly verify multiple constraints in our test.

Bugs don’t stop at CI/CD. Why would Playwright?

Sign up and start using Playwright for end-to-end monitoring with Checkly.