Primeiro teste com Playwright passo a passo: guia completo para iniciantes
Se você está começando na área de automação de testes ou quer migrar de ferramentas mais antigas para um framework de teste mais moderno, criar o primeiro script pode parecer desafiador. A boa notícia é que o Playwright foi desenhado para tornar esse processo rápido, confiável e extremamente simples.
Neste guia prático passo a passo, você vai aprender como configurar o ambiente do zero, criar seu primeiro script de teste automatizado e executá-lo na prática — mesmo que nunca tenha escrito uma linha de código em TypeScript ou JavaScript.
🔧 Pré-requisitos para começar
Antes de abrir o terminal e digitar os comandos, certifique-se de ter as seguintes ferramentas instaladas no seu computador:
- Node.js (versão 18 ou superior): É o ambiente de execução onde o Playwright roda. Você pode verificar se já tem instalado digitando
node -vno seu terminal. - VS Code (Visual Studio Code): O editor de código mais recomendado para trabalhar com Playwright devido à excelente extensão oficial.
- Conhecimento básico de lógica: Não é necessário ser um desenvolvedor avançado, apenas entender conceitos simples de lógica de programação.
⚙️ Passo 1: Instalando e configurando o Playwright
Abra o terminal na pasta onde deseja criar o seu projeto e execute o comando oficial do Playwright:
npm init playwright@latestDurante a execução, o assistente no terminal fará algumas perguntas de configuração. Para este primeiro projeto, recomendamos escolher as seguintes respostas:
- Linguagem: Escolha TypeScript ou JavaScript (TypeScript é a recomendação oficial do Playwright).
- Nome da pasta de testes: Pressione Enter para aceitar o padrão (
tests). - Adicionar GitHub Actions Workflow? Selecione False (podemos configurar CI/CD no futuro).
- Instalar navegadores do Playwright? Selecione True (Isso baixará os binários do Chromium, Firefox e WebKit).
Ao finalizar, o Playwright criará automaticamente a estrutura inicial de arquivos do seu projeto, incluindo a pasta tests/ e o arquivo de configuração playwright.config.ts.
🧪 Passo 2: Criando seu primeiro script de teste
Dentro da pasta tests, crie um novo arquivo chamado login.spec.ts. Neste arquivo, vamos simular a autenticação de um usuário em uma tela de login.
Copie e cole o código abaixo:
import { test, expect } from '@playwright/test';
test('Deve realizar login com sucesso', async ({ page }) => {
// 1. Acessa a página de login
await page.goto('https://demo.playwright.dev/todomvc/');
// 2. Preenche o campo de input e pressiona Enter
const input = page.getByPlaceholder('What needs to be done?');
await input.fill('Comprar café e estudar Playwright');
await input.press('Enter');
// 3. Valida se o item foi adicionado à lista na tela
await expect(page.getByTestId('todo-title')).toHaveText('Comprar café e estudar Playwright');
});
🔍 Entendendo o código linha por linha
Vamos desmistificar o que cada instrução está fazendo no navegador:
import { test, expect }: Importa as funções principais do Playwright para estruturar a suíte de testes e realizar as asserções (validações).async ({ page }): Abre uma nova instância limpa de uma página de navegador para ser utilizada exclusivamente neste teste (isolamento de contexto).await page.goto(): Abre a URL desejada. O uso doawaitgarante que o código espere o carregamento antes de ir para o próximo passo.page.getByPlaceholder(): Utiliza um locator recomendado pelo Playwright baseado em acessibilidade, evitando seletores CSS frágeis.await expect().toHaveText(): É a nossa **asserção**. O teste só passará se o texto digitado realmente aparecer na tela após a ação.
▶️ Passo 3: Executando o seu teste no terminal
Para rodar o teste que acabamos de escrever, execute o comando abaixo no terminal do VS Code:
npx playwright testPor padrão, o Playwright roda no modo Headless (sem abrir a janela do navegador visualmente) para rodar mais rápido. Se você quiser **ver o navegador abrindo e executando as ações em tempo real**, rode com a flag --headed:
npx playwright test --headedPara visualizar o relatório completo de execução em HTML após o teste rodar, execute:
npx playwright show-report⚠️ Erros comuns de quem está começando
Durante a criação dos seus primeiros testes automatizados, fique atento para não cometer estas falhas frequentes:
- Esquecer a palavra-chave
await: Como o Playwright é totalmente assíncrono, esquecer oawaitfará com que o teste passe para o próximo passo sem esperar a ação anterior terminar. - Usar esperas fixas desnecessárias: Não utilize
page.waitForTimeout(5000). O Playwright possui auto-waiting nativo e espera os elementos ficarem prontos automaticamente. - Mapear seletores frágeis: Dê preferência aos locators nativos (
getByRole,getByLabel,getByTestId) em vez de caminhos longos de CSS ou XPath.
Dica de Ouro: Utilize o recurso npx playwright codegen no terminal para abrir o gravador automático de testes. Ele gera o código dos seus cliques e digitações em tempo real!
🚀 Como evoluir além do básico?
Criar o seu primeiro teste funcional é apenas o ponto de partida. À medida que você avança para projetos reais de mercado, precisará aprender a lidar com cenários mais complexos, como:
- Autenticação via API para acelerar a execução do login;
- Estruturação do projeto usando o padrão Page Object Model (POM);
- Execução paralela de testes na esteira de CI/CD (GitHub Actions);
- Geração de dados fictícios para testes em massa.
Se você quer acelerar seu aprendizado, evitar perder tempo com tentativas e erros e aprender as boas práticas exigidas pelas empresas de tecnologia, vale a pena acompanhar guias e materiais estruturados de apoio.
🧠 Conclusão
O Playwright se consolidou como um dos frameworks mais poderosos e rápidos para automação de testes de software modernos. O segredo para dominar a ferramenta não é tentar absorver tudo de uma vez, mas sim praticar diariamente com cenários simples e ir aumentando a complexidade aos poucos.
Agora é com você: abra o terminal, rode os comandos deste tutorial e crie o seu primeiro script ainda hoje!
Comentários
Postar um comentário