Tudo pode passar isoladamente e a experiência ainda falhar
A função de cálculo pode estar correta. A API pode responder como esperado. O banco pode gravar o pedido.
Mas o botão da tela pode chamar o endereço errado, o total pode ser exibido de forma incorreta ou um clique repetido pode provocar duas finalizações.
Agora queremos acompanhar o caminho inteiro
Quando verificamos esse fluxo do início ao fim, estamos fazendo um teste de ponta a ponta.
End-to-End (E2E)
End-to-End significa “de ponta a ponta”. A sigla E2E é usada para testes que percorrem um fluxo completo da aplicação, próximo da forma como uma pessoa realmente utiliza o sistema.
Primeiro compreenda o cenário manualmente
Antes de automatizar, faça este fluxo na Cantina Horizonte:
- abra a aplicação;
- localize o produto Salgado;
- informe quantidade 2;
- adicione ao carrinho;
- confirme que o subtotal é R$ 16,00;
- finalize o pedido;
- confirme a mensagem de sucesso.
O teste automatizado fará exatamente essa história. A diferença é que o navegador será controlado pelo código.
Playwright entra porque precisamos controlar o navegador
Playwright
É uma ferramenta de automação de navegador. Ela consegue abrir páginas, preencher campos, clicar em botões e verificar o que apareceu na tela.
Aqui usaremos JavaScript apenas para descrever a interação com a página. O conceito de teste E2E não depende dessa linguagem.
Preparando o ambiente
Para executar o Playwright, o projeto usa Node.js, um ambiente que permite executar JavaScript fora do navegador e disponibiliza as ferramentas necessárias para instalar e rodar os testes.
No terminal, confira primeiro:
node --versionSe aparecer um número de versão, o Node.js já está disponível. Se o comando não for reconhecido, instale uma versão LTS pela página oficial: Download do Node.js →.
Na pasta qts/cantina-horizonte-v1, instale as dependências do projeto:
npm installnpm é o gerenciador de pacotes usado pelo ecossistema do Node.js. Neste momento ele serve apenas para instalar o Playwright definido no projeto.
Depois instale o navegador Chromium usado pelos testes:
npx playwright install chromiumnpx executa uma ferramenta instalada no projeto sem precisarmos chamar diretamente seu arquivo interno.
Nosso primeiro teste E2E
O arquivo e2e/pedido-valido.spec.js contém:
const { test, expect } = require('@playwright/test');
test('cliente consegue adicionar dois salgados e finalizar o pedido', async ({ page }) => {
await page.goto('/');
const salgado = page.locator('.produto-card').filter({ hasText: 'Salgado' });
await salgado.locator('.quantidade').fill('2');
await salgado.getByRole('button', { name: 'Adicionar' }).click();
await expect(page.locator('#subtotal')).toHaveText('R$ 16,00');
await page.getByRole('button', { name: 'Finalizar pedido' }).click();
await expect(page.locator('#mensagem')).toContainText('realizado com sucesso');
await expect(page.locator('#mensagem')).toContainText('R$ 16,00');
});Não é necessário memorizar cada comando. Leia o teste como uma história: abrir, localizar, preencher, clicar e comparar o resultado.
Executando
Se a Cantina Horizonte estiver aberta por um servidor iniciado manualmente, encerre esse servidor com Ctrl+C antes de continuar. Assim o Playwright consegue restaurar os dados e iniciar um ambiente limpo para o teste.
npm run test:e2eA configuração do projeto restaura os dados iniciais, inicia um servidor exclusivo para o teste e executa o fluxo no Chromium.
Se o fluxo terminar como esperado, o teste passa. Se algum ponto da cadeia produzir um resultado diferente, o teste falha e nos dá uma pista sobre onde investigar.
Por que não fazer tudo apenas com E2E?
Porque um teste completo atravessa muitas partes. Isso o torna valioso, mas também mais lento e mais sujeito a falhas causadas pelo ambiente.
Quando um teste unitário falha, o problema costuma estar perto da função testada. Quando um E2E falha, precisamos investigar interface, servidor, dados, rede local, navegador e regras envolvidas.
Os níveis de teste se complementam. E2E não substitui unidade, integração ou testes manuais.
Um cenário que só aparece no uso real
Experimente clicar duas vezes rapidamente em Finalizar pedido.
Um único pedido do usuário poderia ser registrado duas vezes?
Esse tipo de situação mostra por que observar o fluxo completo continua importante mesmo quando as partes isoladas parecem corretas.
Escolha bem o que automatizar
Para a Cantina Horizonte, fluxos críticos e repetitivos são bons candidatos: pedido normal, quantidade inválida, cupom, carrinho vazio e finalização.
Mas aparência, clareza de uma mensagem ou exploração de comportamentos inesperados ainda podem exigir avaliação humana.
Testes de interface também precisam ser mantidos
Se o nome de um botão ou a estrutura da tela mudar, um teste muito dependente de posições pode quebrar mesmo sem existir defeito de negócio.
Por isso procuramos elementos por significado sempre que possível, como o botão chamado Adicionar, e evitamos instruções frágeis como “clique no terceiro botão da segunda coluna”.
Agora temos outro problema de processo
Temos testes em Python, testes de API e agora um teste que abre o navegador.
Mas todos eles ainda dependem de alguém lembrar de executá-los.
E se uma alteração for enviada ao GitHub sem ninguém rodar os testes?
Antes de seguir
Você deve conseguir explicar:
- o que significa teste End-to-End (E2E);
- por que um E2E atravessa várias partes do sistema;
- para que o Playwright é usado;
- por que E2E não substitui os outros níveis de teste;
- por que um teste automatizado de interface também precisa de manutenção.