Integrating Playwright with Azure DevOps

Integrating Playwright with Azure DevOps enables you to automate browser testing as part of your CI/CD pipeline. Here's a step-by-step guide in English to help you set it up:

✅ Step-by-Step Guide: Integrating Playwright with Azure DevOps

🧰 Prerequisites

A project set up in Azure DevOps (with a repository).

A test suite built using Playwright (Node.js).

A playwright.config.ts or playwright.config.js file.

A package.json with test scripts like:

json

Copy

Edit

"scripts": {

  "test": "npx playwright test"

}

🛠️ Step 1: Install Playwright in Your Project

Run the following in your local project:

bash

Copy

Edit

npm init -y

npm install -D @playwright/test

npx playwright install

📝 Step 2: Create azure-pipelines.yml

Add a pipeline YAML file in the root of your repo:

yaml

Copy

Edit

trigger:

  branches:

    include:

      - main  # or your desired branch

pool:

  vmImage: 'ubuntu-latest'

steps:

  - task: NodeTool@0

    inputs:

      versionSpec: '18.x'  # Use your required Node version

    displayName: 'Install Node.js'

  - script: |

      npm ci

      npx playwright install --with-deps

    displayName: 'Install dependencies and Playwright browsers'

  - script: |

      npm test

    displayName: 'Run Playwright Tests'

  - task: PublishTestResults@2

    inputs:

      testResultsFiles: '**/test-results/**/*.xml'

      testRunTitle: 'Playwright Test Results'

    condition: succeededOrFailed()

✅ You may need to update your Playwright config to generate JUnit-style XML reports:

ts

Copy

Edit

// playwright.config.ts

import { defineConfig } from '@playwright/test';

export default defineConfig({

  reporter: [['list'], ['junit', { outputFile: 'test-results/results.xml' }]],

});

📦 Optional: Artifacts & Screenshots

If you want to collect screenshots or trace files:

Add this to your Playwright test config:

ts

Copy

Edit

use: {

  screenshot: 'only-on-failure',

  trace: 'retain-on-failure',

}

Add to your pipeline:

yaml

Copy

Edit

  - task: PublishBuildArtifacts@1

    inputs:

      pathToPublish: 'test-results'

      artifactName: 'PlaywrightResults'

      publishLocation: 'Container'

✅ Tips

Use parallel jobs in Playwright with Azure DevOps agents to speed up tests.

Add status badges to your README to track pipeline health.

Use Environments and Approvals in Azure DevOps for gated deployments.

🚀 Summary

Task Tool/Step

Install Node & Playwright NodeTool task + npx playwright install

Run Tests npm test or npx playwright test

Collect Results PublishTestResults@2

Optional: Upload Artifacts PublishBuildArtifacts@1

Learn Playwright Training Course in Hyderabad

Read More

Playwright with Docker: Complete Setup

Allure Report Integration with Playwright

Visit Our IHUB Talent Training Institute in Hyderabad

Get Directions