SPOTHUB / PLAYWRIGHT LEARNING LIBRARY

Playwright assertions: verify the outcome of a user action

An assertion checks an expected result. In the SPOTHUB demo, changing quantity to two should show INR 200, while an empty customer name should prevent confirmation.

Free learning resource · Official references below
01

Turn a requirement into a check

Our demo item costs INR 100 and has no tax, discount or delivery charge. Two items should therefore display INR 200. Calculate the expected result from the requirement instead of copying the displayed value into your expectation.

02

Wait for the expected state

Locator assertions such as await expect(locator).toHaveText(...) retry until the condition passes or the assertion timeout is reached. Reading text once and comparing that value checks a snapshot. A fixed sleep only delays the check; it does not express the condition you need.

03

Check rejection as well as success

The supplied test clicks Place demo order without a customer name. It verifies the exact validation message and an empty confirmation region. Together those checks describe what the visitor should see after the rejected attempt. This client-only demo does not establish that a backend rejected an order.

04

Interview question: what does a passing test prove?

Describe the specific condition the assertion checked, the data used and what remains outside its scope. Seeing INR 200 in this demo supports a claim about that displayed total. It provides no evidence about payment settlement, stock reservation or email delivery.

Read the checkout example

This is the same test file provided by the linked lab. Follow the lab for installation, configuration and expected results.

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();
});
Run this example in the practical lab →

Official references

Use these sources for current API behaviour and setup requirements. SPOTHUB is an independent training provider.

Continue learning

Find My IT Career Path