Aprimore seus testes web com nosso tutorial do framework Cypress.

 

O que é cipreste?

Nos dias de hoje DevOps e a era da nuvem, na qual os aplicativos da web estão passando por desenvolvimento contínuo e implantação contínua Com a crescente demanda por soluções de automação de testes, há uma necessidade cada vez maior de inovação também nos frameworks de automação de testes. O Cypress é um framework de automação de testes ponta a ponta que se adapta a ambientes de aplicações web modernas. É um framework JavaScript que roda em Node.js. Usando o Cypress, você pode escrever e executar testes de integração, unitários e ponta a ponta de forma rápida e fácil.

O Cypress vem com um Test Runner de código aberto, fácil de configurar e usar. Você pode escrever e executar testes localmente todos os dias usando este Test Runner. Quando os conjuntos de testes estiverem prontos, você pode integrá-lo à ferramenta de CI e registrar os testes usando o Dashboard. O Test Runner permite que você acompanhe a execução dos comandos. Você não precisa instalar servidores, dependências ou drivers. O Cypress é amigável para desenvolvedores. Os testes são fáceis de entender.

Ao capturar instantâneos dos testes, o Cypress permite que você saiba o que está acontecendo em cada etapa. Quando um teste falha, você pode depurá-lo diretamente usando ferramentas como o Chrome DevTools. À medida que você faz alterações no teste, o Cypress o recarrega automaticamente. Não há problemas de assincronia.

Qual a diferença entre Cypress e Selenium?

Como o Selenium é a estrutura de automação de testes mais popular no segmento de código aberto, o Cypress é frequentemente comparado a ele. No entanto, ambas as ferramentas diferem fundamentalmente em arquitetura e funcionalidade. Enquanto os testes do Selenium são executados fora do navegador e controlam o navegador usando o protocolo JWP, o Cypress é executado no mesmo loop da aplicação do navegador. Portanto, ele tem acesso nativo a todos os objetos que a aplicação possui.

Devido à diferença na arquitetura, o Selenium é mais adequado para testes de ponta a ponta, enquanto o Cypress é mais rápido e, em alguns casos, mais confiável.

Instalação de ciprestes

Instalar o Cypress é bastante simples e fácil. O framework oferece duas opções para instalar o Cypress.

1. Ferramenta de linha de comando
2. Aplicativo de área de trabalho

Passo 1: Instale o Node.js e o Node Package Manager (npm)

O Cypress é um framework JavaScript que roda em Node.js. Portanto, instale o Node.js antes de instalar o Cypress. A versão LTS atual é a 12.8.1. O npm também vem incluído no Node.js, então você não precisa instalá-lo separadamente. A versão atual do npm é a 6.14.5. Você pode visitar o site do Node.js e baixar a versão LTS aqui: https://nodejs.org/en/download/

Instale o Node.js usando o arquivo .msi.

Aceite o contrato de licença.

Selecione a pasta do Node.js e clique em Avançar.

Na configuração personalizada, escolha os recursos que deseja instalar. Você pode clicar em Avançar e instalar os itens padrão.

Se você deseja executar módulos npm a partir de C/C++, precisa instalar as ferramentas para módulos nativos. Caso contrário, basta clicar em Avançar.

Na tela seguinte, clique em Instalar.

Conclua o processo de instalação.

Para verificar se o Node.js e o npm foram instalados corretamente, abra o prompt de comando e digite os seguintes comandos:

• nó –v
• npm –v

Passo 2: Crie uma pasta de projeto

Para salvar todo o trabalho em uma única pasta, crie uma nova pasta e navegue até ela.

• mkdir experiênciacypress
• cd experiênciacypress

Etapa 3: crie um arquivo package.json

Para criar um arquivo package.json, digite o seguinte comando no prompt de comando.

• npm inicialização -y

Passo 4: Instale o Cypress usando o npm

Navegue até a pasta do projeto e digite o seguinte comando para instalar o Cypress a partir da linha de comando.

• npm install cypress --save-dev

Aguarde alguns minutos, pois o programa precisa baixar e instalar os arquivos binários necessários.

Passo 5: Abra o cipreste

Agora, o Cypress foi instalado com sucesso. Para abrir o Cypress Test Runner, digite o seguinte comando no prompt de comando.

• .node_modules.bincypress aberto

Ao abrir o programa pela primeira vez, será criada uma pasta de exemplo com arquivos de script de teste.

Agora o Cypress está pronto para uso.

Crie seu primeiro teste

Para executar seu primeiro teste, crie um arquivo de teste na pasta de integração criada pelo Cypress. Aqui, o arquivo de teste é nomeado como experitest_sample.js.

• Toque em experitestcypress/cypress/integration/experitest_sample.js

Como o Windows não reconhece o comando de toque, crie o arquivo .js manualmente na pasta de integração. Para isso, abra um arquivo de texto e salve-o com a extensão .js.

Ao abrir o Test Runner, será exibido o arquivo experitest_sample.js que você criou.

Executando o primeiro teste

Para executar o primeiro teste, você pode usar qualquer IDE para editar o arquivo experitest_sample.js. Para este teste, abra o arquivo .js, adicione este código simples e salve o arquivo.

[javascript] describe('Experitest First Test', () => { it('First test is successful!', () => { expect(true).to.equal(true) }) }) [/javascript]

Agora, clique no arquivo no Test Runner e o navegador será aberto para executar o teste.

Neste caso, o navegador Chrome está sendo controlado por um software de teste automatizado.

Agora abra o arquivo experitest_sample.js e altere 'First test' para 'Second test'. Ao salvar o arquivo, o navegador será atualizado automaticamente e exibirá os novos resultados.

Aqui está outro exemplo. Abra o arquivo experitest_sample.js, digite este código e salve-o:

[javascript] describe('Site da Experitest', () => { it('Abre o site da Experitest', () => { cy.visit('https://experitest.com') }) }) [/javascript]

Ao salvar, o Test Runner abrirá o site da Experitest no navegador.

Portanto, o Test Runner está funcionando perfeitamente. Você pode escrever diferentes scripts de teste e executá-los!

Execute seu teste a partir da linha de comando.

Para executar este script de teste a partir da CLI, digite o seguinte comando no prompt de comando:

• npx cypress run –record –spec “cypress/integration/experitest_sample.js”

Após a execução bem-sucedida do teste, a ferramenta exibirá os resultados.

Instalando a ferramenta Cypress Desktop

Para instalar a ferramenta para desktop, acesse o site da Cypress e baixe o software Cypress Desktop:

https://www.cypress.io/

Este é o link direto para baixar a ferramenta para desktop:

https://download.cypress.io/desktop

Após baixar o arquivo zip, descompacte o software e abra o aplicativo Cypress.

Agora, selecione a pasta do seu projeto e comece a usar o Test Runner.

Basta clicar no arquivo JavaScript e a ferramenta executará o teste.

Utilizando o framework Cypress para automação de testes.

O framework Cypress, que, como demonstramos, funciona muito bem para automação de testes de ponta a ponta, é uma ótima solução para testar aplicativos web modernos. Por ser um framework JavaScript executado em Node.js, todos os seus testes podem ser escritos facilmente. Neste artigo, também analisamos o Test Runner. Vimos como é simples trabalhar com ele e como você pode acompanhar a execução de comandos sem precisar instalar servidores, dependências ou drivers. Claro, se você quiser ver como ele funciona com a nossa plataforma SeeTest, fique à vontade para conferir. Clique aqui e inscreva-se para um teste gratuito do SeeTest. Para experimentar você mesmo. Visite também Digital.ai Continuous Testing Para saber mais sobre como nosso produto de testes pode beneficiar sua empresa, entre em contato.

Guy Arieli – Diretor de Tecnologia