How To Apply Trace Viewer Playwright

It allows developers to automate interactions with web pages, perform end-to-end testing, take screenshots, capture network traffic, and more. The Trace Viewer in Playwright is a tool that helps developers analyze and understand the performance and behavior of their browser automation scripts.

So here's the steps:

• Run the automation test case

• Set playwright.config.js // for tracing

use: { headless: false,

browserName: "chromium",

trace: on }, // for tracing

• Run this:

npx playwright test tests/Tracing.spec.js --project chromium --headed

• Generate test-results >> trace.zip

• Run this:

npx playwright show-report

or

npx playwright show-trace test-results/Tracing-test- chromium/trace.zip

• See the test report and scroll down until you see the Playwright Trace Viewer GUI Tool

• Open the Playwright Trace Viewer GUI Tool