Testes end-to-end são excelentes pois refletem as ações dos usuários. Essa categoria de testes se comportam como um humano real, validando várias partes da aplicação ao mesmo tempo. O Cypress, é um novo test runner com a premissa de testes rápidos, fáceis e confiáveis para qualquer coisa que seja executada em um navegador.
OBS: O ideal é sempre fazer um teste falhar, após fazer ele passar e por fim a refatoração. Mas afim de estudos do Cypress, a maioria dos exemplos não seguiram essa ordem.
O que vem a seguir
- Instalação do Cypress
- Configuração do ambiente de testes
- Fazendo nosso primeiro teste
- Executando nosso primeiro teste
- Verificando um elemento da página
- Testando a responsividade de nossos elementos
- Como podemos nos aprofundar
Instalando Cypress
Podemos utilizar o npm para instalar, digite no seu terminal:
npm install --save-dev cypress
Se tudo ocorrer bem, agora podemos escrever nossos primeiros testes.
Configuração dos testes
Vou utilizar como exemplo meu site pessoal. Por padrão o Cypress espera que os testes de integração estejam dentro das pastas cypress/integration, então teremos que criá-las.
Caso não queira utilizar esse caminho padrão, você pode criar um arquivo de configuração cypress.json na raiz do seu projeto, com qualquer caminho que desejar.
Testando o título da página
Nosso primeiro teste é muito simples, apenas testar se o título da página está funcionando corretamente.
Dentro da pasta cypress/integration criei um arquivo chamado sample-spec.js
describe('Personal website home page', () => {
it('contains "Tailo Mateus Gonsalves" in the title', () => {
})
})
A describe possui dois argumentos, uma string com o assunto e uma função de callback que executa qualquer código, dentro dessa função vamos poder incluir vários it (vários testes). A função it também espera dois parâmetros. O retorno da função deve verificar nossa afirmação do teste contra a realidade.
Para testar a página inicial teremos que dizer onde ela está. Como todos os nossos testes serão feitos nessa página, podemos adicionar em um lugar que sempre é executado antes dos testes:
describe('Personal Website home page', () => {
beforeEach(() => {
cy.visit('https://tailomateus.github.io/')
})
it('contains "Tailo Mateus Gonsalves" in the title', () => {
cy.title().should('contain', 'Tailo Mateus Gonsalves)
})
})
No exemplo acima adicionamos a função cy.visit() no nosso beforeEach, com isso garantimos que antes de executar um teste, o código vai saber qual é a página que estamos testando. Estamos afirmando que o título da página contém o nome “Tailo Mateus Gonsalves”, você pode ver aqui outras asserções suportadas.
Rodando nosso primeiro teste
Como o Cypress não está instalado globalmente, temos que adicionar o caminho da pasta bin, dentro da nossa pasta node_modules. Use esse comando na raiz do projeto:
(npm bin)/cypress open
Na minha máquina ficou assim o caminho:
node_modules/cypress/bin/cypress open
Se tudo ocorrer bem, essa interface vai abrir:
Interface Cypress
O arquivo que criamos está disponível para que possamos executar nosso teste. Temos uma interface, onde conseguimos visualizar como nossa página está se comportando e os resultados obtidos.
Executando os testes
Verificando um elemento na página
Agora vamos verificar se um elemento realmente esta presente na página. Neste teste vamos validar se a imagem do perfil esta visível.
Como estamos testando a mesma página, podemos fazer no mesmo describe, apenas adicionando um novo it.
it('has a visible profile picture', () => {
cy.get('.img_profile').should('be.visible')
})
Este teste usa cy.get() para capturar o elemento. Se o elemento estiver sendo carregado de forma assíncrona, essa função vai esperar por defaultCommandTimeout para aparecer (o valor padrão é 4 segundos e pode ser configurado em cypress.json).
Resultado dos nossos testes:
Verificando elemento
Mas, se por algum motivo cometermos algum erro no teste, veja como vai ser o resultado:
Erro na verificação do elemento
Testando a responsividade
Vamos fazer um teste um pouco diferente. Atualmente tenho que ter a certeza que o site vai funcionar em dimensões diferentes. Dessa forma, todos os usuários consigam usar corretamente.
Como ainda estamos testando a mesma página, apenas acrescentaremos outro describe dentro do existente. Aqui testamos o tamanho de 320px de largura e verificamos se a imagem de perfil ainda esta visível. Para alterar a largura para este teste, podemos utilizar cy.viewport().
describe('with a 320x568 viewport', () => {
beforeEach(() => {
cy.viewport(320, 568);
})
it('has a visible mobile profile picture', () => {
cy.get('.img_profile').should('be.visible')
})
})
Por padrão o tamanho é 1000×660, mas podemos alterar no arquivo de configuração, cypress.json mencionado anteriormente. Você pode testar qualquer dimensão, veja como ficou nosso teste no mobile:
Testes em mobile
Quero me aprofundar
Na própria documentação você vai encontrar vários exemplos. Porém se quiser algo visível, quando instalar o Cypress, vai ter uma pasta chamada “examples” com mais de 100 testes para serem executados.
Outros tipos de testes
Como você pode ver na imagem, existe vários tipos de funções. Uma coisa legal e que não foi explorado neste artigo, é como o Cypress fica entre as respostas ajax e o front-end. Podemos controlar os resultados que recebemos do servidor.
A medida que seu projeto vai ganhando novas funcionalidades, as chances de erros acontecerem aumentam consideravelmente. E sei bem que você não quer isso. Então, basta testar e começar implementar em seus projetos.
Os códigos dos exemplos estão no GitHub.
Créditos e Referências:
Documentação Cypress An Intro to Web Site Testing with Cypress