feat(playwright): add trace support with opentelemetry

[InesNi]

What

Basic tracing support for Playwright Engine with OpenTelemetry, in a form of a function that is made available to the user through the test - the last argument of the user flow function.
This function is the tracing equivalent to the step function, and is used instead of it in the case where OpenTelemetry reporter is configured for tracing (within the publish-metrics plugin).

If some of the test scenarios are configured for the HTTP engine, they will be traced as normal along with the Playwright scenarios.

Should be marked as EXPERIMENTAL!

How

From engine side

• Playwright engine checks if Otel tracing is configured, and if it is it calls the beforeScenario hook function with the following arguments page, initialContext, events and the User's processor function.

From reporters side:

• When tracing is configured, reporter looks for engines used in the script, and if Playwright engine is found it creates a beforeScenario, afterScenario and the traceStepFunction hook.

• Scenario span is started right before we call the user flow function with the beforeScenario hook

• Check is made to see if tracing is configured, and if it is, we pass this tracing step function instead of the regular one to the user.

• The scenario span is provided as a parent to the step function, so that all the spans user creates are going to be nested inside it.

• Once the user function is done we end the scenario span.

• The step function is responsible for starting and ending a child span with user configured name, optional attributes and whatever else the user sets on the span within their processor.

• It also emits a custom browser.step.{stepName} histogram so it can use interchangeably with the non tracing step function as proposed in the comments

Configuration

testScript.yaml

config:
  target: "https://www.artillery.io"
  phases:
    - arrivalRate: 5
      duration: 12
  engines:
    playwright: {}
  plugins:
    publish-metrics:
      - type: 'open-telemetry'
        serviceName: "Artillery-Playwright-test"
        traces:
          exporter: otlp-proto
          endpoint: "{{ $processEnvironment.OTEL_EXPORTER_OTLP_TRACESS_ENDPOINT }}"
  processor: ./myProcessor.js
scenarios:
  - name: "Some scenario"
    engine: playwright
    flowFunction: "someUserFunction"

myProcessor.js

async function someUserFunction(page, vuContext, events, test) {

  await test.step('Going to website', async (span) =>{
    const response = await page.goto('https://www.artillery.io/');
    span.setAttributes({
      'status_code', response.status(),
      'url.full': response.url())
    const request = await response.request()
    const timings = await request.timing()
    span.setAttributes(timings)
  }, {'MyCustomAttribute': 'Custom value', step: 1})  // Custom attributes as the last optional argument

  await test.step('Navigate To Cloud', async (span) =>{
    await page
    .getByLabel('Main navigation')
    .getByRole('link', { name: 'Cloud' })
    .click();
    span.addEvent('click')
  }, {step: 2})

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

Results

The following shows a trace in Honeycomb: