Validating Shopping Cart Updates

import { test, expect } from '@playwright/test';
import { HomePage } from './pages/homePage';
import { CartPage } from './pages/cartPage';

test('validate shopping cart updates', async ({ page }) => {
  const homePage = new HomePage(page);
  const cartPage = new CartPage(page);

  // Navigate to the home page and add the book to the cart
  await homePage.goto();
  await homePage.addToCart('The Great Gatsby');

  // Navigate to the cart page and validate that the book is added
  await cartPage.goto();
  await cartPage.expectBookVisible('The Great Gatsby');

  // Remove book from cart and confirm the cart is empty
  await cartPage.removeBook('The Great Gatsby');
  await cartPage.expectCartEmpty();
});

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

export class HomePage {
  readonly page: Page;

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

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

  async addToCart(bookTitle: string) {
    const bookSelector = `.book-title:text-is("${bookTitle}")`;
    await this.page.locator(bookSelector).locator('..').locator('button:text("Add to Cart")').click();
  }
}

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

export class CartPage {
  readonly page: Page;

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

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

  async expectBookVisible(bookTitle: string) {
    await expect(this.page.locator(`text=${bookTitle}`)).toBeVisible();
  }

  async removeBook(bookTitle: string) {
    const removeButtonSelector = `li:has-text("${bookTitle}") >> text=Remove`;
    await this.page.click(removeButtonSelector);
  }

  async expectCartEmpty() {
    await expect(this.page.locator('text=Your cart is empty')).toBeVisible();
  }
}