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("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.