Responsive

Tracetest Playwright Engine: The Future of End-to-End Tests is Trace-based Testing 🤖

Tracetest Playwright Engine: The Future of End-to-End Tests is Trace-based Testing 🤖
Jul 17, 2024
6min
read
Oscar Reyes
Lead Software Engineer
Tracetest

Check out the new and improved Playwright Testing Engine! Tracetest natively supports your Playwright tests without including third-party libraries or code snippets.

Share on X
Share on LinkedIn
Share on Reddit
Share on HackerNews
Copy URL

Table of Contents

Get Started with Observability-Driven Development

Get Started with Observability-Driven Development

Hola mis amigos! 🤗

Today we have something extraordinary for all of you: [Tracetest’s very own Playwright Testing engine](https://docs.tracetest.io/examples-tutorials/recipes/running-tests-with-tracetest-playwright-engine)! If you are familiar with end-to-end testing tools and want to take it to the next level using trace-based testing, or if you are an OpenTelemetry veteran who wants to make the most of the already existing instrumentation, this is the perfect match! 🤝🏽


The new Playwright Testing Engine is a Tracetest web-based trigger that executes your testing scripts natively in the platform, by specifying three simple things:

1. The target URL of your website (private or public).

2. A JavaScript file with your tests.

3. And the exported method you want to execute.

As well as with the other triggers, you can simplify the creation and execution steps by using any of the supported integrations by clicking the Automate tab and downloading or copying the definition file and the script used by the trigger.


The new Playwright Engine works with the Tracetest Agent, allowing you to use it from within your private network in pre-production environments.

### [*Join our demo environment to try it out yourself!!*](https://app.tracetest.io/organizations/ttorg_2179a9cd8ba8dfa5/invites/invite_760904a64b4b9dc9/accept)

## Wait a minute… This looks oddly Familiar!

And you are right! for the most part… Last [February we announced the official Tracetest x Playwright integration](https://tracetest.io/blog/the-lord-of-playwright-the-two-traces), which was unlocked primarily by importing a Tracetest NPM library to your project and adding some code snippets to integrate it with the rest of the Tracetest platform.


We liked what we accomplished with it, but we always wanted it to take it to the next level where Tracetest could natively support your Playwright tests without including third-party libraries or code snippets that are not 100% related to your tests.

That’s why we built a completely native [Playwright Engine Trigger](https://docs.tracetest.io/examples-tutorials/recipes/running-tests-with-tracetest-playwright-engine), which can be combined with the rest of the platform features!

### Key Differences

## Playwright Tests + Tracetest: Take it to the Next Level 🚀

Bridging the gap between the End-to-End tests and Trace-based testing has never been simpler. With this new trigger, you can now cover the entire user flow from the browser, triggering an event to the back-end process that executes an async message from a message queue!

To start the journey, create your base JavaScript Playwright Script:

```jsx
const { expect } = require("@playwright/test");

async function importPokemon(page) {
 expect(await page.getByText("Pokeshop")).toBeTruthy();

 await page.click("text=Import");
 await page.getByLabel("ID").fill("143");

 await Promise.all([
   page.waitForResponse(
     (resp) => resp.url().includes("/pokemon/import") && resp.status() === 200
   ),
   page.getByRole("button", { name: "OK", exact: true }).click(),
 ]);
}

module.exports = { importPokemon };
```

Then, create the Test from the Tracetest App:

- Upload the script file… ✅
- Add the website URL… ✅
- Select the method to execute… ✅✅
- Click the Run… **😎**✅**!**
- Watch it roar 🦁!

Next, verify the detailed Script Output with the events from the Test execution:


Now it's time to add some trace-based tests. Move to the Test section to review and start the test spec creation

Just like the doctor ordered, you can now have true end-to-end testing and trace-based testing in the same place, powered by Tracetest. 🪄

## Mix and Match the Playwright Engine with Test Observability

We provide the playground and you make the rules. With [Tracetest](https://app.tracetest.io/) you can use the new Playwright Engine trigger with any other feature. If you need [Tests](https://docs.tracetest.io/concepts/tests) to be part of a [Test Suite](https://docs.tracetest.io/concepts/test-suites), or use them with the [Synthetic Monitor Framework](https://tracetest.io/blog/tracetest-monitors-trace-based-testing-meets-synthetic-monitoring) or if you want to include them as part of [GitHub Actions](https://docs.tracetest.io/ci-cd-automation/github-actions-pipeline-with-secrets), it is entirely possible.

## **What’s Next?**

Check out the [Playwright Engine documentation](https://docs.tracetest.io/examples-tutorials/recipes/running-tests-with-tracetest-playwright-engine) to get started on your own.

First and foremost, we welcome your feedback on the first version of the Playwright Engine Trigger!

Last, but not least, do you want to learn more about Tracetest and what it brings to the table? Check the [docs](https://docs.tracetest.io/examples-tutorials/recipes/running-tracetest-with-lightstep/) and try it out by [signing up](https://app.tracetest.io) today!

Also, please 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).

Stay in the Loop

Join the Tracetest Community in one of these channels: