Cypress é uma estrutura robusta de testes ponta a ponta desenvolvida para aplicações web. Ele foi projetado para tornar os testes simples e confiáveis, permitindo que desenvolvedores e engenheiros de controle de qualidade testem tudo, desde interações simples até fluxos de trabalho complexos de usuários. Com o Cypress, você pode criar testes que simulam ações do usuário, verificam comportamentos de front-end e garantem a funcionalidade da UI com configuração mínima.

Para que é usado o cipreste?

Cypress é usado principalmente para testes ponta a ponta em aplicativos da web, mas também é eficaz para integração e testes unitários no ambiente front-end. Aqui estão alguns casos de uso comuns:

• Automatizando fluxos de usuários: teste fluxos de usuários complexos, como autenticação, envio de formulários e transações de comércio eletrônico.

• Testando design responsivo: Cypress permite testes em diferentes tamanhos de viewport, tornando-o ideal para testes de design responsivo.

• Teste de regressão: ao automatizar seus casos de teste, você pode verificar rapidamente se novas alterações no código não introduziram bugs.

• Teste de componentes de UI: Cypress pode ser usado com ferramentas como o Storybook para validar componentes front-end isoladamente, garantindo que eles funcionem conforme o esperado em vários cenários.

Cypress fornece um painel poderoso e CLI que permitem a integração perfeita em pipelines de CI/CD, tornando-o uma escolha ideal para testes automatizados e contínuos no desenvolvimento web moderno.

Executando testes com Cypress

Os testes podem ser executados no Cypress de duas maneiras principais: usando o Test Runner (GUI) e a interface de linha de comando (CLI).

Aqui está um guia rápido para ambos os métodos:

Usando o Test Runner (GUI):

Para usar o Cypress Test Runner interativamente com o Cypress Real World App, siga estas etapas. Este aplicativo fornece um exemplo sólido de testes Cypress em ação, com cenários para inscrição de usuários, login e fluxos de transações.

Vamos pegar o aplicativo de amostra da Cypress “Cypress Real World App” como exemplo.

Configurar e executar o aplicativo Cypress Real World localmente:

Estas são as etapas iniciais para configurar o aplicativo de exemplo

git clone https://github.com/cypress-io/cypress-realworld-app
cd cypress-realworld-app
yarn

//run the app
yarn dev

Abrir executor de teste Cypress:

Agora, para abrir o Cypress Test Runner no modo interativo:

Execute o comando:

npx cypress open

Isso iniciará a GUI do Cypress Test Runner, onde você pode visualizar e selecionar testes a serem executados.

Ao clicar em E2E você pode ver este painel que contém a lista completa de testes em cypress/tests.

Vamos criar um novo teste chamado custom.spec.ts em nosso diretório em cypress/tests/ui/custom.spec.ts

describe("User Sign-up and Login", function () {
    beforeEach(function () {
      // Seed the database before each test
      cy.task("db:seed");

      // Intercept signup and login API calls
      cy.intercept("POST", "/users").as("signup");
      cy.intercept("POST", "/graphql").as("gqlRequests");
    });

    it("should redirect unauthenticated user to signin page", function () {
      cy.visit("/personal");
      cy.location("pathname").should("equal", "/signin");
    });

    it("should allow a visitor to sign-up, login, and logout", function () {
        const userInfo = {
          firstName: "Bob",
          lastName: "Ross",
          username: "PainterJoy90",
          password: "s3cret",
        };

      // Sign-up User
      cy.visit("/signup");

      cy.getBySel("signup-first-name").type(userInfo.firstName);
      cy.getBySel("signup-last-name").type(userInfo.lastName);
      cy.getBySel("signup-username").type(userInfo.username);
      cy.getBySel("signup-password").type(userInfo.password);
      cy.getBySel("signup-confirmPassword").type(userInfo.password);
      cy.visualSnapshot("About to Sign Up");
      cy.getBySel("signup-submit").click();
      cy.wait("@signup");

      // Login User
      cy.visit("/signin");
      cy.login(userInfo.username, userInfo.password);


      // Verify successful login
      cy.location("pathname").should("equal", "/");

1. Configuração (beforeEach): antes de cada teste, o banco de dados é propagado para iniciar com um estado consistente, e as chamadas de API para inscrição e solicitações GraphQL são interceptadas para monitoramento.

2. Testes:

* **Redirect for Unauthenticated User**: Checks if an unauthenticated user visiting a restricted page (`/personal`) is redirected to the `/signin` page.

* **Sign-up, Login**: A new user is signed up, logged in, and logged out. The test verifies the user can register, sign in by being redirected to `/signin`.

Cada teste garante funcionalidades críticas para um gerenciamento de contas seguro e fácil de usar.

Observação: tente adicionar um fluxo incorreto de logout e nome de usuário a este

Executando testes da CLI:

Em ambientes de CI ou para execução de testes em lote, a CLI oferece uma abordagem simplificada. Execute todos os testes ou especifique arquivos de teste individuais:

npx cypress run

npx cypress run --spec "cypress/tests/ui/custom.spec.ts"

Benefícios do Cipreste

Cypress é conhecido por sua execução rápida, facilidade de configuração e recursos de teste poderosos. Aqui estão alguns dos principais benefícios:

• Recargas em tempo real e testes interativos: Cypress fornece feedback instantâneo recarregando os testes conforme as alterações são feitas, dando aos desenvolvedores uma visão imediata sobre o comportamento do aplicativo.

• Flake-Free Testing: Graças à sua arquitetura exclusiva, o Cypress reduz a instabilidade nos testes, tornando os resultados dos seus testes mais confiáveis.

• Espera automática: Cypress espera que os elementos sejam carregados, respondidos e renderizados, então você não precisa adicionar esperas explícitas.

• Asserções e zombarias integradas: Cypress vem com um rico conjunto de asserções e ferramentas para simular respostas de API e simular interações do usuário.

Assim como o Cypress oferece suporte a testes E2E eficientes, automatizando as interações do usuário, o Keploy traz uma dimensão poderosa aos testes, concentrando-se no backend.

Cypress se destaca na verificação do frontend e da experiência do usuário, enquanto Keploy o complementa gerando e mantendo automaticamente testes de API sem a necessidade de scripts adicionais.

Keploy é particularmente eficaz para capturar interações do mundo real e transformá-las em testes executáveis, garantindo consistência de back-end e confiabilidade de dados à medida que os aplicativos aumentam.

• Plataforma de testes automatizados: Keploy se concentra na geração de testes automaticamente para serviços de backend, particularmente interações de API e banco de dados.

• Captura e reprodução: Keploy captura o tráfego do mundo real e o reproduz em ambientes de teste, criando casos de teste da vida real.

• Geração de teste sem código: Projetado para ser fácil, ele gera testes sem a necessidade de scripts personalizados.

Teste E2E com Keploy:

• Teste E2E centrado em API: automatiza testes completos para componentes de back-end, garantindo que a funcionalidade de back-end seja verificada como uma unidade.

• Detecção e repetição de erros: captura solicitações/respostas de API, reproduz interações e detecta regressões antecipadamente.

• Validação de dados consistente: rastreia respostas e alterações no fluxo de dados, garantindo precisão em todas as implantações.

• Integração perfeita: integra-se facilmente com pipelines de CI/CD, ajudando as equipes a automatizar verificações E2E em alterações de back-end.

Existem muitas ferramentas neste espaço, cada uma dessas ferramentas fornece recursos adequados para diferentes tipos de ambientes de teste, desde testes específicos de navegador no Puppeteer até compatibilidade entre navegadores no Playwright e Selenium.

A escolha da ferramenta certa depende, em última análise, de suas necessidades de teste e requisitos de aplicação.

Perguntas frequentes

O Cypress pode ser usado para testes de back-end?

Cypress é principalmente uma ferramenta de teste front-end. Embora possa interagir com APIs de back-end e respostas simuladas, ele não foi projetado para testes extensos de back-end. Para testes específicos de back-end, ferramentas como Keploy podem complementar o Cypress, fornecendo recursos de testes unitários e de integração para funcionalidades do lado do servidor.

O Cypress suporta testes entre navegadores?

Sim, Cypress suporta Chrome, Edge e Firefox. No entanto, tem suporte limitado em comparação com ferramentas como Selenium ou Playwright, que oferecem compatibilidade mais ampla entre navegadores.

Como o Cypress lida com os testes de API?

Cypress pode realizar testes de API fazendo solicitações HTTP diretamente do código de teste. Você pode usar cy.request() para validar respostas de API, facilitando o teste de APIs dentro da mesma estrutura de teste ponta a ponta.

Como posso depurar testes Cypress com falha?

Cypress fornece logs detalhados e capturas de tela por padrão, e o Test Runner permite que você interaja visualmente com seus testes. Você pode adicionar .only para isolar testes com falha, usar cy.pause() para interromper a execução e utilizar o Chrome DevTools para depuração adicional.