Playwright locators and assertions

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

npm init -y
npm install -D @playwright/test@1.63.0
npx playwright test locators.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

Labels locate the fields and the button role locates the action. The total has an explicit test ID. One scenario checks the total; the other proves that invalid input cannot produce confirmation.

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

test('quantity changes the total', async ({ page }) => {
  await page.goto('/labs/checkout.html');
  await page.getByLabel('Quantity', { exact: true }).fill('2');
  await expect(page.getByTestId('total')).toHaveText('INR 200');
});
test('missing customer prevents confirmation', async ({ page }) => {
  await page.goto('/labs/checkout.html');
  await page.getByRole('button', { name: 'Place demo order' }).click();
  await expect(page.getByRole('alert')).toHaveText('Enter a demo customer name.');
  await expect(page.getByRole('status')).toBeEmpty();
});

Try it yourself

Add a scenario with quantity 6. Assert the quantity error and the absence of confirmation.

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