Introduccion a Playwright - Automatizacion de pruebas E2E

Lo que aprenderas en este tutorial

✓ Configuracion de Playwright
✓ Creacion de pruebas basicas
✓ Localizadores y aserciones
✓ Page Object Model
✓ Integracion CI/CD

Step 1: Configuracion

npm init playwright@latest

# Instalar navegadores
npx playwright install

Step 2: Prueba basica

// tests/example.spec.ts
import { test, expect } from '@playwright/test';

test('has title', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page).toHaveTitle(/Example/);
});

test('can navigate', async ({ page }) => {
  await page.goto('https://example.com');
  await page.click('text=More information');
  await expect(page).toHaveURL(/iana.org/);
});

Step 3: Localizadores

// Orden recomendado
page.getByRole('button', { name: 'Submit' });
page.getByLabel('Email');
page.getByPlaceholder('Enter email');
page.getByText('Welcome');
page.getByTestId('submit-button');

// CSS/XPath
page.locator('.submit-btn');
page.locator('//button[@type="submit"]');

Step 4: Acciones y aserciones

test('form submission', async ({ page }) => {
  await page.goto('/contact');

  // Entrada del formulario
  await page.getByLabel('Name').fill('Test User');
  await page.getByLabel('Email').fill('test@example.com');
  await page.getByLabel('Message').fill('Hello World');

  // Enviar
  await page.getByRole('button', { name: 'Submit' }).click();

  // Aserciones
  await expect(page.getByText('Thank you')).toBeVisible();
  await expect(page).toHaveURL('/thank-you');
});

Step 5: Page Object Model

// pages/LoginPage.ts
import { Page, Locator } from '@playwright/test';

export class LoginPage {
  readonly page: Page;
  readonly emailInput: Locator;
  readonly passwordInput: Locator;
  readonly submitButton: Locator;

  constructor(page: Page) {
    this.page = page;
    this.emailInput = page.getByLabel('Email');
    this.passwordInput = page.getByLabel('Password');
    this.submitButton = page.getByRole('button', { name: 'Login' });
  }

  async goto() {
    await this.page.goto('/login');
  }

  async login(email: string, password: string) {
    await this.emailInput.fill(email);
    await this.passwordInput.fill(password);
    await this.submitButton.click();
  }
}

// tests/login.spec.ts
import { LoginPage } from '../pages/LoginPage';

test('user can login', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.goto();
  await loginPage.login('test@example.com', 'password');
  await expect(page).toHaveURL('/dashboard');
});

Step 6: Ejecucion de pruebas

# Ejecutar todas las pruebas
npx playwright test

# Modo UI
npx playwright test --ui

# Archivo especifico
npx playwright test login.spec.ts

# Modo depuracion
npx playwright test --debug

# Mostrar reporte
npx playwright show-report

Step 7: Configuracion CI/CD

# .github/workflows/playwright.yml
name: Playwright Tests
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test
      - uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: playwright-report
          path: playwright-report/

Resumen

Playwright es un framework de pruebas E2E rapido y confiable. Con soporte multi-navegador y modo UI, puedes desarrollar pruebas de manera eficiente.