Demo code

1.ts

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

test('Buy coffee with Espresso and Americano, total $17', async ({ page }) => {
  await page.goto('https://seleniumbase.io/coffee/');
  await page.locator('[data-test="Espresso"]').click();
  await page.locator('[data-test="Americano"]').click();
  await expect(page.getByLabel('Cart page')).toContainText('cart (2)');
  await page.getByRole('link', { name: 'Cart page' }).click();
  await expect(page.locator('[data-test="checkout"]')).toContainText('Total: $17.00');
  await page.locator('[data-test="checkout"]').click();
  await page.getByRole('textbox', { name: 'Name' }).fill('somkiat');
  await page.getByRole('textbox', { name: 'Name' }).press('Tab');
  await page.getByRole('textbox', { name: 'Email' }).fill('somkiat@xx.com');
  await page.getByRole('checkbox', { name: 'Promotion checkbox' }).check();
  await page.getByRole('button', { name: 'Submit' }).click();
  await page.getByRole('button', { name: 'Thanks for your purchase.' }).click();
});

2.ts

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

test('Buy coffee with Espresso and Americano, total $17', async ({ page }) => {
  await page.goto('https://seleniumbase.io/coffee/');
  // await page.locator('[data-test="Espresso"]').click();
  await expect(page).toHaveScreenshot();
});

3.ts

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

test('Mock API response', async ({ page }) => {
  // Intercept network requests
  await page.route('https://demo-backend-nodejs.vercel.app/**', route => {
    // Respond with a mock response
    route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({ message: 'Hello 222' })
    });
  });

  await page.goto('https://demo-frontend-reactjs.vercel.app/');
  await page.waitForSelector('[data-testid="hello_text"]');
  const hello_text = await page.getByTestId('hello_text').textContent();
  expect(hello_text).toBe('Hello XXX');
});