End-to-end tracing for Playwright tests

Ines Fazlic

Today we are announcing support for tracing in Playwright tests through the OpenTelemetry reporter. End-to-end tracing provides a more granular insight into how each scenario is executed, making it easier to pinpoint potential performance bottlenecks or inefficiencies.

Integration with the OpenTelemetry reporter means you can visualize the traces on almost any platform compatible with OpenTelemetry or even process it further using an OTel collector.

Outlier detection

Identifying outliers or their root cause can be challenging when relying only on aggregated data from Artillery reports. With tracing, every virtual user will result in an individual trace which holds every test.step call and page navigated within the scenario being executed. This allows you to zoom into specific virtual user (VU) actions to determine which step or page might be causing delays or inconsistencies.

Better visualization in Fargate/Lambda

Visualize distributed tests more effectively, particularly when using services like Fargate, allowing for better analysis of individual scenario performance including error tracking.

Web Vitals monitoring

Web Vitals are logged both as attributes and events, providing an exact timeline of when these occurred during the page interactions, along with their values and rating.

Pinpointing errors

Errors can now be easier to detect and analyze as they’ll appear in the spans in two distinct ways:

• The span status will switch to ERROR, displaying the error message within the attributes.
• An exception will be recorded on the span, revealing not only the type of error but also when in the test it occurred. Additional details like stack traces are readily available, making troubleshooting more efficient.

Example

Consider this user processor flow function:

async function cloudWaitlistSignupFlow(page, userContext, events, test) {
  await test.step('Go to Artillery', async () => {
    const requestPromise = page.waitForRequest('https://www.artillery.io/');
    await page.goto('https://www.artillery.io/');
    const req = await requestPromise;
  });

  await test.step('Go to cloud', async () => {
    const cloud = await page
      .getByLabel('Main navigation')
      .getByRole('link', { name: 'Cloud' });
    await cloud.click();
    await page.waitForURL('https://www.artillery.io/cloud');
  });

  await test.step('Click on Join button', async () => {
    await page
      .getByRole('button', {
        name: 'Join Artillery Cloud early access waitlist',
      })
      .click();

    await page.waitForURL('https://www.artillery.io/cloud?tf=1');
  });
}

module.exports = {
  cloudWaitlistSignupFlow,
};

This would result in a scenario trace on the Honeycomb UI as shown below:

Learn more

Find out more in the docs.

OpenTelemetry support is experimental, and we are interested in hearing your feedback, or any issues you may encounter. Don’t hesitate to reach out or ask a question whenever you have one.