PricingLoginStart free
Vue Academy · Aula

Testes de Ponta a Ponta

Valide fluxos completos de usuários com testes de ponta a ponta.

Aula 3 de 313 etapas

Testes de Ponta a Ponta é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 de 3. 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 Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 3 aulas no total.

Testando como um usuário

Testes de ponta a ponta conduzem seu aplicativo real em um navegador real, clicando em botões e preenchendo formulários exatamente como um usuário faria. Eles verificam se tudo, da interface ao back-end, funciona em conjunto.

Por que e2e?

Testes unitários verificam partes isoladamente, mas somente os testes e2e confirmam a jornada completa: um usuário consegue iniciar sessão, navegar, enviar um formulário e ver o resultado. Eles encontram lacunas de integração que nenhum outro tipo de teste detecta.

Instalando o Cypress

Cypress é uma estrutura popular para testes e2e, com um executor de testes interativo. Instale-o como uma dependência de desenvolvimento e abra seu executor.

npm install -D cypress
npx cypress open

Estrutura de testes do Cypress

Um teste do Cypress usa describe para agrupar testes e it para cada cenário, seguindo uma sintaxe de testes conhecida.

describe("Login flow", () => {
  it("logs in a user", () => {
    // steps go here
  })
})

Visitando uma página

Use cy.visit para carregar uma URL no navegador, o ponto de partida da maioria dos testes.

cy.visit("http://localhost:5173/login")

Encontrando elementos

cy.get seleciona elementos com um seletor CSS. O Cypress espera automaticamente os elementos aparecerem, reduzindo testes instáveis.

cy.get("input[name=email]")
cy.get("button[type=submit]")

Digitar em campos de entrada

Encadeie type a um campo de entrada selecionado para simular a digitação pelo teclado.

cy.get("input[name=email]").type("user@example.com")
cy.get("input[name=password]").type("secret123")

Clicar em elementos

Use click para interagir com botões e links, como faria um usuário.

cy.get("button[type=submit]").click()

Verificar o resultado

Depois de interagir, verifique o que o usuário deve ver agora usando should. O Cypress repete as verificações até que sejam aprovadas ou atinjam o tempo limite.

cy.url().should("include", "/dashboard")
cy.contains("Welcome back").should("be.visible")

Um teste completo de ponta a ponta

Reunir as etapas produz um teste legível de um fluxo de usuário real.

describe("Login flow", () => {
  it("logs in successfully", () => {
    cy.visit("/login")
    cy.get("input[name=email]").type("user@example.com")
    cy.get("input[name=password]").type("secret123")
    cy.get("button[type=submit]").click()
    cy.url().should("include", "/dashboard")
  })
})

Alternativa com Playwright

Playwright é outra ferramenta robusta para testes de ponta a ponta, com conceitos semelhantes: inicia um navegador, navega, interage e faz verificações. A interface é diferente, mas a forma de pensar sobre testes é a mesma.

// Playwright style
// await page.goto("/login")
// await page.fill("input[name=email]", "user@example.com")
// await page.click("button[type=submit]")
// await expect(page).toHaveURL(/dashboard/)

Verificação rápida

Teste seus conhecimentos sobre testes de ponta a ponta.

Responda na aula interativa

Recapitulação

Os testes de ponta a ponta conduzem o app real em um navegador. Com Cypress, estruture os testes com describe/it, carregue páginas com cy.visit, encontre elementos com cy.get, interaja usando type e click e verifique com should. Playwright segue as mesmas ideias. Em seguida, você otimizará e publicará sua compilação.

Grátis para começar

Aprenda HTML com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos
42
Aulas
156
Começar a aprender grátisVer o curso completo

Perguntas Frequentes

A aula “Testes de Ponta a Ponta” é grátis?

Sim — o texto completo de “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 Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 3 aulas no total.

O que vou aprender em “Testes de Ponta a Ponta”?

Valide fluxos completos de usuários com testes de ponta a ponta. Você pratica Vue 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 Vue Academy?

Nenhuma experiência prévia é necessária. Vue 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 3 de 3.

Quanto tempo leva a aula “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 Vue Academy?

Sim. Cada aula de Vue 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

  1. Introdução aos Frameworks de Teste
  2. Testes Unitários com Vue Test Utils
  3. Testes de Ponta a Ponta
← Voltar para Vue Academy