E-commerce with Playwright

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

// Each line uses a different kind of locator on purpose — the comments name them.
test.beforeEach(async ({ page }) => {
  await page.goto('/shop');
  await page.getByLabel('Username').fill('demo_user');                  // by its <label>
  await page.getByLabel('Password').fill('Demo@123');
  await page.getByRole('button', { name: 'Sign in' }).click();          // by role + accessible name
  await expect(page).toHaveURL(/\/shop\/products/);
});

test('buys headphones with a coupon', async ({ page }) => {
  await page.getByPlaceholder('Search products…').fill('headphones');   // by placeholder
  await expect(page.getByTestId('product-card')).toHaveCount(1);        // by data-testid
  await page.getByTestId('product-card').filter({ hasText: 'Aurora Wireless Headphones' })
    .getByRole('button', { name: 'Add to cart' }).click();              // chained: a button inside one card
  await expect(page.getByTestId('cart-badge')).toHaveText('1');

  await page.getByRole('link', { name: /^Cart with/ }).click();         // aria-label, matched with a regex
  await page.getByLabel('Coupon code').fill('SAVE10');                  // getByLabel also reads aria-label
  await page.getByRole('button', { name: 'Apply' }).click();
  await expect(page.getByTestId('discount')).toContainText('$13.00');

  await page.getByRole('link', { name: 'Checkout' }).click();
  await page.getByLabel('First name').fill('Ada');
  await page.getByLabel('Last name').fill('Lovelace');
  await page.locator('#email').fill('ada@example.com');                 // CSS: id
  await page.locator('input[name="phone"]').fill('5551234567');         // CSS: attribute
  await page.getByLabel('Street address').fill('1 Analytical Way');
  await page.locator('xpath=//input[@id="city"]').fill('Austin');       // XPath
  await page.getByRole('combobox', { name: 'State' }).selectOption('Texas');
  await page.getByLabel('ZIP code').fill('73301');
  await page.getByLabel('Name on card').fill('Ada Lovelace');
  await page.getByPlaceholder('4242 4242 4242 4242').fill('4242424242424242');
  await page.getByPlaceholder('MM/YY').fill('12/30');
  await page.getByLabel('CVV').fill('123');
  await page.getByRole('checkbox', { name: /I agree to the terms/ }).check();
  await page.getByRole('button', { name: /^Place order/ }).click();     // the button text ends with the total

  // Placing the order takes ~2s — web-first assertions wait for it.
  await expect(page.getByRole('heading', { name: 'Thank you for your order!' })).toBeVisible();
  await expect(page.getByTestId('order-id')).toHaveText(/^NS-\d+$/);
});

test('sorts by price, low to high', async ({ page }) => {
  await page.getByLabel('Sort by').selectOption('price-asc');
  const prices = (await page.getByTestId('product-price').allTextContents())
    .map((p) => Number(p.replace('$', '')));
  expect(prices).toEqual([...prices].sort((a, b) => a - b));
});