Playwright fixtures and reusable setup

Before you start

You need Node.js, basic TypeScript and Microsoft Edge for this configuration. Use the SPOTHUB local server on port 3000, or download the demo HTML and serve it with your own local static server. No real customer or payment data is needed.

Set up a practice folder

Download the test and configuration into an empty folder. Keep the practice page server running while tests execute. Set LAB_BASE_URL if your server uses a different origin.

Download fixtures.spec.ts · Download configuration · Download demo HTML

npm init -y
npm install -D @playwright/test@1.63.0
npx playwright test fixtures.spec.ts

For a standalone HTML download, keep it in a labs folder beneath your server root so /labs/checkout.html resolves. This example targets Edge; other browsers have not been verified in this lab.

Read and run the test

The checkout fixture prepares the page before use. It depends on Playwright’s isolated page fixture. The second test checks a fresh starting quantity and empty confirmation; it does not depend on a previous order.

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

const test = base.extend<{ checkout: Page }>({
  checkout: async ({ page }, use) => {
    await page.goto('/labs/checkout.html');
    await page.getByLabel('Demo customer').fill('Demo Learner');
    await use(page);
    // The built-in page/context fixtures provide browser-state cleanup.
  },
});
test('prepared customer can place an order', async ({ checkout }) => {
  await checkout.getByRole('button', { name: 'Place demo order' }).click();
  await expect(checkout.getByRole('status')).toHaveText('Demo order confirmed: INR 100');
});
test('another test starts with quantity one', async ({ checkout }) => {
  await expect(checkout.getByLabel('Quantity', { exact: true })).toHaveValue('1');
  await expect(checkout.getByRole('status')).toBeEmpty();
});

Try it yourself

Change the quantity in the first test. Confirm that the second test still starts at one. Browser isolation does not reset a shared backend database; this demo has no backend.

When something fails

Connection refused means the practice server is unavailable. A missing browser means the configured Edge installation was not found. An assertion failure needs investigation: compare the starting data, action and expected outcome before changing the test.

Source and limits

Illustrative SPOTHUB exercise. It covers browser behaviour only; no backend, inventory reservation or real payment processing is tested. No independent expert review is claimed.

Continue practising