Olá a todos!
Meu nome é Roman Mostafin. Eu sou um testador automatizado na Clover e geralmente escrevo autotestes em pytest + selênio. Recentemente, nossa equipe de desenvolvimento front-end começou a usar o Cypress para escrever testes de interface do usuário no projeto Smart Locomotive para automatizar os testes de regressão. Ofereci-me para ajudá-los e estava imbuído dessa tecnologia. Neste artigo, falarei sobre o Cypress e sobre como criar meu primeiro teste nele.Cypress é uma estrutura relativamente nova para escrever testes de Javascript. Ele implementa seu navegador e injeta testes no código das páginas.Cypress tem as seguintes vantagens:- suporta a gravação de testes modulares, de integração e de ponta a ponta,
- tem boa documentação
- tem uma interface amigável e intuitiva para iniciar, visualizar e depurar,
- possui utilitários úteis para simplificar a gravação de testes.
Como resultado, temos uma estrutura universal e conveniente para escrever vários tipos de testes.Teoria
Para escrever um teste, são necessárias seis funções básicas. Considere-os e alguns argumentos para eles, que são necessários como exemplo.1. cy.visit ()
Este método é usado para ir para a página do aplicativo. Como argumento, é preciso uma string com o endereço da página do aplicativo:cy.visit(‘http:
2. cy.get ()
Este método é usado para obter um elemento do modelo DOM de uma página da web. Leva os seguintes argumentos:- localizador de elementos - o endereço no qual o elemento pode ser encontrado;
- timeout - tempo durante o qual o cypress procurará um elemento na página (por padrão, são 4 segundos).
cy.get(‘div[class=”topbar”]’, {timeout: 3000})
3.type ()
O método .type é usado para preencher formulários de texto e vários campos. Possui os seguintes argumentos:- O texto a ser inserido é o texto em uma representação de sequência. Além disso, o texto pode indicar comandos do teclado destacados com chaves;
- timeout - o atraso antes de executar o comando type.
cy.get(‘input’).type(‘Hello world’, {timeout: 3000})
4. cy.wait ()
Este método é usado para parar temporariamente a execução de comandos. Também pode ser usado para aguardar a conclusão de solicitações HTTP. Ele tem o argumento timeout - diretamente o timeout.cy.wait(3000)
5. cy.fixture ()
Este método é usado para obter dados de teste. Aceita o nome do arquivo json como entrada.6. cy.should ()
Método para verificar a expressão. Aceita os seguintes argumentos:- um comando para comparação é uma condição na qual um elemento será verificado;
- resultado esperado - o resultado esperado da verificação.
Prática
Pegue o formulário de autorização Yandex e, como exemplo, verificaremos a autorização com um login inexistente e a autorização com uma senha inexistente. Para fazer isso, faça os preparativos preliminares:1. Crie uma pasta para o novo projeto.2. Vá para a pasta do projeto e execute o comando para instalar o Cypress:npm install cypress --save-dev
3. Execute o comando cypress:npx cypress open
4. Após iniciar, verifique se a seguinte hierarquia aparece no diretório do projeto:
Agora você precisa criar um dispositivo elétrico. Precisamos disso para separar os dados do teste do próprio teste.1. Crie um arquivo 'cypressTest.json' na pasta 'fixtures' com o seguinte conteúdo:
2. Em seguida, na pasta 'integration', crie um arquivo chamado 'habr_cypress_test.spec.js':
3. Faça uma descrição de todo o caso de teste usando a função ' descreva ':
4. Dentro da função' descreva ', criaremos nossos testes. Escreveremos o título do primeiroteste:
5. O próximo passo é escrever a chamada de dados do dispositivo:
E, finalmente, criamos o teste em si, usando o conhecimento das funções do Cypress.
Por analogia, criamos o segundo teste.
Vamos ao aplicativo Cypress, localizamos nosso teste e clicamos no nome.Em
seguida, a página do navegador executando o Cypress é aberta e o teste é iniciado: à esquerda em uma coluna separada, você pode ver as etapas detalhadas do processo. Você precisa aguardar a conclusão do teste.
Parabéns, você escreveu seus primeiros testes de Cypress!PS:Gostaria de agradecer à nossa equipe de front-end, e em particular à Adele Khamatov, por sua ajuda na aprendizagem do Cypress no projeto.