Autotestes nas
primeiras impressões do Cypress e problemas encontrados
Dmitry Kochergin, Desenvolvedor de Software Líder Luxoft
Em primeiro lugar, gostaria de observar que não sou um autotester profissional, mas um programador Java. Mas um dia surgiu a tarefa de fazer testes de fumaça para verificação básica das principais funções de uma aplicação que foi quebrada recentemente por uma mudança na API do serviço dependente sem avisar.
O artigo será do interesse de todos que estavam interessados em fazer o autotesting do zero em JS, mas tiveram medo de perguntar.
Para começar, nunca li nada sobre autotesting. O principal preconceito era que os autotestes são difíceis, porque de acordo com os comentários, você pode configurar este Selenium ... Além disso, você precisa aprender XPath e PageObject, o que você não queria fazer de jeito nenhum.
Uma busca rápida na Internet resultou em ferramentas mais jovens e promissoras: WebDriver.IO , Pupeteer (e agora o Playwright é melhor) e Cypress. Eu escolhi o último, comprei belas promessas e alguns comentários de holivars sobre as melhores ferramentas para autotestes.
Esta é a aparência da janela do navegador de um teste em execução. À esquerda estão os comandos de teste executados e o status, à direita está a visualização do aplicativo durante a execução do teste:
É assim que o código de teste se parece (no Cypress, todo o código está em JS e os seletores são seletores CSS comuns):
Em tempo de execução, é assim:
Enquanto procurava uma ferramenta para autotestes - tinha uma imagem na minha cabeça que os testes podem ser criados direto no navegador, de forma que eu apenas "cliquei no registro do script" - o sistema gravou minhas ações (seletores CSS dos elementos em que cliquei). Em seguida, examino o teste gerado, ajusto os seletores se necessário e o salvo no Test Suite. Eh ...
O conto acabou sendo inatingível na época e eu não encontrei essas ferramentas (talvez alguém lhe diga o caminho certo nos comentários). Mas Cypress foi subornado pelo fato de que os testes são executados em um navegador real, e você pode até explorar o DOM em paralelo com a execução do teste usando suas ferramentas de desenvolvedor Chrome favoritas (se, por exemplo, o seletor não funcionou, você pode abrir o console e ver imediatamente o porquê quando o teste é executado).
Dos outros parâmetros que eram importantes para mim, eu criticamente não queria gastar muito tempo escrevendo (novamente, escrevendo um teste em um navegador) ou mantendo testes. Isso foi o suficiente para meus objetivos. Apenas para informações sobre o Cypress: desde o momento em que abri o site do Cypress pela primeira vez até o primeiro teste que faz o login no aplicativo, demorou 1 hora.
Cypress, a primeira página do framework, nos diz que este é o JavaScript End to End Testing Framework ( cypress.io ). Em seguida, lemos rapidamente a documentação, ela está realmente completa e você pode encontrar respostas para quase todas as perguntas (eu rapidamente encontrei todo o resto no StackOverflow):
Mais adiante na lista de recursos do site:
- Time travel – – , . , DOM, Chrome devtools.
- Real time reloads – JS , – (hot reload).
- Automatic waiting – , , Cypress . , .
- Network traffic control – Cypress / , .
- Capturas de tela e vídeos - O Cypress grava um vídeo da tela do navegador (MP4) durante o teste, junto com as instruções na janela.
Tudo isso, é claro, pode ser executado sem um navegador aberto em CI, o Chrome sem cabeça ou Electron é usado.
Mas também houve alguns problemas.
No início, eu não sabia que poderia esperar que as solicitações XHR ao servidor terminassem e, em vez disso, inseri tempos limite e os testes cairiam aleatoriamente. Corrigido.
Então o Hot Reload funcionou a cada duas vezes, eu constantemente tinha que reiniciar todo o Cypress, porque não tinha certeza de que minhas alterações foram aplicadas. Acontece que em meu IDE (IntelliJ IDEA) existem essas caixas de seleção incorretas, que também são habilitadas por padrão, por isso, salvar um arquivo não é salvar, mas salvar eventualmente.
O próximo problema é que meu aplicativo estava usando janela de busca para solicitações ao servidor, e Cypress só vê solicitações XHR. O hack sujo do StackOverflow ajudou (eu entendo que o método fetch é removido da janela para que o navegador faça um fallback no XHR em vez de fetch):
Em seguida, houve um problema de emular um navegador móvel, apenas não funcionou no código de teste do agente do usuário, mas em um arquivo especial separado - tudo deu certo.
Então o problema do CORS foi resolvido:
então o upload do arquivo não funcionou do nada, as soluções padrão não funcionaram, mas a biblioteca cypress-file-upload ajudou:
O único problema que não consegui resolver foi a reprodutibilidade do teste. Ou seja, dados iniciais estáveis e idênticos para executar o teste (fixtures), este é mais um problema de configuração, não do Cypress, mas ainda não resolvido.
Como resultado, o Cypress parece uma ótima ferramenta para introduzir o teste automático em um projeto se:
- Ter conhecimento de JS
- Não há necessidade de testar em todos os tipos de navegadores desde o IE6 (o Cypress atualmente oferece suporte a Chrome, Chromium, Edge, Electron, Firefox). Aqui está uma discussão sobre o tópico . Mas posso dizer que há um ano, quando comecei a trabalhar com o Cypress, ele só suportava a versão mais recente do Chrome e Electron para lançamentos sem IU.
- Quer fazer testes rapidamente e esquecê-los até que alguém quebre o aplicativo :)
Cypress: pegue e use!