Testes na Web: como o Cypress capacita os programadores para o sucesso

Para os programadores, os testes web são um fator essencial no processo de desenvolvimento. Felizmente, o Cypress fornece aos programadores as ferramentas para testar sites e aplicações de forma eficiente.

O Cypress oferece diversas vantagens em relação aos métodos tradicionais de teste web, como a espera automática pelo aparecimento dos elementos da página antes de interagir com os mesmos e o seu mecanismo de repetição automática para testes com falhas. Além disso, o Cypress é capaz de simular o comportamento do utilizador, permitindo testes robustos de ponta a ponta.

O que é o Cypress?

O Cypress é uma ferramenta de testes front-end baseada em JavaScript que permite aos programadores escrever e executar testes automatizados para aplicações web. Permite testes de ponta a ponta de sites e aplicações, garantindo que todos os aspetos funcionam corretamente.

Vantagens do Cypress:

• Aguarda automaticamente os elementos antes de interagir

• Mecanismo de repetição automatizado

• Simula o comportamento do utilizador

Desvantagens do Cypress:

• Confiança no conhecimento de JavaScript do programador

• Consumo intensivo de recursos e lentidão com testes complexos.

Quando devemos usar o Cypress?

O Cypress é mais indicado para testes end-to-end de aplicações web e websites, onde os developers necessitam de simular o comportamento do utilizador. Deve também ser considerado quando são necessários mecanismos de repetição automatizados ou períodos de espera para os elementos antes de interagir com eles.

O Cypress é uma poderosa ferramenta de teste que pode ser utilizada para testar aplicações web. Mas quando deve usá-la? Há vários fatores a considerar, como a complexidade da sua aplicação e as necessidades de teste da sua equipa.

O Cypress é a escolha ideal para testar aplicações web complexas. A sua capacidade de depurar e executar testes em tempo real, bem como a sua API abrangente, fazem dele uma excelente ferramenta para testar funcionalidades complexas. Além disso, o Cypress oferece uma experiência de teste amigável, com características como espera automática e mensagens de erro inteligentes.

Existem 3 formas de correr o Cypress

• Executar o Cypress a partir da linha de comandos utilizando a CLI do Cypress ou a partir de um script npm. Esta é a forma mais comum de executar o Cypress e permite uma fácil configuração e personalização das execuções de testes.

• Executar o Cypress a partir de um sistema de Integração Contínua (CI), como o Travis CI ou o CircleCI. Isto permite testes automatizados a cada envio de código e garante que os seus testes estão sempre atualizados.

Em última análise, a escolha de utilizar o Cypress dependerá das necessidades específicas da sua equipa e da sua aplicação. No entanto, se procura uma ferramenta de testes poderosa que possa lidar com aplicações complexas e que ofereça uma experiência de fácil utilização, o Cypress é uma excelente escolha.

Como é que usamos o Cypress na Buzzvel?

Na Buzzvel, utilizamos o Cypress para testar as nossas aplicações web. Utilizamos o Cypress para simular o comportamento do utilizador e garantir que todos os aspetos da aplicação estão a funcionar corretamente. Além disso, o mecanismo de repetição automatizada ajuda a detetar erros de forma rápida e eficiente.

Integramos o Cypress com as nossas aplicações React e Laravel. Todos os testes são escritos em JavaScript e executados numa plataforma de integração contínua. Temos observado grandes resultados com a utilização do Cypress, pois ajuda-nos a reduzir significativamente o tempo gasto em testes web.

Exemplo de implementação numa aplicação React

Aqui, vamos ver um exemplo de como utilizar o Cypress para testar uma aplicação Next (React). Embora utilizemos uma aplicação Next.js neste exemplo, o processo pode ser aplicado a qualquer tecnologia web que exponha HTML ao browser. Para começar, terá de ter o Node.js instalado.

Criação de uma aplicação Next para testes

Antes de começarmos a testar o Cypress, precisamos de criar uma aplicação para testar. Para o nosso exemplo, vamos utilizar uma aplicação Next.js simples que inclui uma página de Login e um Painel. O componente Login redireciona para o painel.

Para criar a aplicação Next.js, pode utilizar o seguinte comando:

npx create-next-app

Depois de a aplicação ser criada, navegue até ao diretório raiz e instale as dependências do Cypress:

npm install --save-dev cypress

Adicionar scripts Cypress para package.json

De seguida, precisamos de adicionar scripts Cypress ao ficheiro package.json. Abra o ficheiro package. json e adicione os seguintes scripts à secção de scripts:

"scripts": { 
"dev": "next dev",
"build": "next build",
"start": "next start",
"cypress": "cypress open",
"cypress:headless" : "cypress run"
}

Aqui, adicionámos dois novos scripts: cypress e cypress:headless. Estes scripts permitem-nos abrir o Cypress Test Runner em modo interativo ou executar os nossos testes sem necessitar de interface gráfico, respetivamente.

Criar um ficheiro de configuração Cypress

De seguida, precisamos de criar um ficheiro de configuração para o Cypress. Crie um ficheiro chamado cypress.config.js no diretório raiz do projeto com o seguinte conteúdo:

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    baseUrl: 'http://localhost:3000',
    supportFile: false,
  },
  component: {
    devServer: {
      framework: 'next',
      bundler: 'webpack',
    },
  },
})

O ficheiro cypress. config. js configura o executor de testes do Cypress, incluindo opções como o URL base, a localização da pasta de testes e o browser a utilizar. Permite ainda a criação de opções de configuração personalizadas para otimizar os testes de ponta a ponta para aplicações web.

Agora, podemos criar as páginas de Login e de Painel para a nossa aplicação. No diretório pages do projeto, crie um ficheiro chamado dashboard.jsx com o seguinte código:

const Dashboard = () => {
  return (
    <div>
      <h1>Dashboard</h1>
      <p>You are logged in!</p>
    </div>
  )

}

export default Dashboard;

De seguida, crie um ficheiro chamado login.jsx no mesmo diretório com o seguinte código:

const Login = () => {
  return (
    <form method="post" action="/dashboard">
      <input name="email" type="email" />
      <input name="password" type="password" />
      <input type="submit" title="Login" />
    </form>
  )
}

export default Login;

Escrever um test de Cypress

Por fim, podemos escrever o nosso teste Cypress. Crie a pasta cypress/integration e, em seguida, crie um ficheiro chamado login.cy.js com o seguinte código:

cypress/integration/login.cy.js

describe('Login form', () => {
  it('Logs in successfully', () => {
    cy.visit('/login')
    cy.get('input[name="email"]').type('user@example.com')
    cy.get('input[name="password"]').type('password123')
    cy.get('input[type="submit"]').click()
    cy.location('pathname').should('eq', '/dashboard');
  })
})

Neste teste, visitámos a página de login da nossa aplicação Next.js utilizando o comando cy.visit(). De seguida, utilizamos cy.get() para selecionar os campos de entrada de e-mail e palavra-passe, e cy.type() para introduzir valores nesses campos. Por fim, iremos utilizar o comando cy.get() para selecionar o botão de login e clicar sobre o mesmo. De seguida, utilizaremos cy.location() e cy.should() para verificar se a aplicação redireciona para a rota /dashboard.

Para executar o servidor de desenvolvimento, pode aceder a http://localhost:3000:

npm run dev

Para executar o teste Cypress no modo headless:

npm run cypress:headless

Em alternativa, pode abrir a interface de utilizador do Cypress Test Runner com o seguinte comando:

npm run cypress

Pronto! Com o Cypress, pode testar facilmente a sua aplicação web e garantir que está a funcionar conforme o esperado.

Conclusão

O Cypress é uma ótima ferramenta para os programadores que precisam de testar as suas aplicações e sites web. Oferece diversas vantagens em relação aos métodos tradicionais, como os mecanismos automatizados de espera e repetição. No entanto, tem as suas desvantagens, como a dependência do conhecimento do programador em JavaScript e testes que exigem muitos recursos. Dito isto, quando utilizado corretamente, o Cypress pode ser uma ferramenta inestimável no processo de desenvolvimento.

Obrigado pela leitura. Esperamos que este artigo o tenha ajudado a compreender as vantagens e desvantagens de utilizar o Cypress para testes web, bem como a forma de construir testes com ele. Boa programação!