Testes E2E TypeScript: Guia completo para desenvolvedores

Sua aplicação funciona? Prove isso com testes E2E em TypeScript

Você já ouviu a frase: "Tudo funciona, testamos manualmente"? E no dia seguinte, a produção cai? Familiar, não é? Testes manuais são como ler borra de café. Você nunca sabe se vai clicar no botão que quebra todo o fluxo do usuário.

Testes E2E (End-to-End) em TypeScript são seu engenheiro de QA digital que não dorme, não bebe café e verifica cada botão 24/7. Neste artigo, não vamos apenas explicar o que são testes E2E. Vamos escrevê-los juntos: da instalação ao pipeline CI/CD de produção. Aperte os cintos, vai ser intenso e útil!

Por que TypeScript para testes E2E?

À primeira vista, testes E2E podem ser escritos em qualquer coisa: JavaScript, Python, até Java (mas não vamos falar de coisas tristes). No entanto, TypeScript lhe dá um superpoder — tipagem estática. Você não vai mais pegar bugs como Cannot read property 'click' of undefined em tempo de execução. Sua IDE destacará o erro antes mesmo de executar o teste.

Além disso, se sua aplicação é escrita em TypeScript (e hoje 90% das equipes fazem isso), escrever testes na mesma linguagem é lógico. Você usa os mesmos tipos, as mesmas interfaces, os mesmos utilitários. Isso reduz a carga cognitiva e acelera o desenvolvimento.

Escolhendo a ferramenta: Playwright vs Cypress

O mercado de ferramentas E2E para TypeScript é pequeno, mas há dois líderes claros: Cypress e Playwright. Usaremos Playwright. Por quê?

• Multinavegador nativo: Chromium, Firefox, WebKit (Safari). Cypress ainda não funciona bem com Safari.
• Velocidade: Playwright funciona através do protocolo DevTools, não por um servidor proxy, tornando os testes mais rápidos.
• Trabalho com iframe e abas: Playwright não impõe restrições ao trabalhar com várias abas ou iframes de domínios cruzados.
• TypeScript first: Playwright é escrito em TypeScript e o suporta completamente.

Mas se você é iniciante, Cypress pode ser mais fácil para começar. A escolha é sua. Nós vamos para a batalha com Playwright.

Instalação e configuração do projeto

Vamos criar um novo projeto e instalar o Playwright. Abra o terminal e execute:

mkdir e2e-typescript-guidecd e2e-typescript-guidenpm init -ynpm install @playwright/testnpx playwright install

O último comando baixará os navegadores (Chromium, Firefox, WebKit). Isso levará alguns minutos — vá tomar um café.

Crie o arquivo playwright.config.ts na raiz do projeto:

import { defineConfig } from '@playwright/test';

export default defineConfig({  testDir: './tests',  fullyParallel: true,  retries: 1,  use: {    baseURL: 'http://localhost:3000',    trace: 'on-first-retry',  },  projects: [    {      name: 'chromium',      use: { browserName: 'chromium' },    },  ],});

Configuramos a URL base (substitua pelo endereço da sua aplicação), ativamos o rastreamento para depuração e especificamos que os testes estarão na pasta tests.

Escrevendo o primeiro teste E2E em TypeScript

Crie a pasta tests e o arquivo login.spec.ts. Suponha que temos um formulário de login simples.

import { test, expect } from '@playwright/test';

test.describe('Autenticação do usuário', () => {  test('Login bem-sucedido com dados corretos', async ({ page }) => {    // Passo 1: Abrir a página de login    await page.goto('/login');

    // Passo 2: Preencher os campos    await page.getByLabel('Email').fill('user@example.com');    await page.getByLabel('Senha').fill('securepassword123');

    // Passo 3: Clicar no botão "Entrar"    await page.getByRole('button', { name: 'Entrar' }).click();

    // Passo 4: Aguardar o redirecionamento para o dashboard    awai