Neste tutorial, discutiremos o Cypress Automation Framework em detalhes. Estaremos cobrindo o que é Cypress, como ele é diferente de outras estruturas de teste, a arquitetura do Cypress e o procedimento de instalação neste artigo. Cypress é um tópico interessante e divertido de aprender. Vamos começar!

Estrutura de automação cipreste

Cypress Automation Framework é uma ferramenta de teste puramente baseada em Javascript que se concentra principalmente em testes front-end em aplicativos da web modernos. Com o Cypress, os aplicativos são fáceis de testar com a interface visual para testemunhar a execução do teste. Portanto, o Cypress é uma bênção para desenvolvedores e engenheiros de controle de qualidade, tornando a escrita de scripts e a execução de testes fáceis. Além disso, ele vem com um executor de teste distinto, que torna a manipulação do DOM fácil e é executado diretamente no navegador.

Tabela de conteúdo

O que é Cypress?

Cypress é mais rápido, melhor e fornece testes definitivos que são executados em um navegador. Oypress é principalmente comparado ao Selenium, mas é completamente diferente. Cypress não roda sobre selênio, o que significa que é completamente independente. Em vez disso, o Cypress é executado em cima do Mocha, que é novamente uma estrutura de teste rica em Javascript. É compatível apenas com a Chai Assertion Library, que pode acessar uma ampla variedade de asserções BDD e TDD.

Cypress se concentra principalmente em três tipos diferentes de testes. Eles são testes de ponta a ponta, testes de unidade e testes de integração. Cypress pode executar qualquer teste que possa ser executado em um navegador. Além disso, ele vem com diferentes capacidades de simulação e validações que são fascinadas pelos testes front-end.

Os navegadores que o Cypress suporta são Chrome, Firefox, Edge, Electron e Brave. Além disso, o teste entre navegadores é facilmente alcançado com o Cypress. Finalmente, embora o Cypress suporte apenas Javascript, ele também pode ser escrito com Typescript, principalmente escrito com Javascript.

Automação de cipreste

Cypress é uma ferramenta de código aberto com um executor de teste gratuito, mas tem preços que variam para equipes e empresas onde eles cobram pelo Dashboard. No entanto, o Dashboard é gratuito até certo ponto, a menos que você recursos adicionais como detecção de Flake, suporte de e-mail, integração Jira e muitos mais.

Cypress é usado principalmente para automatizar scripts na web (pode automatizar qualquer coisa que seja executada em um navegador). Ele nunca pode ser executado em aplicativos móveis nativos, mas pode automatizar algumas das funcionalidades dos aplicativos móveis se forem desenvolvidos em um navegador.

Funcionalidades

Existem muitos recursos incríveis disponíveis no Cypress que se destacam de qualquer outra ferramenta de automação. Aqui, vamos discutir alguns dos principais recursos e veremos outras partes mais tarde, quando começarmos a escrever nossos casos de teste!

1. Espera automática - O Cypress tem a vantagem da espera automática. Nunca precisaremos adicionar esperas e suspensões forçadas de espera pelo DOM para buscar o elemento. Cypress espera automaticamente por qualquer interação com elementos e execução de asserções. Assim, os testes são rápidos!
2. Viagem no tempo - Cypress captura imagens durante a execução do teste. Podemos visualizar os resultados visualmente em tempo real apenas passando o mouse sobre os comandos executados no Dashboard. Dessa forma, os testes são mais fáceis de depurar
3. Testes de depuração - Cypress pode depurar testes de ferramentas populares como ferramentas de desenvolvedor. Os erros são legíveis e as pilhas são facilmente rastreáveis.
4. Pedidos de stub - Cypress tem opções para confirmar e controlar comportamentos de função, respostas de rede ou temporizadores usados ​​por stubs e espiões.
5. Integração contínua - Cypress não depende de nenhum outro serviço CI adicional. No entanto, ao executar o comando para o teste, a integração é facilmente acessível.

Mito sobre Cypress

Existe um mito de que o Cypress pode ser executado apenas em aplicativos da web compatíveis com Javascript. No entanto, Cypress pode testar qualquer aplicação web construída com Django, Ruby on Rails, Laravel, etc. Além disso, Cypress suporta qualquer uma das linguagens de programação como PHP, Python, Ruby, C #, etc. No entanto, escrevemos nossos testes em Javascript ; além disso, o Cypress funciona em qualquer aplicativo.

Componentes do Cypress

Existem dois componentes principais no Cypress. Eles estão Executor de teste e Painel.

Executor de teste - Cypress fornece este executor de teste exclusivo, onde o usuário pode visualizar os comandos durante a execução e o aplicativo em teste.

Existem alguns subcomponentes no executor de teste. Eles são

1. Log de Comando - Esta é uma representação visual do conjunto de testes. Você pode ver os comandos executados no teste, os detalhes da asserção e os blocos de teste.
2. Menu de status de teste - Este menu mostra o número de casos de teste que foram aprovados ou reprovados e o tempo necessário para a execução.
3. Pré-visualização de URL - Isso fornece informações sobre o URL que você está testando para manter o controle de todos os caminhos de URL.
4. Dimensionamento da janela de visualização - Você pode definir o tamanho da janela de visualização do aplicativo para testar diferentes layouts responsivos
5. Visualização do aplicativo - Esta seção exibe os comandos que são executados em tempo real. Aqui você pode usar Devtools para depurar ou inspecionar cada base.

dashboard: O Cypress Dashboard oferece a capacidade de acessar os testes que estão sendo registrados. Com o serviço Dashboard, podemos testemunhar o número de testes aprovados, reprovados ou ignorados. Além disso, podemos ver instantâneos dos testes que falharam usando cy. comando screenshot (). Você também pode testemunhar o vídeo de todo o teste ou o clipe dos testes reprovados.

Arquitetura Cypress

A maioria das ferramentas de teste é executada no servidor fora do navegador e executa comandos na rede. Mas, o Cypress é executado no navegador onde o aplicativo também está sendo executado. Dessa forma, ele pode acessar todos os elementos DOM e tudo dentro do navegador.

O servidor Node é executado por trás do Cypress no lado do cliente. Assim, o servidor do nó e o Cypress interagem entre si, acompanham e realizam tarefas de suporte à execução. Como ele tem acesso tanto ao front quanto ao back end, a capacidade de resposta do aplicativo em tempo real durante a execução é bem realizada e também pode executar tarefas que podem ser executadas até mesmo fora do navegador.

Cypress também interage com a camada de rede e captura comandos lendo e alterando o tráfego da web. Por fim, o Cypress envia solicitações e respostas HTTP do servidor do nó para o navegador. Como o Cypress opera na camada de rede, ajuda a modificar o código que pode interferir na automação do navegador da web. A comunicação entre o servidor Node e o Browser é via WebSocket, que inicia a execução após o proxy ser iniciado.

Cypress controla todos os comandos executados dentro e fora dos navegadores. Por ser instalado em uma máquina local, ele interage diretamente com o sistema operacional para gravar vídeos, capturar instantâneos, acessar a camada de rede e realizar operações do sistema de arquivos com facilidade. Cypress pode acessar tudo, desde DOM, objetos de janela, armazenamento local, camada de rede e DevTools.

Instale Cypress

Esta seção discutirá o processo de instalação que precisa ser seguido antes de escrever nossos casos de teste. Existem duas maneiras diferentes de baixar o Cypress. Eles estão

1. Instalar via npm
2. Download direto

Antes de instalarmos o Cypress, podemos precisar de alguns pré-requisitos para iniciar a instalação via npm. Vamos ver em detalhes.

Pré-requisitos

Exigiremos certos pré-requisitos antes de escrever nossos casos de teste.

• Conforme discutido acima, o Cypress é executado em um servidor de nó; portanto, teremos que instalar o Node.js.
• Além disso, para escrever nossos casos de teste, precisamos de um editor de código ou IDE.

Neste exemplo, usaremos o Visual Studio Code. Então, vamos mergulhar nos detalhes.

Instalação do Node.js no Mac

Aqui, discutiremos as etapas para baixar o Node.js no Mac. Navegar para https://nodejs.org/en/download/. Agora você vai pousar na página de download.

1.Clique no instalador do macOS. Ao clicar em, você pode encontrar um arquivo de pacote baixado abaixo. Clique no arquivo pkg para instalar o Node.js

2. Depois de clicar no arquivo .pkg, o instalador do Node será aberto. A seção de introdução fornece as versões Node.js e npm. Clique em Continuar

3. Clique no botão Concordo e em Continuar. Um pop-up aparecerá para permitir o acesso aos seus arquivos na pasta Download. Clique em Ok.

4. Nesta seção, você pode selecionar o destino para o qual o Node.js deve ser baixado. Novamente, você pode escolher de acordo com o espaço do seu sistema. Aqui estou escolhendo o local padrão.

5. Clique no botão Instalar. Assim que você clicar, aparecerá um pop-up solicitando a senha do sistema. Digite sua senha e clique em Instalar software.

6. Viva! Instalamos o pacote Node.js e npm. Clique em Fechar para finalizar a instalação.

Instalação de código do Visual Studio no Mac

Instalamos o Node.js. Agora vamos instalar nosso editor de código Visual Studio Code. O código VS é uma ferramenta poderosa que possui todas as funcionalidades embutidas do Javascript. Portanto, vamos mergulhar nas etapas de instalação do Visual Studio Code.

Aqui, discutiremos as etapas para baixar o código do VS no Mac. Primeiro, navegue para https://code.visualstudio.com/download para acessar a página de download do código do VS.

1. Clique no ícone do Mac. Você pode ver um pacote sendo baixado abaixo.

2. Clique no arquivo baixado para descompactar o pacote. Depois de descompactado, você pode encontrar o código do Visual Studio em Downloads no Finder.

3. Viva! Baixamos nosso editor de código. Clique no ícone para abrir o Visual Studio Code.

Criação de um novo projeto Cypress

Veremos agora como criar um novo projeto de nó em nosso Visual Studio Code. Depois de clicar no ícone do código VS, você será direcionado para a página de boas-vindas. Em seguida, clique na pasta Add Workspace para criar uma nova pasta.

Depois de clicar na pasta, você verá um pop-up pedindo para adicionar uma nova pasta. Agora clique no local em que deseja adicionar o espaço de trabalho. Em seguida, clique em Nova pasta e adicione o nome da pasta como CypressProject e clique em Abrir.

Agora criamos uma pasta para nosso teste Cypress. Antes de começar a escrever nossos testes, devemos instalar o arquivo package.json. Antes de instalar, vamos entender o que é o arquivo package.json.

O que é o arquivo Package.json?

Package.json compreende todos os pacotes npm em um arquivo, geralmente localizado na raiz do projeto. Geralmente, ele está localizado no diretório raiz do projeto Node.js. Este arquivo contém todos os metadados aplicáveis ​​necessários para o projeto. Fornece todas as informações ao npm e ajuda a identificar o projeto e lidar com as dependências. O arquivo Package.json contém informações como nome do projeto, versões, licença, dependências e muito mais.
Agora entendemos o que é o arquivo package.json. Portanto, vamos começar as etapas para baixar o arquivo em nosso código do Visual Studio.

1. Para executar nossos comandos, precisamos abrir o Terminal. No topo do código VS, clique no terminal. Quando a lista suspensa abrir, clique em Novo Terminal.

2. Assim que o terminal abrir, digite o comando abaixo no diretório do projeto e pressione Enter.

npm init

3. Depois de pressionar Enter, você pode ver certas informações exibidas. Você pode digitar os detalhes necessários no Terminal e pressionar Enter para obter todos os campos.

• Nome do pacote: Você pode fornecer qualquer nome ao seu pacote. Deixei-o em branco, pois ele é pré-preenchido com o nome da pasta que criamos.
• Versão: Fornece as informações da versão do npm. Você pode pular isso e pressionar Enter.
• Descrição: Aqui, você pode fornecer informações adicionais ao pacote. Se necessário, você pode digitar a descrição e pressionar Enter novamente.
• Ponto de entrada: Representa o ponto de entrada do aplicativo. Como ele é pré-preenchido com index.js, podemos pular este campo e pressionar Enter.
• Comando de teste: Comando fornecido para executar o teste. Aqui não é necessário fornecer nenhum comando, mas, se necessário, você pode fornecer qualquer comando.
• Repositório Git: Este campo requer o caminho para o repositório git. Você também pode deixar este campo em branco.
• Palavras-chave: Palavras-chave exclusivas para ajudar a identificar o projeto. Você também pode pular este campo.
• Autor: Geralmente, é o nome de usuário da pessoa. Você pode adicionar seu nome e pressionar Enter.
• Licença: A licença é pré-preenchida com o ISC. Você pode continuar pressionando Enter.

• 4. Assim que você pressionar Enter, o Terminal solicitará a confirmação listando todos os detalhes que você forneceu. Modelo Sim e pressione Enter novamente.

Agora geramos um arquivo package.json. Você pode visualizar o arquivo em seu editor de código com as informações que fornecemos.

Etapas de instalação do Cypress

Instalamos todos os pré-requisitos para nosso download, nó e npm inicializado do Cypress. Conforme mencionado acima, existem duas maneiras de baixar o Cypress.

Baixe o Cypress via npm

Você terá que passar o comando mencionado abaixo no Terminal para instalar o Cypress. Além disso, você terá que fornecer o comando no diretório do projeto para instalar o nó e gerar o arquivo package.json.

npm install cypress --save-dev

Depois de passar o comando, ele baixará todas as dependências relevantes exigidas para o projeto. No momento da redação deste artigo, a versão mais recente do Cypress era 7.7.0. A versão pode ser diferente no momento do download.

Com referência à imagem acima, você pode ver que baixamos o Cypress. Você pode verificar pela representação baixada no Terminal e pela adição de devDependencies no arquivo package.json.

Download direto

Podemos baixar o Cypress diretamente de seu CDN se você não estiver usando o pacote Node ou npm no projeto. No entanto, o registro dos testes no Dashboard não é possível por meio de download direto.

Você pode fazer o download clicando em download Cypress diretamente deste link. Isso agora fará o download direto do pacote. Assim que o pacote for baixado, abra o arquivo zip e clique duas vezes. O Cypress será executado sem a necessidade de qualquer instalação de dependências. Este download sempre pegará a versão mais recente com base e a plataforma será detectada automaticamente. No entanto, o download do Cypress via npm é recomendado, em vez de um download direto.

Para mais postagens sobre tecnologia, visite nosso Página de tecnologia.

Aishwarya Lakshmi

Olá… eu sou Aishwarya Lakshmi, concluí meu B.Tech e tenho quase 2+ anos de experiência na área de testes. Sou um entusiasta de testes e apaixonado por testes e adoro explorar coisas novas em minha área e compartilhá-las com meus colegas. Gosto de escrever blogs durante meu tempo livre da maneira mais simples, mas eficaz. Como testador, gosto de ter as coisas perfeitas, por isso desejo que meus leitores tenham um entendimento perfeito da tecnologia. Eu me mantenho atualizado com as novas tecnologias relacionadas a testes e passo tempo entendendo-as. Fico feliz em ajudar os alunos a compreender os conceitos dos testes.