Cypress: automatização de testes web e CI

Aprimorando o uso de seletores - Apresentação

Boas-vindas ao curso de testes automatizados com Cypress! Este curso será ministrado pela Camila Pessôa.

Audiodescrição: Camila é uma mulher de cabelos longos, escuros e encaracolados. Ela usa óculos de aro transparente, está com um moletom da Alura e, ao fundo, temos uma parede branca iluminada com tons de azul e verde.

Para quem é este curso?

Este curso é para você que deseja se aprofundar nos recursos da ferramenta Cypress e já possui algum conhecimento em testes automatizados.

O que vamos aprender?

Neste curso, você vai aprender a trabalhar com asserções encadeadas, validações em requisições do lado do servidor e, também, automatização de processos via GitHub.

Além disso, vamos integrar o Cypress Cloud com o nosso repositório do GitHub, realizar a execução de testes em paralelo e, por fim, aprender a utilizar as IAs (Inteligências Artificiais) para melhorar a performance e produtividade.

Todo o aprendizado será aplicado no projeto do VollMed. Vamos conferir, estamos na tela do VollMed, que é uma plataforma que cadastra clínicas e especialistas. Então, vamos testar os botões de entrar, as funcionalidades de login, de logout, dentre outras.

Quais os pré-requisitos do curso?

Para você ter um melhor aproveitamento deste conteúdo, é necessário que tenha realizado os cursos listados como pré-requisitos, ou que tenha alguma familiaridade com desenvolvimento web, Git, GitHub, o uso da ferramenta Cypress e, também, conhecimentos básicos em integração contínua.

Aproveite, também, os recursos da nossa plataforma. Além dos vídeos, temos várias atividades, temos o apoio do Fórum e, também, da comunidade do Discord. Vamos estudar?

Aprimorando o uso de seletores - Configurando uma URL base

O nosso projeto VollMed, que é uma aplicação capaz de realizar cadastro de pessoas especialistas em clínicas e disponibilizar a parte de consulta e de agendamento com essas profissionais, já está no nosso GitHub, e já fizemos o clone desse projeto para a nossa máquina.

Uma das coisas que precisamos analisar nesse momento é o trabalho dos ambientes de configuração do nosso projeto. Por exemplo, se abrirmos o terminal do VS Code, podemos digitar o comando git branch e ele vai retornar quais são as branches que estão nesse projeto. Então, temos a branch de desenvolvimento, main, produção e testes.

É importante saber que estamos trabalhando com o Cypress, que é uma ferramenta de testes. Dessa forma, qual é o ambiente que precisamos utilizar? É o ambiente de testes.

Vamos digitar no nosso terminal git checkout testes, sendo testes o nome da nossa branch. Agora, vamos dar Enter, e trocamos para a nossa branch de testes, o ambiente que está preparado para fazermos todos os testes necessários.

Conseguimos notar que uma pasta chamada cypress já apareceu no Explorador do lado esquerdo, ou seja, o nosso Cypress já foi instalado nesse projeto. E, se quiser conferir, pode olhar no nosso Preparando o Ambiente para ver como o Cypress foi instalado e quais são as configurações iniciais.

Temos, então, mais dois outros diretórios:o server e o web. Esses dois diretórios são os que contêm o nosso projeto de fato. Então, temos o server, que é o servidor do VollMed, e o web, que é a nossa aplicação front-end, toda aquela interface que vamos trabalhar também com o Cypress.

Inicializando a aplicação

Ainda no nosso terminal aqui do VS Code, vamos precisar, agora, inicializar essa aplicação. Para fazer isso, vamos abrir um novo terminal com o VS Code. Você pode ser feito com o atalho Ctrl + Shift + Aspas Simples.

Então, temos um novo terminal, e agora vamos entrar na pasta do server. Vamos digitar no terminal cd server. Entramos no terminal, e vamos dar um npm install. Vamos instalar, agora, todos os recursos necessários para que o servidor do VollMed funcione.

Depois do npm install, vamos dar um npm start para que consigamos inicializar esse servidor. Agora, o que o terminal trouxe para nós? Ele trouxe a informação server running on port 8080, que está dizendo que o nosso servidor está rodando na porta 8080, e que o app data source foi inicializado. Então, a nossa aplicação está funcionando com sucesso, e agora precisamos rodar o front-end.

Rodando o front-end do projeto

Vamos abrir um novo terminal, o VS Code, e vamos, novamente, entrar com o cd web na nossa parte do front-end, e vamos digitar um npm install.

Agora, é só esperar ele instalar os pacotes, e depois de instalado, vamos digitar o npm start. Agora, ele vai rodar o front-end. Ele conseguiu compilar todos os pacotes com sucesso.

webpack compiled successfully

Ele vai abrir para nós, automaticamente, a página do VollMed no navegador, e conseguimos identificar as funcionalidades que vamos trabalhar.

Então, temos o botão de cadastro, onde ele vai para um outro campo de cadastro, temos um botão de entrar, para a pessoa usuária fazer o login no nosso VollMed, dentre as outras funcionalidades que vamos conferir com o Cypress.

Configurando o projeto

Vamos voltar agora para o nosso VS Code. E o que precisamos fazer agora? Precisamos configurar algumas informações. Vamos só esconder o terminal, não vamos encerrá-lo, porque se encerrarmos o terminal, a nossa aplicação não vai funcionar, e aí os testes também não vão rodar. Então, só vamos esconder o terminal para termos mais espaço.

E agora, vamos selecionar o arquivo cypress.config.js. Vamos fechar o explorador para observarmos o que já está configurado aqui. Conseguimos notar que já temos o mochawesome, com algumas configurações para os reports dos nossos testes, temos também a escolha do html como true. Então, é esse tipo de arquivo que o Cypress vai retornar como documentação.

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
         setupNodeEvents(on, config) {
      // implement node event listeners here
    },
    video: true,
      reporter: 'mochawesome',
      reporterOptions: {
        reportDir: 'cypress/results',
        overwrite: false,
        html: true,
        json: false,
        timestamp: "mmddyyyy_HHMMss"
    },
   
  }
});

Instruindo o Cypress a rodar localmente a aplicação

Mas como vamos dizer agora para o Cypress que ele precisa rodar uma aplicação localmente, uma aplicação que está na nossa máquina? Para informar isso para o Cypress, temos uma propriedade que vamos inserir depois desse objeto e2e, ou end-to-end, que se chama baseUrl. Ela vai criar uma URL base.

Essa URL base é o endereço que o Cypress vai identificar todas as vezes que ele precisa rodar os testes.

Então, já deixamos essa URL configurada no arquivo de configurações para facilitar o nosso processo de desenvolvimento dos testes. Ela também aumenta o desempenho dos nossos testes, porque não vamos precisar carregar individualmente em cada teste uma URL.

Isso também vai nos ajudar a refatorar o nosso projeto. Se, por exemplo, quisermos trabalhar depois com outra base URL, ou então com outro local, se nosso arquivo já estiver, por exemplo, em um ambiente online, só substituímos a base URL, já facilita bastante.

E como sabemos qual é a base URL que está rodando localmente no nosso computador? Vamos acessar o nosso navegador na página da VollMed e vamos copiar a URL que o navegador devolve para nós.

Vamos voltar ao VS Code no arquivo cypress.config e vamos inserir, entre aspas simples, a nossa base URL. Então, é o http://localhost:3000/. O que significa isso? Que temos uma aplicação rodando localmente na porta 3000. E é essa a informação que o Cypress sempre vai buscar para rodar os testes.

module.exports = defineConfig({
  e2e: {
         setupNodeEvents(on, config) {
      // implement node event listeners here
    },
    baseUrl: 'http://localhost:3000/',
    video: true,

Vamos salvar, e já temos a nossa base URL configurada. E agora vamos para os nossos testes no próximo vídeo. Te esperamos lá!

Aprimorando o uso de seletores - Encadeando asserções

Já configuramos a nossa base URL do VollMed, mas agora precisamos trabalhar em alguns testes. No Cypress, no nosso diretório de e2e, dos testes end-to-end (de ponta a ponta), notamos que já temos uma suíte de testes, a cadastro-sucesso.cy.js, e ficamos responsáveis por trabalhar nessa suíte.

Vamos abrir esse arquivo para observarmos o que tem nessa suíte de testes. Identificamos que temos vários casos de testes relacionados à página de cadastro.

describe('Página de cadastro', () => {
    beforeEach(() => {
        cy.visit('/');
    })

        it('Clica no link "Cadastra-se" e redireciona para a página de cadastro da clínica', () => {
            cy.get('[href="/cadastro"]').click();

        })

    context('Primeira parte da sessão de cadastro', () => {

        it('Digita dados da clínica e exibe a área para inserção de dados técnicos', () => {
            cy.get('[href="/cadastro"]').click();
            cy.get('[data-test="inputNome"]').type('Catarina P');
            cy.get('[data-test="inputCNPJ"]').type('12598432');
            cy.get('[data-test="inputEmail"]').type('catarina@email.com');
            cy.get('[data-test="inputSenha"]').type('Senha123');
            cy.get('[data-test="inputSenhaVerificada"]').type('Senha123');
            cy.get('.sc-bcXHqe').click();

        })
        
// Trecho de código suprimido

Vamos, então, rodar para ver o que está acontecendo nesses testes. Abrimos o terminal e digitamos o npx cypress open. Após pressionar Enter, ele vai abrir a nossa interface gráfica do Cypress.

Selecionamos o E2E Testing, selecionamos o navegador Chrome, e vai abrir a nossa interface. Selecionamos o teste cadastro-sucesso, e o Cypress começou a rodar os testes, digitou os dados, viu os campos, e agora o último caso de teste, que é cadastrar uma clínica. Aparentemente, todos os testes estão funcionando muito bem.

Mas por que precisamos avaliar e analisar esses testes? Vamos selecionar esse primeiro teste de Clica no link "Cadastre-se" e redirecina para a página de cadastro da clínica.

Temos o nosso before each com a nossa base URL já funcionando. Se notarmos, temos só uma barra (/) como o caminho. Isso significa que ele está automaticamente puxando aquele dado que configuramos na nossa base URL, e aí ele redireciona automaticamente para o localhost:3000.

Em seguida, ele vai para o nosso get na página referência de cadastro. Ele clicou aqui e carregou outra página. Ele funciona, ele faz o clique, só que não temos a certeza se ele realmente foi para a página esperada.

Então, o que poderia acontecer? Clicar na página de cadastro e ele, por exemplo, redirecionar para outra página, ou então não carregar aquela página, e não teríamos como saber.

O que precisamos fazer? Tornar esse teste mais assertivo. Então, vamos voltar para o nosso VS Code para trabalhar com essa informação. Escondemos o nosso painel.

Aprimorando o teste de cadastro

Então, o que precisamos fazer? Ele já clicou no link Cadastre-se, agora precisamos certificar se ele vai redirecionar de fato para a página de cadastro. E como fazemos isso? Após o cy.get e o link da página de cadastro, vamos inserir uma asserção.

Vamos chamar o cy.location(), que é um método também do Cypress, entre aspas, vamos chamar o 'pathname' e, em seguida, vamos chamar a nossa asserção .should, indicando que ele deve fazer algo.

Ele vai verificar se esse pathname é igual à referência que precisamos, que é /cadastro. Então, temos essas informações sendo passadas através desses dois parâmetros e vamos verificar se a nossa asserção vai funcionar.

        it('Clica no link "Cadastra-se" e redireciona para a página de cadastro da clínica', () => {
            cy.get('[href="/cadastro"]').click();
            cy.location('pathname').should('equal', '/cadastro')

        })

Vamos dar um Ctrl + S para salvar e vamos voltar para o nosso Cypress. O Cypress já até rodou o teste, então vamos abrir o nosso caso de teste, e vamos verificar a asserção.

Agora sim, tem uma asserção informando que o que era esperado foi realmente igual à página de cadastro. Então, agora temos certeza que, ao clicar no link, ele vai redirecionar e vai ter o comportamento esperado para a pessoa usuária.

Isso é muito legal implementar nos nossos casos de teste. Vamos voltar para o nosso VS Code, que ainda tem alguns casos de testes que precisam de uma asserção.

Aprimorando o teste de dados da clínica

Agora, vamos entender melhor o nosso próximo caso de teste, que é o Digita os dados da clínica e exibe a área para inserção de dados técnicos.

Temos a digitação dos dados da clínica, como notamos, e tem um clique em uma classe que representa um botão. Vamos voltar no Cypress, no nosso playground, para entendermos o que está acontecendo e sabermos qual é a asserção que vamos inserir aqui.

Abrimos a interface do Cypress e clicamos no caso de teste Digita os dados da clínica e exibe a área para inserção de dados técnicos no menu lateral esquerdo. Olhando o nosso time travel, notamos que ele executa todo, com perfeição, e, por último, ele tem um clique (-click).

Vamos clicar em cima dessa ação de clique, e do lado direito, logo na parte do navegador, notamos outras duas opções, que é o before e after. Isso significa que conseguimos analisar o que foi feito antes da ação e o que acontece depois dela.

Vamos clicar na opção after, que é depois da ação, e olha o que deve aparecer para a pessoa usuária também. Abre uma nova sessão, que vem com os dizeres "Agora, os dados técnicos".

Então, essa informação precisa ser repassada para o Cypress. E, além disso, temos a verificação da nossa classe, que renderiza o nosso formulário. Então, precisamos também ter certeza de que essa classe está aparecendo.

E, agora, no VS Code, já temos o código preparado que faz essas validações. Após o clique, vamos colar o nosso código, e temos a representação de tudo aquilo que analisamos no nosso playground do Cypress, na nossa interface gráfica.

        it('Digita dados da clínica e exibe a área para inserção de dados técnicos', () => {
            cy.get('[href="/cadastro"]').click();
            cy.get('[data-test="inputNome"]').type('Catarina P');
            cy.get('[data-test="inputCNPJ"]').type('12598432');
            cy.get('[data-test="inputEmail"]').type('catarina@email.com');
            cy.get('[data-test="inputSenha"]').type('Senha123');
            cy.get('[data-test="inputSenhaVerificada"]').type('Senha123');
            cy.get('.sc-bcXHqe').click();
            cy.contains('h2', 'Agora, os dados técnicos:').should('be.visible');
            cy.get('.sc-laZRCg').should('exist').should('be.visible');

        })

Temos o cy.contains, que vai verificar se o nosso título H2, com o texto "Agora, os dados técnicos" está visível. Então, o .should, que é o método be.visible, e temos a captura daquela classe que renderiza o nosso formulário.

Então, o cy.get na nossa classe e o .should('exist'). Esse exist vai verificar se aquela classe existe no nosso código, e temos um outro .should encadeado, que vai verificar não somente se ela existe, mas se ela está visível para a pessoa usuária (be.visible).

Isso é necessário em casos de, por exemplo, aparecer algum pop-up na tela ou, então, ter algum elemento que não foi renderizado corretamente. Então, é importante trabalhar com esse tipo de asserção encadeada também. Além disso, temos o nosso último caso de teste, que é o Cadastra uma clínica.

Aprimorando o teste de cadastro de clínicas

E para termos certeza de que a pessoa usuária conseguiu cadastrar uma clínica, podemos fazer uma última asserção. No comportamento da nossa aplicação, do nosso front-end, após a pessoa realizar um cadastro, ele redireciona para a página de login.

Então, já temos um código preparado também, que vamos colar após o nosso clique no botão cadastrar, que é o que vai verificar com o cy.location se a nossa página de redirecionamento é igual à página de login.

        it('Cadastra uma clínica', () => {
            cy.get('[href="/cadastro"]').click();
            cy.get('[data-test="inputNome"]').type('Catarina P');
            cy.get('[data-test="inputCNPJ"]').type('12598432');
            cy.get('[data-test="inputEmail"]').type('catarina@email.com');
            cy.get('[data-test="inputSenha"]').type('Senha123');
            cy.get('[data-test="inputSenhaVerificada"]').type('Senha123');
            cy.get('.sc-bcXHqe').click()
            cy.get('[data-test="inputTelefone"]').type('9999999999');
            cy.get('[data-test="inputCEP"]').type('99999999');
            cy.get('[data-test="inputRua"]').type('Salvatori');
            cy.get('[data-test="inputNumero"]').type('999');
            cy.get('[data-test="inputComplemento"]').type('Irmãos salvatori');
            cy.get('[data-test="inputEstado"]').type('BA');
            cy.contains('Cadastrar').click();
            cy.location('pathname').should('equal', '/login');

        })

Então, agora os nossos testes estão bem mais assertivos, eles conseguem determinar muito melhor. E, então, agora os nossos testes estão conseguindo validar, de fato, se aquelas informações na tela da pessoa usuária estão aparecendo e se a nossa aplicação está funcionando como esperado.

Vamos salvar o nosso arquivo e podemos voltar até para o playground do Cypress para ver se está tudo funcionando da forma esperada. Vamos rodar os testes novamente e, ao clicar nos nossos casos de testes, conseguimos visualizar que as nossas asserções estão funcionando corretamente.

Ele está mostrando o texto e a classe, e é isso que precisamos saber, é essa informação que precisamos. No próximo vídeo, vamos entender também como podemos melhorar ainda mais a nossa suíte de testes. Te esperamos lá!

Sobre o curso Cypress: automatização de testes web e CI

O curso Cypress: automatização de testes web e CI possui 149 minutos de vídeos, em um total de 64 atividades. Gostou? Conheça nossos outros cursos de Quality Assurance em Programação, ou leia nossos artigos de Programação.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Aprimorando o uso de seletores
• Melhorando asserções
• Requisições via Cypress
• Integração Contínua e Cypress
• IA generativas e produtividade