Integrating 3rd Party Reporters in Playwright

Deeper and deeper into Playwright, this time looking at integrating other reporting tools. There is nothing wrong with the built-in HTML reporter, but everything would have to be done manually when it comes to trend analysis.

This is where 3rd party reporting tools can really help.

In this instance, we are going to use Tesults ( http://tesults.com ), mostly because we researched it for a client but never got to implement it.

We are going to do the following to get this working together:

• Implement the connection locally

• Add the implementation to our GitHub Actions workflow

Local Connection Setup

So, how do we setup a Tesults connection from Playwright?

The first thing we need to do is install the ready-made package, playwright-tesults-reporter. This is simply added to the package.json file.

Next, we need to update the playwright.config.ts file with the following:

reporter: [['playwright-tesults-reporter', {'tesults-target': <<Tesults Target Key>>, 'tesults-build-name': 'playwright-starter', 'tesults-build-result': 'pass'}]],

Tesults Target Key can be obtained from the configuration in Tesults.

So now, when we run a test, we should get the results fed directly into Tesults:

If we drill into the details:

Everything is there as expected. Result, if you will pardon the pun!

Next, we need to set this up to work with our GitHub Actions, which appears to be fairly simple.

Our playwright.yml file needs an update:

- name: Run Playwright tests env: TARGET: ${{vars.TARGET}} BUILD: ${{ format('{0} {1}', 'Build ', github.run_number) }} run: yarn test

This provides process.env variables for the target and build. The Target value now needs to be set as a secret in GitHub. This took a minute or two to find, so to help anyone following along go to:

• Settings for the repo

• Secrets and Variables

• Actions

Now push your modified code...

One set of results direct from GitHub. The only foible is that tests aren't showing as failed, but that is something to investigate another day!