Introducao ao Playwright - Automacao de Testes E2E

O que voce vai aprender neste tutorial

✓ Configuracao do Playwright
✓ Criacao de testes basicos
✓ Localizadores e assercoes
✓ Page Object Model
✓ Integracao CI/CD

Step 1: Configuracao

npm init playwright@latest

# Instalar navegadores
npx playwright install

Step 2: Teste basico

// 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

// Ordem de prioridade
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: Acoes e assercoes

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

  // Preencher formulario
  await page.getByLabel('Name').fill('Usuario Teste');
  await page.getByLabel('Email').fill('test@example.com');
  await page.getByLabel('Message').fill('Hello World');

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

  // Assercoes
  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: Execucao de testes

# Executar todos os testes
npx playwright test

# Modo UI
npx playwright test --ui

# Arquivo especifico
npx playwright test login.spec.ts

# Modo debug
npx playwright test --debug

# Exibir relatorio
npx playwright show-report

Step 7: Configuracao 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/

Resumo

Playwright e um framework de testes E2E rapido e confiavel. Com suporte a multiplos navegadores e modo UI, voce pode desenvolver testes de forma eficiente.