Locators, assertivas e Page Object Model no Playwright

Um locator frágil quebra com qualquer mudança de CSS class ou estrutura HTML. O Playwright recomenda uma hierarquia de preferência:

1. getByRole: usa atributos ARIA — o mais robusto e acessível. page.getByRole('button', { name: 'Enviar' })
2. getByLabel: encontra campos de formulário pelo label associado. page.getByLabel('Nome completo')
3. getByPlaceholder: para inputs sem label. page.getByPlaceholder('Digite seu e-mail')
4. getByText: elemento pelo conteúdo de texto. page.getByText('Bem-vindo, João')
5. getByTestId: atributo data-testid. page.getByTestId('submit-button')
6. locator (CSS/XPath): último recurso. Frágil, evitar sempre que possível.

O Playwright tem assertivas com retry automático — ele fica tentando até o timeout antes de falhar:

// Visibilidade
await expect(page.getByText('Salvo!')).toBeVisible();
await expect(page.getByRole('button', { name: 'Excluir' })).toBeHidden();

// Conteúdo
await expect(page.getByRole('heading')).toHaveText('Bem-vindo');
await expect(page.getByLabel('Nome')).toHaveValue('Maria');

// URL e título
await expect(page).toHaveURL('/dashboard');
await expect(page).toHaveTitle('Dashboard — MeuApp');

// Elemento habilitado/desabilitado
await expect(page.getByRole('button', { name: 'Salvar' })).toBeEnabled();
await expect(page.getByRole('button', { name: 'Enviar' })).toBeDisabled();

O Page Object Model é um padrão de design que encapsula a lógica de interação com cada página em uma classe separada. Benefícios: reutilização, legibilidade e manutenção centralizada.

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

export class LoginPage {
  constructor(private page: Page) {}

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

  async login(email: string, senha: string) {
    await this.page.getByLabel('E-mail').fill(email);
    await this.page.getByLabel('Senha').fill(senha);
    await this.page.getByRole('button', { name: 'Entrar' }).click();
  }

  async getErroMensagem() {
    return this.page.getByRole('alert').textContent();
  }
}

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

test('login com credenciais inválidas mostra erro', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.goto();
  await loginPage.login('invalido@teste.com', 'senha-errada');
  expect(await loginPage.getErroMensagem()).toContain('Credenciais inválidas');
});

O Playwright permite criar fixtures — objetos reutilizáveis injetados em cada teste. O caso mais comum é autenticação: em vez de fazer login em cada teste, você faz uma vez e reutiliza a sessão.

// fixtures.ts
import { test as base } from '@playwright/test';
import { LoginPage } from './pages/LoginPage';

export const test = base.extend({
  loggedInPage: async ({ page }, use) => {
    const loginPage = new LoginPage(page);
    await loginPage.goto();
    await loginPage.login('usuario@teste.com', 'senha123');
    await page.waitForURL('/dashboard');
    await use(page);
  },
});

// tests/dashboard.spec.ts
import { test } from '../fixtures';
import { expect } from '@playwright/test';

test('dashboard mostra nome do usuário', async ({ loggedInPage }) => {
  await expect(loggedInPage.getByText('Olá, Usuário')).toBeVisible();
});

Qual é o locator mais recomendado pelo Playwright para encontrar botões?