Playwright Tracing

If we want to know what happened in every step of our test, there is a special property called trace in playwright, which we can use to trace and track the test. This way, we will get a detailed report on what we are performing.

So to trace all the text files use the trace property specify it in the playwright.config.js file.

Enable the trace property to 'on.'

Let us run a trace and check the HTML report on what it has done.

We can see the trace heading in the report after executing the test step.

• So this is the trace report, and we can see here it gave us a detailed report on what has happened.
• We can see the before and after actions of the locator and its impact on the site.
• It comes with a screenshot of the test it is performing too.
• We can call, console, network, and source on the right side.
• This gives detailed information on the source of the locator and the locator information itself.

So what if we want to trace on only when the test has failed?

There is a way.

Go to the same config file and add this.

trace: 'retain-on-failure'

Let us deliberately fail a test and check the trace.

We can see that the assertion failed because it could not find the element.
Trace has been done on this failed test.

Let us see how we can trace in test level alone without config setup.

await context.tracing.start({ screenshots: true, snapshots: true });
await page.goto('https://playwright.dev');
await context.tracing.stop({ path: 'trace.zip' });

So the trace start starts the trace from the context it was provided.
After ending the trace up to the step, we want to use the trace stop and mention the trace name.

If we want to use multiple context tracing on the same browser context, we can do that with startChunk and stopChunk.

await context.tracing.start({ screenshots: true, snapshots: true });
const page = await context.newPage();
await page.goto('https://programsbuzz.com');

await context.tracing.startChunk();
await page.click('text=Get Started');
// Everything between startChunk and stopChunk will be recorded in the trace.
await context.tracing.stopChunk({ path: 'trace1.zip' });

await context.tracing.startChunk();
await page.goto('http://autopract.com');
// Save a second trace file with different actions.
await context.tracing.stopChunk({ path: 'trace2.zip' });