DEV Community: João Pedro Costi

Como formatar e garantir boas práticas em projetos de automação Cypress utilizando a ferramenta Eslint.

João Pedro Costi — Tue, 23 Aug 2022 21:40:00 +0000

No cotidiano da automação de testes ou em projetos que são criados códigos, um dos principais problemas é garantir a qualidade, seja com boas práticas ou um padrão de formatação.

Uma das maneiras para garantir a qualidade da automação é realizar a revisão de código de outras pessoas (code review), mas isso acaba sendo um processo custoso por necessitar de uma análise critica e correção de problemas. Para nossa sorte, existe uma ferramente que podemos utilizar que já analisa certos de erros de codificação, formata o código conforme o padrão definido e no caso de automação com Cypress, mostra no código onde existem más práticas de automação de testes. A ferramenta que me refiro é o Eslint.

Para fins explicativos criei um repositório no GitHub com os cenários padrões fornecidos pelo Cypress na branch main. Em seguida instalei o Eslint na branch eslint, seguindo os padrões do lint airbnb.

Dentro do arquivo package.json adicionei dois comandos dentro de scripts:

"eslint": "eslint cypress/",
"eslint:fix": "eslint cypress/ --fix"

Ao executar o comando npm run eslint é apresentado no terminal apenas os erros e avisos de formatação ou de codificação, por exemplo, na imagem abaixo é possível ver um erro no arquivo e2e.js com a mensagem semi, no início do erro é possível encontrar qual a linha que está o erro, no caso seria a 17. O erro apresentado diz que está faltando um ; no final do código, no javascript essa regra não é obrigatório, mas como defini para utilizar o lint Airbnb é obrigatório.

O problema do comando a cima é a exaustão de colocar ; em todas as linhas necessárias, ou ter que arrumar o espaçamento de cada linha segundo as regras do lint, mas a boa notícia é que o outro comando npm run eslint:fix já corrige a formatação e apresenta somente os erros de codificação. Quando digo erro de codificação seria uma variável que é declarada mas nunca é usada ou uma importação de um arquivo que não existe.

Na imagem abaixo, executei o comando anteriormente mencionado, em relação à última figura os erros passaram de 818 para 46, isso porque os problemas de formatação foram resolvidos.

Na imagem acima, o Eslint apresentou um erro em que alerta um problema para o cy.wait, isso porque eu instalei uma extensão que verifica boas práticas relacionadas a códigos de projetos cypress, por padrão essa extensão possui as seguintes regras:

Impedir a atribuição de valores em comandos cy;
Evitar espera com cy.wait;
Impedir o uso de async/await em comandos Cypress;

É possível adicionar outras regras, por exemplo, evitar que seja usado {force:true} nos comandos Cypress, para isso adicionei a regra "cypress/no-force": "error" na seção rules dento do arquivo do Eslint, assim uma vez que execute o comando do Eslint, será apresentado erro em todos os comandos que utilizem {force:true}.

Conclusão

A partir do Eslint é possível encontrar erros de formatação e codificação de forma eficiente, essa ferramenta não acaba com a necessidade de code review, mas permite que erros sejam encontrados e corrigidos de uma maneira mais eficiente.

Links

Repositório do no github que apliquei o eslint

Lint do cypress

Eslint

Laços de repetição com funções recursivas e comandos do Cypress

João Pedro Costi — Thu, 04 Aug 2022 19:21:00 +0000

Recentemente me deparei com um problema, onde utilizava cy.wait() para esperar até que dados de um sistema passassem por alguns micro-serviços e fossem refletidos em outro sistema que era uma API, o problema é que utilizando cy.wait() os dados poderiam já terem sido refletidos, mas o Cypress ainda iria continuar esperando o tempo pré-definido.

Buscando então uma solução, pensei em criar uma forma onde o código iria ficar consultando a requisição da Api, durante um certo tempo ou até que o dado fosse refletido.

Inicialmente pensei em utilizar laços de repetição tradicionais (do, while, do while), assim colocaria uma condição onde o loop iria parar caso o número de interações chegasse ao limite ou os dados fossem refletidos na Api. Mas com Cypress isso não é possível, pelo fato desses laços de repetição serem síncronos, mas o comando (cy.request) do Cypress ser assíncrono.

Desta maneira, a outra forma que encontrei foi utilizar funções recursivas, que são funções que chamam a si mesmo até uma certa condição ser satisfeita, uma vez satisfeita a chamada das funções é encerrada.

Exemplo de função recursiva com código do Cypress

Inicialmente criei uma função que recebe como parâmetro um contador, que será o número de tentativas de consulta na API.

function recursiva(contador = 60) {

Em seguida, inseri as informações para realizar a requisição no comando cy.request:

cy
        .request({
            method: 'GET',
            url: 'https://UrlDeExemplo.com.br',
            log: false,
            failOnStatusCode: false
        })

Deixei a flag log desativada para não mostrar todas as requisições no console do Cypress, e também desativei a flag failOnStatusCode para o Cypress não dar erro de execução caso a requisição falhe.

Assim, uma vez o cy.request executado, eu obtenho a resposta da requisição utilizando o comando .then() e salvando o valor na variável resposta.

Dentro .then() é onde coloco as condições para encerrar a chamada de função:

No primeiro if verifico se o status da resposta foi 200, isso significa que o dado foi refletido na API, assim posso encerrar a chamada das funções;
Na segunda, caso o contador chegue a 0, significa que o número total de requisições que defini foi executado e as respostas das requisições continuaram não dando 200, assim considero que os dados não foram refletidos e posso acabar também a execução das funções;
E por último, é caso a requisição não deu 200 e o número de requisições não foram finalizadas, assim decremento um na variável contador e chamo a função novamente passando o novo valor do contador.

.then((resposta) => {
            if (resposta.status === 200) return;
            else if (contador === 0) {
                cy.log('Os dados não foram refletidos');
                return;
            } else {
                const DECREMENTA_CONTADOR = contador - 1; 
                recursiva(DECREMENTA_CONTADOR);
            }
        });

Juntando as partes do código, ele fica da seguinte maneira:

function recursiva(contador = 60) {
    cy
        .request({
            method: 'GET',
            url: 'https://UrlDeExemplo.com.br',
            log: false,
            failOnStatusCode: false
        })
        .then((resposta) => {
            if (resposta.status === 200) return;
            else if (contador === 0) {
                cy.log('Os dados não foram refletidos');
                return;
            } else {
                const DECREMENTA_CONTADOR = contador - 1; 
                recursiva(DECREMENTA_CONTADOR);
            }
        });
}

O código acima pode ser adaptado de acordo com sua necessidade, o que mais é importante é a condição para parar a execução da função.

Conclusão

Utilizando funções recursivas é possível realizar laços de repetição com comandos do Cypress. O principal fato de ter optado por essa escolha foi evitar o uso de cy.wait() e assim diminuir o tempo de execução, mas ainda continuar garantido que se o dado não foi refletido para a API não foi por questão de espera de tempo.

Créditos

Créditos para o Rodrigo Matola que deu idéia de utilizar funções recursivas para resolver o problema.

Linkdin do Rodrigo: https://www.linkedin.com/in/rodrigomatola/

Meu Linkdin:
https://www.linkedin.com/in/jo%C3%A3o-pedro-costi-78a874a2/