feat(playwright): add trace support for playwright with otel reporter

[InesNi]

Description

What

Tracing support for the Playwright Engine through OpenTelemetry reporter (publish-metrics plugin).

How

Spans

Tracing is implemented in 2 ways:

• Span is created for each step function call. (The step function is provided inside the test object argument of the processor flow function)
• Span is created for each framenavigated event where the main frame's page.url() changes, and is active until the next main frame change, portraying the time spent on each page.

Each of these spans is nested within the root scenario span, creating an individual trace per scenario/VU run.

Metrics

• Web vitals are added as attributes and events on corresponding pageSpan as they happen,
• When extendedMetrics setting is set to true, other metrics emitted by the engine (dominteractive, browser.memory_used_mb) will be set as attributes as well.
• VU uuid is set on each span
• If attributes are set in the OpenTelemetry reporter config, they will be added to all spans.

Errors

In case of an error, spans SpanStatus is set to ERROR and an exception is recorded on the span that contains additional info (e.g. exceptions stack trace)

Configuration

Configuration is the same as for HTTP engine, when tracing is configured inside the OpenTelemetry reporter (within publish-metrics plugin) Playwright scenarios will automatically be traced.

Note

If for some reason the same test is configured with both HTTP and Playwright engine scenarios, they will both be traced, and the same is true for metrics. The configuration provided will be applied to both engines.

Example

Example user processor flow function:

async function testFlow(page, userContext, events, test) {
  await page.goto('https://www.artillery.io/');
  
  await test.step('Go to cloud', async()=>{
      await page
      .getByLabel('Main navigation')
      .getByRole('link', { name: 'Cloud' }).click
  })
  
  await test.step('Click on Join button', async()=>{
    const b = await page
      .getByRole('button', { name: 'Join Artillery Cloud early access waitlist' })
    await b.click()
  })
}

Resulting scenario trace in Honeycomb UI:

Pre-merge checklist

• Does this require an update to the docs?
• Does this require a changelog entry?