Run Playwright tests on Azure Pipeline

When we install Playwright using npm init playwright@latest , it installs the latest Playwright version along with the option to create GitHub Actions workflow.

We can run the tests in Azure Devops Pipeline as well.

Pre-requisites

A repository should be available in any source version control which has the workable Playwright test suites.

Steps

1. Login to Azure DevOps and create a new project if required.

Create Project in Azure DevOps

2. Create a new pipeline for the newly created project.

Create pipeline for created project

3. Choose the repository out of the multiple listed options

List of repos to choose from

4. Setup your repository with Azure DevOps and select the project to run the pipeline for.

5. On ‘Configure your pipeline’ page, select ‘Starter pipeline’.

6. Copy and paste the following YML content. You can modify it as per your use case.

name: Playwright Tests
 
variables:
  CI: true
 
trigger:
  - main
 
jobs:
  - job: test
    timeoutInMinutes: 60
    pool:
      vmImage: "ubuntu-latest"
 
    steps:
      - task: Node@0
        inputs:
          versionSpec: "16.x"
        displayName: "Install Node.js"
 
      - script: |
          npm ci
        displayName: "Install dependencies"
 
      - script: |
          npx playwright install --with-deps
        displayName: "Install Playwright Browsers"
 
      - script: |
          npx playwright test
        displayName: "Run Playwright tests"
 
      - publish: $(System.DefaultWorkingDirectory)/playwright-report
        artifact: playwright-report
        condition: always()

The above pipeline uses Ubuntu Virtual Machine image to run the ‘test’ job.

NodeTool task is responsible to install Node.js on the VM. Then the dependencies are installed using npm ci script.

Playwright dependencies are installed using npx playwright install --with-deps script, and finally we are using npx playwright test to run tests.

Lastly, test report artifact will be published for us to view the report of the respective pipeline run.

Run the pipeline

Run the pipeline and head over to the ongoing pipeline details.

You can see job along with different steps in the pipeline details.

Once the run is complete, you can view the test report html file in the artifact to view your test result in more detail.

This is a simple way of creating a YML for running Azure DevOps pipeline for your Playwright tests. I shall add more advance and different use cases pipeline solution in upcoming articles.

You can follow me on LinkedIn.