HTML Report & Failure Triage

1 Goal

In a little under an hour you will build a tiny Playwright suite of three tests against https://www.saucedemo.com and https://example.com, run it with the HTML reporter and trace recording enabled, and then triage the one test that fails intermittently. The outcome you're after is diagnostic: after opening the report, you should be able to say exactly which action failed, what the page looked like at that moment, and why — from the trace alone, without adding console.log or re-running. This is the core loop a test lead runs dozens of times per week when a CI job goes red overnight and the team turns up expecting answers.

2 Install Playwright (free)

Playwright is open source and free. It only needs Node.js 18 or newer, which is also free.

1. Install Node.js 18+ from the official site Download the LTS build from nodejs.org. The LTS line (currently 20.x) is free, covers every feature Playwright needs, and is supported on Windows, macOS, and Linux.
2. Verify Node and npm are on your PATH The commands differ slightly per OS only in how you open the terminal.
   Windows (PowerShell) macOS (Terminal) Linux (bash)
   PowerShell

   node --version
   npm --version

   Terminal (zsh/bash)

   node --version
   npm --version

   bash

   node --version
   npm --version

   You should see v20.x.x (or higher) and 10.x.x (or higher). If not, re-open your terminal after installing so the PATH refreshes.
3. Install the Playwright browsers Playwright ships its own Chromium, Firefox, and WebKit builds so results are consistent across machines. You'll install them in step 3 as part of the project, not globally.

3 Project setup

Create a small project with a single tests/ folder and Playwright's default config. Playwright's init command scaffolds everything, but we'll override the config and tests in step 4 so you see every moving part.

1. Create and enter a project folder
   Windows (PowerShell) macOS / Linux
   PowerShell

   mkdir triage-lab
   cd triage-lab

   bash/zsh

   mkdir triage-lab
   cd triage-lab

2. Initialise npm and install Playwright
   All platforms

   npm init -y
   npm install --save-dev @playwright/test@latest
   npx playwright install

   The last command downloads the Chromium, Firefox, and WebKit binaries Playwright controls. It only needs to run once per machine.
3. Expected folder layout after step 4
   Tree

   triage-lab/
     node_modules/
     tests/
       smoke.spec.ts
     playwright.config.ts
     package.json
     package-lock.json

4 Write the tests

Two files. Copy each one in full — no placeholders, no trimming.

a) playwright.config.ts — tells Playwright to produce an HTML report and to keep a full trace whenever a test fails on retry:

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  timeout: 30_000,
  retries: 1,
  reporter: [['html', { open: 'never' }], ['list']],
  use: {
    actionTimeout: 10_000,
    trace: 'retain-on-failure',
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
  ],
});

b) tests/smoke.spec.ts — three tests: one that passes on a static page, one that passes on the SauceDemo login, and one that is deliberately flaky because it waits for the wrong locator:

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

test('example.com loads and has the expected heading', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page.getByRole('heading', { name: 'Example Domain' })).toBeVisible();
});

test('saucedemo standard user can log in', async ({ page }) => {
  await page.goto('https://www.saucedemo.com/');
  await page.getByPlaceholder('Username').fill('standard_user');
  await page.getByPlaceholder('Password').fill('secret_sauce');
  await page.getByRole('button', { name: 'Login' }).click();
  await expect(page).toHaveURL(/inventory\.html/);
  await expect(page.getByText('Products')).toBeVisible();
});

test('saucedemo add-to-cart badge appears (flaky on purpose)', async ({ page }) => {
  await page.goto('https://www.saucedemo.com/');
  await page.getByPlaceholder('Username').fill('standard_user');
  await page.getByPlaceholder('Password').fill('secret_sauce');
  await page.getByRole('button', { name: 'Login' }).click();
  await page.getByRole('button', { name: 'Add to cart' }).first().click();

  // Bug on purpose: the real selector is '.shopping_cart_badge'.
  // This one is wrong, so the test fails and gives us a trace to triage.
  await expect(page.locator('.shopping-cart-badge')).toHaveText('1', { timeout: 3_000 });
});

5 Run & verify

1. Run the suite
   All platforms

   npx playwright test

   You'll see the list reporter print three tests. The third one will fail once, retry, and fail again — that's expected.
2. Expected result Two tests pass, one fails. The terminal ends with something like:
   Terminal output (abridged)

     2 passed (8.1s)
     1 failed
   
     To open last HTML report run:
       npx playwright show-report

3. Open the HTML report
   All platforms

   npx playwright show-report

   A browser opens at http://localhost:9323 showing a tree of tests. The failing test is red; click into it.

6 Triage the failure from the trace

This is the whole point of the exercise. Don't re-run. Don't add console.log. Get the answer from the report.

1. Read the error banner at the top Playwright shows the exact assertion that failed and the timeout. You should see a message like Error: Timed out 3000ms waiting for expect(locator).toHaveText(expected) with the locator printed as locator('.shopping-cart-badge').
2. Open the trace Scroll down and click the Trace attachment. This opens the Trace Viewer: a timeline of every action, a DOM snapshot for each one, and the network log. The failing step is highlighted in red.
3. Find the action snapshot Click the red expect.toHaveText step. The left-hand pane shows the DOM as it was when the assertion ran. Inspect it: the cart badge element is actually <span class="shopping_cart_badge">1</span> — underscores, not hyphens.
4. Confirm with the Actions list The Actions panel on the left lists every step in order, with time taken. The last passing step is the click on the Add to cart button; everything after is the hung locator. That's your smoking gun: the click succeeded, the page reached the correct state, and only the assertion was wrong.
5. Write down the root cause in one sentence Example: "The cart-badge assertion used the selector .shopping-cart-badge, but the real class is shopping_cart_badge. The click worked; the locator did not. Fix the selector, not the test flow." That's the message you'd paste into Slack.

7 Troubleshooting

8 Challenge