Your first Playwright test

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 first-test.spec.ts · Download configuration · Download demo HTML

npm init -y
npm install -D @playwright/test@1.63.0
npx playwright test first-test.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 test opens the practice page, supplies a fictional customer and places a demo order. The final assertion checks the result, not just whether the button was clickable.

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

test('customer can complete a demo order', async ({ page }) => {
  await page.goto('/labs/checkout.html');
  await page.getByLabel('Demo customer').fill('Demo Learner');
  await page.getByRole('button', { name: 'Place demo order' }).click();
  await expect(page.getByRole('status')).toHaveText('Demo order confirmed: INR 100');
});

Try it yourself

Leave the customer blank. Explain why the confirmation assertion fails and which validation message appears instead.

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