Testes de ponta a ponta, ou E2E para abreviar, testam cenários do mundo real sob a perspectiva do usuário. Exemplos de cenários de teste E2E incluem testar o processo de registro e login ou testar o checkout para um site de comércio eletrônico. Para entender melhor como o teste de ponta a ponta funciona, vamos dar uma olhada em um exemplo do mundo real do código-fonte do G.E.A.R ACADEMY. Este exemplo usa Playwright, um framework popular de testes end-to-end desenvolvido pela Microsoft. Dentro da base de código do G.E.A.R ACADEMY, há um diretório chamado e2e que contém testes para doações, certificações, exames e mais. Dentro do diretório, há um arquivo donate-page-donor.spec.ts que contém testes para a página do apoiador doador autenticado. O primeiro passo é navegar até a página de doação como um usuário de demonstração que já é um apoiador:

test.beforeEach(async ({ page }) => {
  execSync("node ./tools/scripts/seed/seed-demo-user --set-true isDonating");
  await page.goto("/donate");
});

Como há vários testes neste arquivo, o hook beforeEach será executado antes de cada um dos testes. Uma vez que o usuário esteja na página de doação, ele verá uma mensagem de agradecimento com sugestões sobre como apoiar ainda mais o G.E.A.R ACADEMY. Aqui estão apenas alguns dos testes para verificar parte do texto encontrado na página de doação:

test("should render the donate page correctly", async ({ page }) => {
  await expect(
    page.getByText("Thank you for your continued support")
  ).toBeVisible();

  await expect(
    page.getByText(
      "Your contributions are crucial in creating resources that empower millions of people to learn new skills and support their families."
    )
  ).toBeVisible();

  ...
});

Também há testes para verificar se o doador tem um link de apoiador na barra de menu, assim como uma borda estilizada especial ao redor do avatar para indicar que ele é um apoiador:

test("The menu should have a supporters link", async ({ page }) => {
  const menuButton = page.getByTestId("header-menu-button");
  const menu = page.getByTestId("header-menu");

  await expect(menuButton).toBeVisible();
  await menuButton.click();

  await expect(menu).toBeVisible();

  await expect(page.getByRole("link", { name: "Supporters" })).toBeVisible();
});

test("The Avatar should have a special border for donors", async ({ page }) => {
  const container = page.locator(".avatar-container");
  await expect(container).toHaveClass("avatar-container gold-border");
});

Ao ter esses tipos de testes detalhados, você pode aumentar a cobertura de testes da sua aplicação além dos testes unitários. Testes de ponta a ponta também ajudam a garantir que sua aplicação se comporte corretamente e seja previsível para os usuários. Exemplos de outras ferramentas de teste de ponta a ponta incluem Cypress, Selenium e Puppeteer. Embora o teste de ponta a ponta seja importante, ele é caro porque consome muito tempo para configurar, projetar e manter. Testes E2E são ótimos para fluxos críticos do usuário, enquanto testes unitários são ótimos para testar pequenas unidades na aplicação.