Angular Academy · Aula

Visão geral dos testes de ponta a ponta

Entenda o papel dos testes de ponta a ponta.

Visão geral dos testes de ponta a ponta é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

O que significa testar de ponta a ponta

Testes de ponta a ponta (E2E) exercitam seu aplicativo como um usuário real faria: iniciam o aplicativo em um navegador real, navegam pelas páginas, clicam em botões, digitam em formulários e verificam o que está visível. Eles verificam se toda a pilha funciona em conjunto, não apenas uma unidade.

A pirâmide de testes

Uma suíte saudável tem muitos testes unitários rápidos, menos testes de integração e um pequeno conjunto de testes E2E lentos, mas de alto valor. Os testes E2E ficam no topo: oferecem a maior cobertura por teste, mas também são os mais caros de executar e manter.

Unitário: uma função ou componente isolado
Integração: várias unidades em conjunto
E2E: o aplicativo em execução de ponta a ponta

O que os testes E2E detectam e os testes unitários não

Os testes E2E detectam problemas que só aparecem quando as partes reais se conectam: erros de roteamento, integração quebrada com a API, DOM ausente após uma implantação, CSS que oculta um botão ou um ciclo de redirecionamento de autenticação. Testes unitários com dependências simuladas podem passar enquanto o aplicativo real está quebrado.

Histórico do Angular e dos testes E2E

As versões antigas do Angular incluíam o Protractor para E2E. O Protractor foi descontinuado e removido de novos projetos. Hoje, o Angular CLI permite escolher um executor de E2E de terceiros; Playwright e Cypress são as opções mais populares.

Por que usar Playwright

O Playwright é uma estrutura E2E moderna e rápida da Microsoft. Ele controla Chromium, Firefox e WebKit, espera automaticamente pelos elementos, isola os testes com contextos de navegador novos e oferece excelentes ferramentas de depuração. Este curso usa o Playwright.

Adicionando o Playwright ao Angular

Você pode configurar o Playwright usando o próprio instalador. Ele cria um playwright.config.ts e uma pasta de exemplo para testes.

npm init playwright@latest
# creates playwright.config.ts and tests/ with example specs

Anatomia de um teste E2E

Um teste E2E inicia o aplicativo, executa ações do usuário e faz asserções sobre a página. O fluxo é: preparar (navegar), agir (interagir) e verificar (confirmar o resultado visível).

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

test('home shows title', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('heading')).toHaveText('Welcome');
});

O E2E é executado em um servidor real

O E2E precisa que seu aplicativo Angular esteja realmente em execução. Normalmente, a configuração inicia o ng serve (ou disponibiliza uma compilação de produção) e aponta os testes para essa URL usando baseURL e uma entrada webServer.

// playwright.config.ts
export default {
  use: { baseURL: 'http://localhost:4200' },
  webServer: { command: 'ng serve', url: 'http://localhost:4200', reuseExistingServer: true },
};

Mantenha as suítes E2E pequenas e essenciais

Como os testes E2E são lentos e podem apresentar instabilidade, cubra apenas os percursos críticos do usuário: login, finalização da compra e o caminho principal de sucesso. Deixe os casos extremos detalhados para os testes unitários e de integração, que são executados com mais rapidez e confiabilidade.

Instabilidade e determinismo

O maior desafio dos testes E2E é a instabilidade: testes que falham de forma intermitente. Evite atrasos fixos de sleep; confie às asserções com espera automática do Playwright. Controle os dados de teste para que cada execução comece em um estado conhecido.

E2E versus testes de componentes

Os testes de componentes do Angular (TestBed) verificam um componente em um ambiente sintético. O E2E verifica o aplicativo implantado em um navegador real. Eles são complementares: use o TestBed para verificações rápidas de lógica e DOM, e E2E para ter confiança de que o produto inteiro funciona.

Verificação rápida

O que diferencia os testes E2E dos testes unitários?

Recapitulação

Os testes E2E executam o aplicativo inteiro em um navegador real para detectar problemas de integração e roteamento que os testes unitários não identificam. Eles ficam no topo da pirâmide de testes: são poucos, lentos e de alto valor. Atualmente, os projetos Angular usam executores como o Playwright, que iniciam o servidor e conduzem os percursos críticos do usuário.

Perguntas Frequentes

A aula “Visão geral dos testes de ponta a ponta” é grátis?

Sim — o texto completo de “Visão geral dos testes de ponta a ponta” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “Visão geral dos testes de ponta a ponta”?

Entenda o papel dos testes de ponta a ponta. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Visão geral dos testes de ponta a ponta”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Angular Academy