Playwright Trace Viewer

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'

We have many other trace options which we can set to our preferability.

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.
  • We can see the trace attached to the report which normally generates.
  • 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.
  • 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
  • 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.
Thu, 12/29/2022 - 11:57
Ashwin possesses over five years of experience in the Quality Assurance industry and is currently serving as a Technical Lead at iVagus. His expertise encompasses a broad range of technologies, including Cypress, Rest Assured, Selenium, Cucumber, JavaScript and TypeScript.