Angular Academy · Aula

Integração contínua

Execute testes de ponta a ponta na integração contínua.

Integração contínua é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 4 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.

Por que executar E2E na CI

Os testes E2E são mais valiosos quando executados automaticamente a cada envio ou solicitação de mesclagem. A Integração Contínua (CI) detecta regressões antes da mesclagem, para que um fluxo de login quebrado nunca chegue à produção sem ser percebido.

O que a CI precisa para executar E2E

O trabalho da CI deve: instalar as dependências, instalar os navegadores do Playwright, compilar ou disponibilizar o aplicativo Angular e, em seguida, executar os testes sem interface gráfica. As máquinas da CI não têm tela, portanto os testes são executados no modo sem interface gráfica por padrão.

Instalando navegadores na CI

Os navegadores não são versionados no seu repositório. Instale-os no pipeline com o instalador do Playwright, incluindo as dependências do OS.

npm ci
npx playwright install --with-deps

Permitindo que o Playwright inicie o aplicativo

A configuração webServer instrui o Playwright a iniciar o aplicativo antes dos testes e desligá-lo depois. Na CI, defina reuseExistingServer: false para que um servidor novo seja sempre iniciado.

// playwright.config.ts
export default {
  webServer: {
    command: 'ng serve --configuration production',
    url: 'http://localhost:4200',
    reuseExistingServer: !process.env.CI,
  },
};

Um fluxo de trabalho do GitHub Actions

Um fluxo de trabalho típico obtém o código, configura o Node, instala as dependências e os navegadores e, em seguida, executa o conjunto de testes.

# .github/workflows/e2e.yml
name: e2e
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test

Opções de modo sem interface gráfica e da CI

O Playwright detecta automaticamente a CI por meio da variável de ambiente CI e faz ajustes: repete os testes que falharam, proíbe test.only e usa mais trabalhadores com cuidado. Você também pode definir explicitamente o número de repetições.

export default {
  retries: process.env.CI ? 2 : 0,
  forbidOnly: !!process.env.CI,
};

Publicando o relatório HTML

O Playwright produz um relatório HTML. Envie-o como um artefato da CI para que as falhas possam ser analisadas após a execução, incluindo rastreamentos e capturas de tela.

      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: playwright-report
          path: playwright-report/

Capturando rastreamentos em caso de falha

Configure os rastreamentos para serem registrados somente na primeira repetição. Assim, as execuções permanecem rápidas, mas você obtém uma reprodução completa de qualquer falha para depuração.

export default {
  use: { trace: 'on-first-retry', screenshot: 'only-on-failure' },
};

Dividindo para ganhar velocidade

Conjuntos de testes grandes podem ser divididos entre máquinas paralelas com --shard. Cada trabalho da CI executa uma parte, reduzindo o tempo total de execução.

npx playwright test --shard=1/3
npx playwright test --shard=2/3
npx playwright test --shard=3/3

Usando cache para acelerar a CI

Coloque node_modules e os binários dos navegadores do Playwright em cache entre as execuções, para que as instalações não dominem o tempo de compilação. A maioria dos provedores de CI oferece uma ação de cache indexada pelo seu arquivo de bloqueio.

Fazendo a compilação falhar corretamente

O Playwright termina com um código diferente de zero quando qualquer teste falha, fazendo com que a CI marque o trabalho em vermelho e bloqueie a mesclagem. Não descarte esse código de saída com || true, pois os testes quebrados serão aprovados silenciosamente.

Verificação rápida

O que instala os navegadores na CI?

Recapitulação

Execute E2E a cada envio instalando as dependências e os navegadores (playwright install --with-deps), permitindo que webServer inicie o aplicativo e executando os testes sem interface gráfica, com repetições adaptadas à CI. Envie o relatório HTML e os rastreamentos como artefatos, divida os testes para ganhar velocidade e permita que o código de saída diferente de zero bloqueie mesclagens problemáticas.

Perguntas Frequentes

A aula “Integração contínua” é grátis?

Sim — o texto completo de “Integração contínua” é 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 “Integração contínua”?

Execute testes de ponta a ponta na integração contínua. 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 4 de 4.

Quanto tempo leva a aula “Integração contínua”?

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