Azure Pipelines Playwright Integration

Azure Pipelines provide a powerful platform for continuous integration and deployment, and when combined with Playwright, they create a robust testing ecosystem for modern web applications. This guide will walk you through integrating Playwright tests seamlessly into your Azure DevOps pipeline, enabling comprehensive automated testing for your Microsoft cloud applications.

Prerequisites#

Before getting started, ensure you have:

• Azure DevOps account
• Node.js (v16+ recommended)
• TypeScript (v4.5+)
• Azure Pipelines access
• Visual Studio Code (optional but recommended)
• Git repository with existing project
• Basic understanding of CI/CD concepts

Estimated setup time: 45-60 minutes

Setting Up Playwright in Azure Pipelines#

Installing Required Dependencies#

Begin by adding Playwright to your project:

npm init -y
npm install -D @playwright/test
npx playwright install

npm init -y
npm install -D @playwright/test
npx playwright install

Creating Playwright Configuration#

Create a comprehensive playwright.config.ts to configure your test environment:

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

export default defineConfig({
  testDir: "./tests",
  timeout: 30000,
  fullyParallel: true,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 2 : undefined,
  reporter: process.env.CI ? "blob" : "html",
  use: {
    trace: "on-first-retry",
    screenshot: "only-on-failure",
  },
});

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

export default defineConfig({
  testDir: "./tests",
  timeout: 30000,
  fullyParallel: true,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 2 : undefined,
  reporter: process.env.CI ? "blob" : "html",
  use: {
    trace: "on-first-retry",
    screenshot: "only-on-failure",
  },
});

Azure Pipeline Configuration#

Create an azure-pipelines.yml in your repository root:

trigger:
  - main

pool:
  vmImage: "ubuntu-latest"

steps:
  - task: NodeTool@0
    inputs:
      versionSpec: "16.x"
    displayName: "Install Node.js"

  - script: |
      npm ci
      npx playwright install
    displayName: "Install dependencies"

  - script: |
      npm run test:playwright
    displayName: "Run Playwright Tests"

trigger:
  - main

pool:
  vmImage: "ubuntu-latest"

steps:
  - task: NodeTool@0
    inputs:
      versionSpec: "16.x"
    displayName: "Install Node.js"

  - script: |
      npm ci
      npx playwright install
    displayName: "Install dependencies"

  - script: |
      npm run test:playwright
    displayName: "Run Playwright Tests"

Writing Playwright Tests for Azure Pipelines#

Creating Test Scenarios#

Design comprehensive test suites that cover critical application workflows:

import { test, expect } from "@playwright/test";

test.describe("E-Commerce Application", () => {
  test("User can complete purchase", async ({ page }) => {
    await page.goto("https://myapp.azurewebsites.net");

    try {
      await page.click("#login-button");
      await page.fill("#username", "testuser");
      await page.fill("#password", "securePassword123");

      await Promise.all([
        page.click("#submit-login"),
        page.waitForNavigation(),
      ]);

      await page.selectProduct("Premium Widget");
      await page.addToCart();
      await page.checkout();

      const confirmationMessage = await page.textContent(".order-confirmation");
      expect(confirmationMessage).toContain("Order Successful");
    } catch (error) {
      console.error("Purchase test failed:", error);
      throw error;
    }
  });
});

import { test, expect } from "@playwright/test";

test.describe("E-Commerce Application", () => {
  test("User can complete purchase", async ({ page }) => {
    await page.goto("https://myapp.azurewebsites.net");

    try {
      await page.click("#login-button");
      await page.fill("#username", "testuser");
      await page.fill("#password", "securePassword123");

      await Promise.all([
        page.click("#submit-login"),
        page.waitForNavigation(),
      ]);

      await page.selectProduct("Premium Widget");
      await page.addToCart();
      await page.checkout();

      const confirmationMessage = await page.textContent(".order-confirmation");
      expect(confirmationMessage).toContain("Order Successful");
    } catch (error) {
      console.error("Purchase test failed:", error);
      throw error;
    }
  });
});

Troubleshooting Azure Playwright Integration#

Best Practices#

• Use environment-specific configurations
• Implement parallel test execution
• Capture screenshots and traces for failed tests
• Integrate comprehensive error logging
• Maintain separate test suites for different environments
• Use Azure Pipeline variables for sensitive credentials
• Implement comprehensive browser compatibility testing

Next Steps#

• Explore advanced Playwright reporting techniques
• Integrate code coverage tools
• Learn about cross-browser testing strategies
• Investigate performance testing with Playwright
• Master Azure DevOps pipeline optimization techniques