Playwright in an Azure DevOps Pipeline

Tim Deschryver

When you introduce Playwright in a codebase, you can use the init command to scaffold a fresh setup.

The scaffolding includes the installation of Playwright, a pre-configured setup, a sample test, and an optional GitHub Actions workflow.

In this post, the generated GitHub workflow is migrated into an Azure DevOps pipeline. The pipeline installs Node.js, installs the dependencies (browsers included), runs the tests, and publishes the test artifact. Because Playwright uses the CI environment variable to determine some behavior, we manually set this variable to true (this is done automatic via GitHub actions). If you don't set this variable, then the test reporter will continue to stay open after the tests are finished.

Within GitHub, this pipeline is automatically run when new commits are pushed to the main branch of the repository. With Azure DevOps, the pipeline needs to first be manually created before it can be triggered.

To do so, go to the pipeline pages and create a new pipeline. On this page select "Azure Repos Git", then select your repository.

Starting page of the the wizard to create or import a pipeline.

Next, select the "Existing Azure Pipelines YAML file" option and selected the above file if it's already pushed. Otherwise, select "Start pipeline" and copy-paste the above YAML into the editor.

Pick the option to create a new pipeline, or to import an existing pipeline.

The resulting pipeline should look like this:

The pipeline containing the Playwright test setup.

Now, you can click on "Run pipeline" to run the pipeline for the first time. When the pipeline is completed, it should give you the "success" page.

A green pipeline build.

To view the test results, click on the "test" job.

The detailed view of the pipeline build.

Lastly, you can download the test artifacts to see the test results.

Playwright test reporter.

With the next push to the main branch, the pipeline will be automatically triggered. Happy testing!

Incoming links

Feel free to update this blog post on GitHub, thanks in advance!

Join My Newsletter (WIP)

Join my weekly newsletter to receive my latest blog posts and bits, directly in your inbox.

Support me

I appreciate it if you would support me if have you enjoyed this post and found it useful, thank you in advance.

Buy Me a Coffee at PayPal logo

Share this post on

Twitter LinkedIn