Debug a Playwright failure with a trace

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

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

Two notebooks cost INR 200 in this demo. The fault switch deliberately expects INR 100. This is a test expectation error, not an application bug. Use the trace to connect the quantity action with the visible total before changing the assertion.

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

test('investigate the expected total', async ({ page }) => {
  await page.goto('/labs/checkout.html');
  await page.getByLabel('Quantity', { exact: true }).fill('2');
  // Set LAB_EXPECT_WRONG=1 to capture a deliberate assertion failure.
  const expected = process.env.LAB_EXPECT_WRONG === '1' ? 'INR 100' : 'INR 200';
  await expect(page.getByTestId('total')).toHaveText(expected);
});

Capture the deliberate failure

PowerShell commands. The nonzero exit is expected only in fault mode. After inspecting the trace, remove the switch and rerun.

$env:LAB_EXPECT_WRONG='1'
npx playwright test debugging.spec.ts
# Open the trace.zip path printed by the runner:
npx playwright show-trace <path-to-trace.zip>
Remove-Item Env:LAB_EXPECT_WRONG
npx playwright test debugging.spec.ts

Try it yourself

In Trace Viewer select the failed assertion and inspect the page snapshot. Record the requirement, actual result and reason for the correction.

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