# Running e2e tests with Playwright in Azure YAML Pipelines

1. [Creating a multi-stage YAML pipeline in Azure DevOps for .NET projects](https://bogdanbujdea.dev/creating-a-multi-stage-yaml-pipeline-in-azure-devops-for-net-projects?source=more_series_bottom_blogs)
    
2. [Running tests with code coverage in Azure DevOps YAML pipelines](https://bogdanbujdea.dev/running-tests-with-code-coverage-in-azure-devops-yaml-pipelines?source=more_series_bottom_blogs)
    
3. [Static code analysis with NDepend in Azure Pipelines](https://bogdanbujdea.dev/static-code-analysis-with-ndepend-in-azure-pipelines?source=more_series_bottom_blogs)
    
4. [Running e2e tests with Playwright in Azure YAML Pipelines](https://bogdanbujdea.dev/running-e2e-tests-with-playwright-in-azure-yaml-pipelines?source=more_series_bottom_blogs)
    
5. [Publishing Playwright report as an artifact in Azure DevOps](https://bogdanbujdea.dev/publishing-playwright-report-as-an-artifact-in-azure-devops?source=more_series_bottom_blogs)
    
6. [Bicep Infrastructure Deployment from Azure DevOps YAML Pipelines](https://bogdanbujdea.dev/bicep-infrastructure-deployment-from-azure-devops-yaml-pipelines?source=more_series_bottom_blogs)
    
7. [Blue-green Deployments in Azure DevOps YAML Pipelines](https://bogdanbujdea.dev/blue-green-deployments-in-azure-devops-yaml-pipelines?source=more_series_bottom_blogs)
    
8. [Pre-Deployment Health Checks in Azure DevOps YAML Pipelines](https://bogdanbujdea.dev/pre-deployment-health-checks-in-azure-devops-yaml-pipelines?source=more_series_bottom_blogs)
    
9. [Azure DevOps Best Practices: Breaking Down the Monolithic YAML](https://bogdanbujdea.dev/azure-devops-best-practices-breaking-down-the-monolithic-yaml?source=more_series_bottom_blogs)
    

---

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:

```yaml
- 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:

```yaml
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:

```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:

```yaml
- 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.