Qualidade
Realizando upgrade para a versão 10 do Cypress
3 minutos de leitura
A nova versão do Cypress conta com uma interface bem mais amigável que instrui o usuário a criar o projeto de forma mais simples. Foi adicionada a feature de Teste de componente que está em fase beta.
A nova versão conta com muitas outras novidades que podem ser conferidas aqui.
Partindo do contexto que o seu projeto já está instalado, porém, a versão dele é inferior a 10, deverá ser realizado os seguintes passos:
Execute no terminal o comando:
npx cypress open
Ou se preferir, utilize o comando que customizou dentro da propriedade Scripts no package.json do seu projeto, no meu caso está assim:
"scripts": {
"cy:open": "cypress open"
}
Logo após ter executado o comando o Test Runner será aberto.
![](https://cwi.com.br/wp-content/uploads/2022/08/5fdb6472-bcc9-4e8b-9037-05c006dc5703.png)
Perceba que ao lado inferior direito temos um alerta de que tem uma nova versão disponível (10.3.1). Mais abaixo podemos ver a versão instalada no projeto (9.6.0).
Ao clicar em cima da versão instalada no seu projeto, será a aberto um modal.
![](https://cwi.com.br/wp-content/uploads/2022/08/543d794f-2b57-4c15-8cb6-059356bf3346.png)
No meu caso, utilizo o NPM gerenciador de pacotes do Node.js então copiarei o seguinte comando:
npm install --save-dev [email protected]
Após ter executado o comando, cheque o arquivo de package.json e veja na propriedade de devDependencies se o Cypress está na versão especificada de acordo com o comando executado.
"devDependencies": {
"cypress": "^10.3.1"
}
Rode o projeto novamente e verá que o Cypress já está de cara nova.
![](https://cwi.com.br/wp-content/uploads/2022/08/aa428537-bc29-46fb-908f-569db15efbde.png)
Clique em Continue to Cypress e a tela de Migration Helper será aberta.
- Migrando specs existentes: Nesse passo é informado os arquivos de specs que precisarão ter sua pasta de caminho alterada conforme ilustrado na imagem.
![](https://cwi.com.br/wp-content/uploads/2022/08/7fd8e497-6aef-4ac7-87a9-8ea8a58ce846.png)
2. Renomear arquivos de suporte: Todos os arquivos de suporte serão renomeados para o novo padrão especificado pelo Cypress conforme ilustrado na imagem.
![](https://cwi.com.br/wp-content/uploads/2022/08/9efa6e43-7460-4aba-9cbf-d0625dbe35ef.png)
3. Mudança no arquivo de configuração: O arquivo padrão cypress.json não irá mais existir, dando espaço para o novo arquivo com a extensão .JS conforme ilustrado na imagem.
![](https://cwi.com.br/wp-content/uploads/2022/08/ea138744-f681-4c67-b93f-091570888a09.png)
Ao concluir o terceiro passo, mais uma tela de “Bem-vindo” será apresentada. Clique na opção de E2E Testing que acabamos de configurar.
![](https://cwi.com.br/wp-content/uploads/2022/08/96362551-8b2d-491a-87a5-f22c8ee1e0ef.png)
Selecione o navegador de sua preferência e continue.
OBS: Mais browser podem ser adicionados para os seus testes.
![](https://cwi.com.br/wp-content/uploads/2022/08/e797f2f4-2f05-496d-b9f8-2fcf89c3c1ae.png)
E por fim, um Test Runner de cara nova.
![](https://cwi.com.br/wp-content/uploads/2022/08/b3f06b9e-911d-4a0b-8b76-c3e5f6d47a27.png)
O Runner conta 3 itens no menu:
- Specs: que basicamente será onde o dev/tester irá visualizar os testes implementados rodando.
- Runs: é a parte onde se conecta com o Dashboard onde podem ser vistos relatórios de execuções de testes, métricas, entre outros…
- Settings: Onde podem ser feitas configurações no projeto, Dashboard e do dispositivo.
Desejo que este artigo ajude as pessoas que querem atualizar a versão do Cypress em seu projeto, se beneficiando das novas funcionalidades. E espero também que tenham gostado do conteúdo. Até a próxima!
Referência: