Tracetest Tip: Instrumentation for End-to-End Tests

Buen dia a todos! 🌞

Welcome to the second entry of the Tracetest Tip series, where we share tips and tricks around the world of OpenTelemetry that would hopefully make you and your team save time while adventuring through the world of observability.

Today, we are focusing on learning some of the common problems when using Playwright as either an integration or as a Tracetest Trigger.

## Scenario 1: User Interaction Spans are not part of the Trace

The official [`@opentelemetry/instrumentation-user-interaction`](https://www.npmjs.com/package/@opentelemetry/instrumentation-user-interaction) package generates a new `traceId` for each interaction. This means that every `click`, `keydown`, or event will be entirely independent of each other.

While this is beneficial for long-running sessions, it is problematic for synthetic tests because we want to capture the entire script tests under the same trace.

To fix this you’ll need to switch out the official package for the patched Tracetest package which captures the `traceId` from the meta tag and propagates downwards so every side effect of the initial user interaction will be captured under the same `traceId`.

```tsx

import { registerInstrumentations } from '@opentelemetry/instrumentation';

import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';

// import the tracetest library into your tracer code

import { UserInteractionInstrumentation } from '@tracetest/instrumentation-user-interaction';

// ...rest of the tracer code

registerInstrumentations({

 tracerProvider: provider,

 instrumentation: [

     getWebAutoInstrumentations({

     '@opentelemetry/instrumentation-user-interaction': {

       enabled: false, // disable the default user interaction library

     },

   }),

   new UserInteractionInstrumentation(), // create an instance of the tracetest library

 ],

});

```

This is specifically needed when using Playwright with Tracetest as the `traceId` would be properly propagated while the testing script is executed.

## Scenario 2: Front-end App has no instrumentation, but back-end services do

With the latest Playwright Engine Trigger, your front-end app is not required to be instrumented nor have a way to reach out to the OpenTelemetry collector, by having the back-end services instrumented and listening for context propagation is enough.

By creating Playwright script tests that go across your application, the Tracetest Engine would capture every outbound request and attach the parent `traceId` to the headers!

## Final Thoughts

I hope this was helpful and if you want to know more about how you can make the most of your instrument services check this docs page about [true end-to-end trace-based tests with Tracetest and Playwright](https://docs.tracetest.io/tools-and-integrations/playwright)! Also, feel free to join our [Slack community](https://dub.sh/tracetest-community), give [Tracetest a star on GitHub](https://github.com/kubeshop/tracetest), or [schedule a time to chat 1:1](https://calendly.com/ken-kubeshop/tracetest-walkthrough).