Testing Product Search Functionality

Welcome back! You've navigated through the complexities of user journey testing in e-commerce applications, and now it's time to focus on a critical component — testing product search functionality. In this lesson, we'll concentrate on ensuring that the search feature within an e-commerce site performs accurately and efficiently. Building on what you've learned in the previous lesson, we'll continue using Playwright and TypeScript to execute our tests seamlessly.

In this lesson, you'll discover how automated tests can validate the functionality of a product search feature. Specifically, you will:

• Understand how to implement an automated test to verify that product search returns the expected results.
• Learn to construct specialized methods in a Playwright Page Object Model to interact with the search feature.
• Gain expertise in using locators to detect the visibility of search results accurately.

Consider a snippet of the code you'll work with, reinforcing these concepts:

import { test, expect } from '@playwright/test';
import { BooksPage } from './BooksPage';

test.describe('Product Search Functionality', () => {
  let booksPage: BooksPage;

  test.beforeEach(async ({ page }) => {
    booksPage = new BooksPage(page);
    await booksPage.goto();
  });

  test('product search and validation in Books Page', async () => {
    await booksPage.searchForBook('The Great Gatsby');
    await expect(booksPage.bookTitle('The Great Gatsby')).toBeVisible();
  });
});

This code sets up a structured approach to verifying the search capability, ensuring that users find the books they need without hassle.

Here's the complete BooksPage class, which provides the foundation for interacting with the search feature:

import { Page } from '@playwright/test';

export class BooksPage {
  readonly page: Page;

  constructor(page: Page) {
    this.page = page;
  }

  async goto() {
    await this.page.goto('http://localhost:3000/books');
  }

  async searchForBook(bookTitle: string) {
    await this.page.fill('#search-box', bookTitle);
    await this.page.press('#search-box', 'Enter');
  }

  bookTitle(title: string) {
    return this.page.locator(`text=${title}`);
  }
}

This class manages page interactions, allowing tests to simulate user behaviors, such as navigating to the books page and performing search operations.