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'

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("https://www.programsbuzz.com/");
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()
console.log(titles)

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

console.log(lastTitle)

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 trace.zip

• 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.