Como formatar e garantir boas práticas em projetos de automação Cypress utilizando a ferramenta Eslint.
Published: 2022-08-23 21:40:00

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](https://eslint.org/docs/latest/user-guide/getting-started#installation-and-usage).

Para fins explicativos criei um repositório no [GitHub](https://github.com/joaocosti/lint-husky-with-cypress/tree/main) com os cenários padrões fornecidos pelo Cypress na _branch_ main. Em seguida instalei o [Eslint](https://eslint.org/docs/latest/user-guide/getting-started#installation-and-usage) na _branch_ eslint, seguindo os padrões do _lint_ [airbnb](https://github.com/airbnb/javascript).

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.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ox6maxjsj3a1fksqrhjl.png)

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.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6f51gils3x802uj7eks1.png)

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] (https://github.com/cypress-io/eslint-plugin-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}`.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/88m1k4mhhg3lx1hfkag3.png)

**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] (https://github.com/joaocosti/lint-husky-with-cypress)

[Lint do cypress](GitHub - cypress-io/eslint-plugin-cypress: An ESLint plugin for projects that use Cypress)

[Eslint](https://eslint.org/docs/latest/user-guide/getting-started#installation-and-usage)