Playwright Trace Viewer

Profile picture for user arilio666

In this article, we will be seeing what trace viewer is in the playwright. Trace Viewer is a GUI tool that helps view the executed test along with snapshots, timelines, and other details.

1.) Open the config file and set trace: 'on'

Go to your configuration file and set trace value to either of the following

  1. off
  2. on
  3. on-first-retry
  4. retain-on-failure
  5. retry-with-trace
use: {
    trace: 'on-first-retry',

2.) Run A Test And Check Trace.

await page.goto("");
await page.locator('//i[@class="fas fa-search"]').click()
await page.locator('#edit-keys').type('cypress')
await page.locator('#edit-submit').click()
await page.waitForLoadState('networkidle')

const searchTitle = await page.locator('//h1[normalize-space()="Search for cypress"]');

await expect(searchTitle).toHaveText('Search for cypress');

const titles = await page.locator('ol h3').allTextContents()

const lastTitle = await page.locator('ol h3').last().textContent()


await page.locator('ol h3').last().click()
  • We are going to run this test and get a trace out of it.
Playwright Tracing
  • We can see the trace attached to the report which normally generates.
playwright trace viewer
  • This is what the trace looks like on the inside.
  • We have our actions which are the locators and the actions performed on them.
  • We have metadata on which the viewport, browser and other information are present.
tracing in playwright
  • This is a place where we can view the timeline of the exact actions happening when hovered over certain places we can see the actions getting highlighted.
  • It simply means that the actions are being evoked at a certain time and doing their duty.
  • We can also download the trace file in zip format from the report and open it via the command-line for later use.
npx playwright show-trace
view playwright tracing
  • We can also see the before and after screenshots of the timeline and also view the code-level actions taking place.
  • The network tab has the network calls between the operations.
  • To see what actions are called call tab is present.
  • For console output console tab.