← Volver al listado de tecnologías

Capítulo 11: CI/CD

Por: Siempre Listo
playwrightci-cdgithub-actionsdocker

CI/CD

Ejecuta tus tests de Playwright automáticamente en cada push o pull request.

GitHub Actions

# .github/workflows/playwright.yml
name: Playwright Tests

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install dependencies
        run: npm ci

      - name: Install Playwright Browsers
        run: npx playwright install --with-deps

      - name: Run Playwright tests
        run: npx playwright test

      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

Docker

# Dockerfile
FROM mcr.microsoft.com/playwright:v1.40.0-jammy

WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY . .

CMD ["npx", "playwright", "test"]
# docker-compose.yml
version: '3'
services:
  playwright:
    build: .
    volumes:
      - ./playwright-report:/app/playwright-report

Configuración para CI

// playwright.config.ts
export default defineConfig({
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: process.env.CI
    ? [['github'], ['html']]
    : 'html',
});

Sharding (Tests en Paralelo)

jobs:
  test:
    strategy:
      matrix:
        shard: [1, 2, 3, 4]
    steps:
      - name: Run tests
        run: npx playwright test --shard=${{ matrix.shard }}/4

Ejercicio Práctico

Objetivo

Configurar GitHub Actions para tu proyecto.

Pasos

  1. Crea .github/workflows/playwright.yml
  2. Configura el workflow básico
  3. Haz push y verifica la ejecución
  4. Descarga el reporte de artifacts
Ver solución 
name: E2E Tests

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]

jobs:
  playwright:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test

      - uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: test-results
          path: |
            playwright-report/
            test-results/

Criterios de Éxito

← Volver al listado de tecnologías