Trace Viewer in playwright

 In this example, we will explore what tracing is in Playwright, how to set it up, and the benefits it offers. Playwright Trace Viewer is a powerful tool provided by Microsoft's Playwright that allows you to visually inspect and debug your end-to-end test runs. 

It provides a graphical interface to go through each step of a test execution, including:

1. Snapshots of the page at each action
2. Network requests and responses
3. Console logs
4. DOM state and action timeline
5. Source code with the exact step highlighted

What is Tracing?

In the context of Playwright, tracing refers to the process of recording a detailed log of a test’s execution. This log captures various elements such as:

1. User actions (e.g., clicks, navigation)
2. Screenshots at specific points during the test
3. Console messages generated throughout the execution

This comprehensive logging is particularly useful for debugging, especially when tests are run in headless mode on Continuous Integration (CI) platforms.

Setting Up Tracing in Playwright

To enable tracing in your Playwright tests, you need to configure your project appropriately. Here’s how to do it:

Modify the Configuration Add the following code snippet into playwright.config.js to set up tracing options:

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

export default defineConfig({
    use: {
        trace: 'on-first-retry', // Options include 'off', 'on', 'retain-on-failure', etc.
    },
});

This setup records a trace only on the first retry of a failed test, which helps manage storage while providing valuable debugging information when necessary.

Available options to record a trace:

1. 'on-first-retry' - Record a trace only when retrying a test for the first time.
2. 'on-all-retries' - Record traces for all test retries.
3. 'off' - Do not record a trace.
4. 'on' - Record a trace for each test. (not recommended as it's performance heavy)
5. 'retain-on-failure' - Record a trace for each test, but remove it from successful test runs.

Running Tests with Tracing: To run your tests with tracing enabled, you can use the command:

npx playwright test --trace on

OR 

npx playwright test hooks.spec.js --project=chromium --headed --workers 1 --trace on

Using Trace Viewer

Once you have recorded traces during your tests, you can utilize the Trace Viewer, a GUI tool that helps visualize these traces. Here’s how to access and use it:

1. Generate an HTML Report: After running your tests, generate an HTML report using:

npx playwright show-report

2. Open Traces: In the HTML report, click on the trace icon next to a test name to open its trace. Alternatively, navigate to the detailed view of a test and find the ‘Traces’ tab. Please take a look in below example.

Trace Viewer features

Actions

In the Actions tab you can see what locator was used for every action and how long each one took to run.

Source​

When you click on an action in the sidebar, the line of code for that action is highlighted in the source panel.

Call​

The call tab shows you information about the action such as the time it took, what locator was used.

Log​

See a full log of your test to better understand what Playwright is doing behind the scenes.

Errors​

If your test fails you will see the error messages for each test in the Errors tab.

Console​

See console logs from the browser as well as from your test.

Network​

The Network tab shows you all the network requests that were made during your test.

Metadata​

Next to the Actions tab you will find the Metadata tab which will show you more information on your test such as the Browser, viewport size, test duration and more.

Attachments​

The “Attachments” tab allows you to explore attachments.

There is a alternative way we can enable tracing in your Playwright test.

You need to explicitly enable tracing in your Playwright test.

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

test('my test with tracing', async ({ page, context }) => {
  await context.tracing.start({ screenshots: true, snapshots: true });
  
  await page.goto('https://example.com');
  await page.click('text=More information');

  await context.tracing.stop({ path: 'trace.zip' });
});

Open the Trace

Once the test finishes and generates trace.zip, open it using the Trace Viewer:

npx playwright show-trace trace.zip

This will launch a local viewer in your browser.

Best Practices

1. Enable Tracing in CI: Use trace: 'on-first-retry' to capture traces only for flaky or failed tests, saving storage.
2. Robust Locators: Use data-testid, role-based, or text-based locators for reliability, as Trace Viewer highlights selector issues.
3. Screenshots and Snapshots: Always enable both for visual debugging (default in most setups).
4. UI Mode: For local development, use npx playwright test --ui to automatically trace tests and view them interactively.
5. Remote Traces: Store traces in CI (e.g., S3) and access via URL for team collaboration.

Limitations

1. Storage: Traces with screenshots and snapshots can be large; use on-first-retry or retain-on-failure to manage space.
2. CORS: Remote trace URLs on trace.playwright.dev may face CORS restrictions.
3. Local Requirement: Must serve traces over http:// or https:// for trace.playwright.dev.

Integrating tracing into your Playwright testing workflow not only enhances debugging capabilities but also contributes significantly to maintaining high-quality web applications. By leveraging tools like Trace Viewer, developers can gain deeper insights into their tests and improve overall testing efficiency.