Como formatar e garantir boas prticas em projetos de automao Cypress utilizando a ferramenta Eslint.

No cotidiano da automao de testes ou em projetos que so criados cdigos, um dos principais problemas garantir a qualidade, seja com boas prticas ou um padro de formatao.

Uma das maneiras para garantir a qualidade da automao realizar a reviso de cdigo de outras pessoas (code review), mas isso acaba sendo um processo custoso por necessitar de uma anlise critica e correo de problemas. Para nossa sorte, existe uma ferramente que podemos utilizar que j analisa certos de erros de codificao, formata o cdigo conforme o padro definido e no caso de automao com Cypress, mostra no cdigo onde existem ms prticas de automao de testes. A ferramenta que me refiro o Eslint.

Para fins explicativos criei um repositrio no GitHub com os cenrios padres fornecidos pelo Cypress na branch main. Em seguida instalei o Eslint na branch eslint, seguindo os padres 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 formatao ou de codificao, por exemplo, na imagem abaixo possvel ver um erro no arquivo e2e.js com a mensagem semi, no incio do erro possvel encontrar qual a linha que est o erro, no caso seria a 17. O erro apresentado diz que est faltando um ; no final do cdigo, no javascript essa regra no obrigatrio, mas como defini para utilizar o lint Airbnb obrigatrio.

O problema do comando a cima a exausto de colocar ; em todas as linhas necessrias, ou ter que arrumar o espaamento de cada linha segundo as regras do lint, mas a boa notcia que o outro comando npm run eslint:fix j corrige a formatao e apresenta somente os erros de codificao. Quando digo erro de codificao seria uma varivel que declarada mas nunca usada ou uma importao de um arquivo que no existe.

Na imagem abaixo, executei o comando anteriormente mencionado, em relao ltima figura os erros passaram de 818 para 46, isso porque os problemas de formatao foram resolvidos.

Na imagem acima, o Eslint apresentou um erro em que alerta um problema para o cy.wait, isso porque eu instalei uma extenso que verifica boas prticas relacionadas a cdigos de projetos cypress, por padro essa extenso possui as seguintes regras:

• Impedir a atribuio de valores em comandos cy;
• Evitar espera com cy.wait;
• Impedir o uso de async/await em comandos Cypress;

possvel adicionar outras regras, por exemplo, evitar que seja usado {force:true} nos comandos Cypress, para isso adicionei a regra "cypress/no-force": "error" na seo 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}.

Concluso

A partir do Eslint possvel encontrar erros de formatao e codificao de forma eficiente, essa ferramenta no acaba com a necessidade de code review, mas permite que erros sejam encontrados e corrigidos de uma maneira mais eficiente.

Links

Repositrio do no github que apliquei o eslint

Lint do cypress

Eslint