Running e2e tests with Playwright in Azure YAML Pipelines

1. Creating a multi-stage YAML pipeline in Azure DevOps for .NET projects

2. Running tests with code coverage in Azure DevOps YAML pipelines

3. Static code analysis with NDepend in Azure Pipelines

4. Running e2e tests with Playwright in Azure YAML Pipelines

5. Publishing Playwright report as an artifact in Azure DevOps

6. Bicep Infrastructure Deployment from Azure DevOps YAML Pipelines

7. Blue-green Deployments in Azure DevOps YAML Pipelines

8. Pre-Deployment Health Checks in Azure DevOps YAML Pipelines

9. Azure DevOps Best Practices: Breaking Down the Monolithic YAML

My team is working on a product with a React website as the client and a C# ASP.NET Web API as the server. It's important to run end-to-end (e2e) tests with Playwright before each release to ensure that we didn't break anything. Running them from the React repository (let's call it "Frontend") is easy, but I want to show how we run them from the ASP.NET repository (let's call it "Backend") as well.

Running Playwright e2e tests

Running e2e tests with Playwright is relatively simple, and the YAML configuration looks like this:

- job: e2etests
  displayName: 'E2E tests'
  steps:
  - task: Bash@3
    inputs:
      filePath: './setup.sh'
      arguments: 'e2e'
    displayName: 'run e2e tests'

Our setup.sh file has several options (such as init which is essentially npm install, unit tests, etc.), but for the sake of simplicity, I'm only showing the command to run the e2e tests with Playwright:

pnpm dlx playwright@1.30.0 test --project=chromium

Running Playwright e2e tests from another repository

When we want to run the e2e tests from our Backend repository, we need to clone the Frontend repository first in the pipeline. Otherwise, we cannot access the e2e tests. To do this, we add the Frontend repository as a resource in our pipeline YAML:

resources:
  repositories:
  - repository: Frontend
    type: git
    name: YourAzureDevopsProjectName/Frontend

To run the e2e tests, we can reuse the job from the Frontend pipeline and add another step that checks out the Frontend repository:

- job: e2etests
  displayName: 'E2E tests running in backend repo'
  steps:
  - checkout: Frontend
  - task: Bash@3
    inputs:
      filePath: './setup.sh'
      arguments: 'e2e'

That's it. Just two things are required to run tests from another repository: add the resource as a repository, and perform a checkout. Then, you're good to go.