How to search with Playwright

On this page

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:

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

search.spec.ts

import { test, expect } from '@playwright/test'

test('search', async ({ page }) => {
  const bookList = [
    'The Foreigner',
    'The Transformation',
    'For Whom the Ball Tells',
    'Baiting for Robot'
  ]

  await page.goto('https://danube-web.shop/')

  await page.getByRole('textbox').click()
  await page.getByRole('textbox').fill('for')
  await page.getByRole('button', { name: 'Search' }).click()

  await page.waitForSelector(
    '.shop-content > ul > .preview:nth-child(1) > .preview-title'
  )

  // Halt immediately if results do not equal expected number
  const resultsNumber = (await page.$$('.preview-title')).length
  expect(resultsNumber).toEqual(bookList.length)

  // Remove every element found from the original array...
  for (let i = 0; i < resultsNumber; i++) {
    const resultTitle = await page.$eval(
      `.preview:nth-child(${i + 1}) > .preview-title`,
      (e) => e.innerText
    )

    const index = bookList.indexOf(resultTitle)
    bookList.splice(index, 1)
  }

  // ...then assert that the original array is now empty
  expect(bookList.length).toEqual(0)
})

Run in Checkly

Run this example as follows:

Terminal

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

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