Playwright i CI z Azure DevOps

Wstęp

Cypress na Azure DevOps pokazał trigger na wiele ścieżek, npm install, weryfikację narzędzia i uruchomienie testów. Ten sam scenariusz z Playwrightem jest prostszy w jednym miejscu: nie musisz pluginu do podmiany config - process.env czytasz bezpośrednio w playwright.config.ts.

Poprzedni odcinek: Wizualna regresja.

Przykładowy azure-pipelines.yml

trigger:
  paths:
    include:
      - "*"

pool:
  vmImage: ubuntu-latest

steps:
  - task: NodeTool@0
    inputs:
      versionSpec: "20.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
    env:
      BASE_URL: $(BASE_URL)
      API_URL: $(API_URL)

--with-deps instaluje biblioteki systemowe potrzebne Chromium/Firefox/WebKit na czystym Ubuntu - odpowiednik „zadbaj o przeglądarki na agencie”, o którym była mowa przy Cypressie.

Zmienne w Azure

Ustaw BASE_URL i API_URL w Pipelines → Variables (tak jak na zrzucie z serii Cypress) - wtedy testy trafiają w wdrożony front/API zamiast w localhost.

playwright.config.ts

import { defineConfig } from "@playwright/test"

export default defineConfig({
  use: {
    baseURL: process.env.BASE_URL ?? "http://localhost:4100",
  },
})

Helpery HTTP czytają process.env.API_URL ?? "http://localhost:5000" tak jak w części o URL-ach.

Co jeśli aplikacja musi działać lokalnie na agencie?

Wtedy dodajesz kroki startu dockera / npm run start w tle i czekasz na port (healthcheck lub npx wait-on), dokładnie jak przy pełnym stacku - poza zakresem skrótu z oryginalnego wpisu, ale mechanizm jest ten sam.

Kod referencyjny (Cypress)

https://github.com/12masta/react-redux-realworld-example-app/tree/8-cypress

Następny odcinek: JUnit i Publish Test Results w Azure.