Alura > Cursos de Programação > Cursos de Quality Assurance > Conteúdos de Quality Assurance > Primeiras aulas do curso Cypress: automação de testes E2E

Cypress: automação de testes E2E

Introdução ao Cypress - Apresentação

Olá, a instrutora Carol te dá as boas-vindas ao curso de Cypress.

Caroline Carvalho é uma mulher de pele clara com cabelos castanhos, longos e cacheados. Tem olhos castanhos escuros e usa óculos com armação marrom redonda. Está com uma blusa preta com estampa. Ao fundo, estúdio com iluminação azul. À direita, uma estante com decorações e um letreiro do logotipo da Alura.

Se você deseja aprender mais sobre automatização de testes, ou se já atua como QA (Quality assurance) e quer aprimorar seus conhecimentos, continue conosco. Vamos fazer exatamente isso durante nossas aulas.

No decorrer do curso, vamos aprender a automatizar, analisar e planejar testes, levando em consideração os cenários relacionados ao nosso projeto. Também aprenderemos a gerar diferentes formatos para a saída dos nossos relatórios de teste, conforme sua necessidade de uso deles.

Além disso, vamos criar comandos personalizados e utilizar dublês de testes, seguindo as melhores práticas para a construção do nosso cenário, casos e scripts de teste. Tudo isso, faremos na prática.

O projeto para o nosso teste será o AluraPic. Trata-se de uma aplicação completa, composta por front-end, API e back-end. Isso nos dará um escopo bem maior para construir diferentes tipos de teste e poder explorar melhor o Cypress durante o nosso curso.

Você também deve aproveitar os recursos disponíveis em nossa plataforma. Além dos vídeos, temos várias atividades para você desenvolver durante as aulas. Há ainda o apoio e a companhia de uma comunidade muito amigável no fórum, além da equipe presente no Discord da Alura.

Dito tudo isso, vamos estudar?

Introdução ao Cypress - Preparando o ambiente em vídeo

Vamos organizar tudo antes de começar a realizar nossos testes em Cypress?

Instalação do Node

Nosso primeiro passo será a instalação do Node.

Durante o curso de Cypress, utilizaremos o AluraPic para fazer os nossos testes. Para rodar o AluraPic na nossa máquina, precisamos de uma versão específica do Node.

Para fazer esse controle de versões do Node dentro do Windows, vamos utilizar uma ferramenta chamada NVM for Windows. Dentro da documentação oficial dela no GitHub, encontramos um instalador: o arquivo nvm-setup.exe. Clicaremos nele para fazer o download.

Feito o download, podemos encontrar o arquivo onde foi salvo no explorador de arquivos do computador. Clicaremos nele para executar a instalação.

Após aceitar os termos de uso, avançaremos para as próximas telas e concluiremos a instalação, clicando em "Finish".

Em seguida, vamos até a barra de pesquisa do Windows e procuramos pelo Prompt de Comando, buscando "cmd". Clicaremos nele com o botão direito do mouse e selecionaremos a opção "Executar como administrador".

No CMD, digitaremos o comando nvm install junto da versão do Node que queremos instalar; no caso, a versão será a 16.13.1:

nvm install 16.13.1

Então, pressionamos "Enter" para fazer a instalação.

A mensagem de retorno indica que a instalação foi concluída e já está nos fornece o comando que precisamos digitar para poder utilizar de fato essa versão:

nvm use 16.13.1

Digitamos esse comando no CMD e pressionamos "Enter".

Podemos usar o seguinte comando para ver quais versões estão sendo utilizadas e qual está instalada no computador:

nvm ls

No caso, temos apenas a versão 16.13.1 que acabamos de instalar juntos, mas se houvessem outras, elas também seriam listadas e a que está sendo utilizada seria apontada.

Instalando o Cypress

Com o Node instalado e configurado, vamos instalar o Cypress. Acessando a página oficial do Cypress, verificamos um comando que precisamos executar para fazer a instalação. Vamos copiá-lo e colar no Prompt de Comando:

npm install cypress --save-dev

Depois pressionamos "Enter" e aguardamos a instalação do Cypress.

Com a instalação concluída, posso executar o seguinte comando para ver o Cypress em execução:

npx cypress open

Com isso, abrimos a interface do Cypress.

Instalação do AluraPic

O próximo passo será instalar o AluraPic na nossa máquina. Para isso, utilizaremos o link disponibilizado na seção "Preparando o Ambiente" (em texto):

Link para download do AluraPic

Após salvar o arquivo .zip fornecido no download, acessaremos a pasta onde ele está localizado e extrairemos o conteúdo desse arquivo, clicando com o botão direito na pasta, selecionando "Extrair Tudo" e confirmando a ação.

Abrindo essa pasta extraída, encontraremos outra pasta dentro dela que também precisa ser extraída: alurapic-main. Repetiremos o processo.

Precisamos chegar ao diretório que contém a lista de todos os arquivos visíveis, como vscode, api, e2e, node_modules, etc. Precisamos ter tudo claramente visível.

Para evitar um caminho muito grande para levar depois para o Prompt de Comando, recortaremos a última pasta que tem os dados realmente necessários (alurapic) e voltaremos para a Área de Trabalho, colando-a lá.

Agora, podemos excluir as outras duas pastas alurapic-main, que já estão vazias.

Vamos abrir a pasta alurapic que acabamos de levar para a Área de Trabalho. Na barra de endereço do Windows, vamos copiar o endereço do Desktop até o alurapic.

Então, abrimos o Prompt de Comando. Vamos pressionar "Ctrl + C" para interromper a execução do Cypress. Confirmo que desejamos interromper digitando s.

Em seguida, rodamos o comando cls para limpar a tela.

Agora, vamos digitar o comando cd, seguido de um espaço, e colar aquela URL até alurapic, como o da instrutora:

cd C:\Users\adria\Desktop\alurapic

E pressionamos "Enter".

Já temos o Prompt de Comando apontando até o diretório do alurapic!

O próximo passo é instalar o AluraPic definitivamente na máquina, com o comando:

npm install

Com a instalação concluída, podemos executar o seguinte comando para realmente executar localmente o AluraPic:

npm start

Pressionamos "Enter" para rodar o AluraPic na máquina. Esperamos o carregamento.

Enquanto isso, já começam a ser exibidos alguns dados que temos dentro da plataforma, como o nome dos usuários, por exemplo. Ele também indica a porta em que está iniciando a execução.

Com a instalação concluída, ele informa que o projeto foi compilado.

Para descobrir qual porta nós acessaremos no navegador, subimos um pouco a nossa tela ao início da execução do código. Ele indica que devemos abrir no navegador usando a porta 4200:

... open your browser on http://localhost:4200/

Vamos copiar este código e colar no navegador, apertando "Enter" depois. Agora nós temos o AluraPic funcionando!

Instalação do VS Code

Na página oficial do Visual Studio Code, você pode fazer o download do instalador. Em seguida, executamos esse arquivo.

Podemos aceitar os termos de uso e seguir para o próximo passo. Criaremos um atalho na Área de Trabalho e seguir para o próximo passo: Instalar.

Com a instalação finalizada, vamos solicitar o início do Visual Studio Code após a conclusão. Clicamos em "Concluir" e o Visual Studio Code é aberto.

Qual será o último passo para começarmos nossos testes? Clicaremos no topo esquerdo do Visual Studio Code, na opção "File > Open Folder".

Criaremos uma pasta para o nosso projeto de testes. Vamos até a área de trabalho, clicamos com o botão direito nela, selecionamos a opção "Novo > Pasta".

Daremos o nome de curso-cypress para ela. Pressionaremos "Enter" para salvar a pasta, a abriremos e clicaremos em "Selecionar Pasta".

Perfeito! Está tudo configurado para começarmos nossos testes. Vamos lá?

Introdução ao Cypress - Conhecendo o cenário de teste

Vamos conhecer melhor o cenário do nosso projeto?

Basicamente, um cenário de teste é composto pelo projeto, site ou aplicativo que pretendemos verificar se está funcionando corretamente, levando em consideração a experiência da pessoa que vai usá-lo quando estiver pronto.

Em nosso caso, o cenário de teste será o AluraPic e precisamos garantir que todas as funcionalidades da página estejam funcionando. O AluraPic é um site para hospedagem de imagens.

Nesse sentido, a pessoa usuária precisa criar um cadastro no site para, posteriormente, conseguir fazer o login e hospedar suas imagens. Para automatizar esses processos de verificação e preenchimentos, utilizaremos o Cypress.

Instalação do Cypress

No VSCode, já criamos a pasta do projeto, abrimos o terminal do VSCode com "Ctrl + `" para abrir o Cypress e começar a digitar os primeiros passos do teste.

Dentro do terminal, usarei o comando npx cypress open para iniciar o Cypress e pressionar "Enter" para executar.

npx cypress open

Caso o Cypress não esteja instalado, será necessário instalar o pacote. Basta digitar y para confirmar que queremos continuar.

Pode ser que o Cypress demore um pouco para carregar dependendo do computador e da conexão com a internet.

Assim que o Cypress carrega, a temos uma interface com alguns menus. No canto superior esquerdo, temos um menu com opções de file (arquivo), edit (editar), view (visualizar), window (janela), help (ajuda), entre outras.

No canto superior direito, temos a versão atual do Cypress com um link para a documentação dessa versão. Há também uma opção para acessar a documentação dele, que fornece os primeiros passos, referências, como construir a parte de integração contínua e entrega contínua (CI/CD). Por fim, também temos uma área para login.

Neste momento, vamos nos concentrar na parte onde está escrito E2E (end-to-end) testing, que é o teste que pretendemos construir. Após escolher essa opção, são listados os documentos para a configuração do projeto: cypress.config.js, cypress\support\e2e.js, cypress\support\commands.js e, por fim, um JSON.

Vamos criar o projeto clicando no botão "Continue". Em seguida, vamos escolher em qual o navegador queremos executar. As opções apresentadas levam em consideração os navegadores instalados no seu computador. No nosso caso, usaremos o Chrome.

Feito isso, clicamos em "Start E2E Testing in Chrome".

Agora, chegamos na criação do teste na tela "Create your first spec". Há uma biblioteca com alguns exemplos que podemos usar, mas criaremos um teste do zero. Por isso, vamos selecionar "Create New Spec".

Será solicitado o nome desse teste da pasta do projeto. É sugerido o nome spec.cy.js, mas vou modificar para testando.cy.js. Também temos o caminho do teste dentro dos diretórios, que será "cypress > e2e".

Após clicar em "Create spec", o framework exibe a estrutura do código que será criado dentro desse projeto.

cypress\e2e\testando.cy.js:

describe('template spec', () => {
    it('passes', () => {
        cy.visit('https://example.cypress.io')
    })
})

Podemos clicar em "Okay, run the spec" e colocar o teste para rodar.

passes

visit https://example.cypress.io

Após executar, abre um painel à esquerda onde podemos conferir que o teste passou. Além disso, o Cypress explica que o teste está fazendo uma visita para a URL example.cypress.io.

Do lado direito, temos o carregamento dessa página de exemplo que é uma página padrão que o Cypress usa para realizar o primeiro teste.

Vamos voltar no VSCode para conferir o que foi feito por lá enquanto o teste estava sendo executado. A ferramenta criou uma pasta "cypress" e, dentro dela, as pastas "e2e", "fixtures" e "support".

Dentro do "e2e", temos o nosso primeiro teste testando.cy.js onde foi inserido o comando cy.visit() para carregar da página de exemplo.

O interessante é que o Cypress proporciona uma sintaxe bastante simples e compreensível, fornecendo uma estrutura praticamente pronta para criar nossos próprios testes.

Vamos começar a aplicar isso carregando a página do AluraPic no próximo vídeo.

Sobre o curso Cypress: automação de testes E2E

O curso Cypress: automação de testes E2E possui 131 minutos de vídeos, em um total de 50 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:

Aprenda Quality Assurance acessando integralmente esse e outros cursos, comece hoje!

Plus

De
R$ 1.800
12X
R$109
à vista R$1.308
  • Acesso a TODOS os cursos da Alura

    Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

Matricule-se

Pro

De
R$ 2.400
12X
R$149
à vista R$1.788
  • Acesso a TODOS os cursos da Alura

    Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Luri powered by ChatGPT

    Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com Luri até 100 mensagens por semana.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas