YepAPI/skills

Testes E2E

Regras

• Playwright para E2E — multi-navegador, espera automática, executor de testes integrado, excelente suporte a CI
• Prioridade de localizadores: getByRole() > getByLabel() > getByPlaceholder() > getByTestId() > seletores CSS
• Page Object Model: encapsule interações da página em classes — LoginPage.login(email, password)
• Isolamento de testes: cada teste começa com estado limpo — use beforeEach para configuração, evite interdependência entre testes
• Espera automática: Playwright espera pelos elementos automaticamente — não adicione chamadas manuais de waitForTimeout()
• Afirmações: use asserções web-first do expect(locator) — toBeVisible(), toHaveText(), toHaveURL()
• Execução paralela: testes rodam em paralelo por padrão — garanta que não haja estado mutável compartilhado entre testes
• CI: execute em modo headless, configure retentativas (retries: 2 no CI), faça upload do trace em caso de falha
• Regressão visual: expect(page).toHaveScreenshot() — atualize as imagens de base com --update-snapshots

Padrões

// Page Object Model
class LoginPage {
  constructor(private page: Page) {}
  async goto() { await this.page.goto("/login"); }
  async login(email: string, password: string) {
    await this.page.getByLabel("Email").fill(email);
    await this.page.getByLabel("Password").fill(password);
    await this.page.getByRole("button", { name: "Sign in" }).click();
    await this.page.waitForURL("/dashboard");
  }
}

// playwright.config.ts
export default defineConfig({
  retries: process.env.CI ? 2 : 0,
  use: { trace: "on-first-retry", screenshot: "only-on-failure" },
  projects: [
    { name: "chromium", use: { ...devices["Desktop Chrome"] } },
    { name: "mobile", use: { ...devices["Pixel 5"] } },
  ],
});

Evitar

• page.waitForTimeout() — use espera automática ou waitForURL(), waitForResponse()
• Seletores CSS para elementos interativos — use localizadores baseados em papel para resiliência
• Testes que dependem do estado de outros testes — cada teste deve ser executável de forma independente
• Testar serviços de terceiros diretamente — simule APIs externas com page.route()
• Pular viewports móveis — teste pelo menos um dispositivo móvel na matriz do seu projeto