- Primeiramente é necessário inicializar o
Node
, dento da pasta selecionada, executar o comando:
npm init -y
- Logo após inicializar o
Node
será necessário instalar oCypress
npm i cypress@12.14.0 -D
Observação:
Allure report
estava dando problemas com a versão docypress
acima de12.14.0
- Inicializar o
Cypress
npx cypress open
- No terminal executar o seguinte comando, e escolhas as opções que fizerem sentido para você:
npm install eslint@8.43.0 --save-dev
# Ou
npm i eslint@8.43.0 -D
- Após execute o comando:
npx eslint --init
Ou copie o código abaixo no arquivo .eslintrc.json
// .eslintrc.json
{
"env": {
"browser": true,
"commonjs": true,
"es2021": true,
"node": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 12
},
"rules": {
"indent": [
"error",
2
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"never"
],
"no-trailing-spaces": [
"error"
]
}
}
- No terminal executar o comando:
npm install eslint-plugin-cypress@2.13.3 --save-dev
# Ou
npm i eslint-plugin-cypress@2.13.3 -D
- Logo após dentro do diretório
cypress/
, crie um arquivo.eslintrc.json
com o seguinte conteúdo:
{
"extends": [
"plugin:cypress/recommended"
],
"rules": {
"cypress/no-force": "error",
"cypress/assertion-before-screenshot": "error",
"cypress/no-pause": "error"
}
}
Agora que o ESLint
está configurado, é hora de criar scripts para validar o código estaticamente, além de corrigir erros automaticamente (quando possível).
- No arquivo
package.json
, crie um script chamadolint
com o valoreslint cypress/**/*.js && eslint cypress.config.js
- Ainda no mesmo arquivo, crie um
script
chamadolint:fix
com o valoreslint cypress/**/*.js --fix && eslint cypress.config.js --fix
- Por fim, execute o comando
npm run lint
para analisar o código existente estaticamente, e caso necessário, execute também o comandonpm run lint:fix
Alguns problemas serão corrigidos automaticamente, porém, se você ver os erros abaixo, não se preocupe
5:21 error 'on' is defined but never used no-unused-vars
5:25 error 'config' is defined but never used no-unused-vars
✖ 2 problems (2 errors, 0 warnings)
- No terminal executar o comando para instalar o plugin:
npm i @shelex/cypress-allure-plugin@2.40.2
- No arquivo
cypress.config.js
, adicionar a importação do plugin doshelex
que vem doallura-plugin
const allureWriter = require('@shelex/cypress-allure-plugin/writer')
- Ajuste na linha do
setupNodeEvents
para a criação doAlluraReport
.
setupNodeEvents(on, config) {
allureWriter(on, config)
return config
},
Com objetivo da implementação de novos testes, foram instalado os seguinte plugins:
# Cypress Plugin API
npm i cypress-plugin-api@2.11.1 -D
# Cypress Plugin XHR Toggle
npm i cypress-plugin-xhr-toggle@1.0.0 -D
O arquivo cypress-config.js
deverá ter a seguinte estrutura final:
const { defineConfig } = require('cypress')
const allureWriter = require('@shelex/cypress-allure-plugin/writer')
module.exports = defineConfig({
chromeWebSecurity: false,
e2e: {
baseUrl: 'http://lojaebac.ebaconline.art.br',
testIsolation: false,
setupNodeEvents(on, config) {
allureWriter(on, config)
return config
},
env: {
hideCredentials: true,
requestMode: true,
hideXhr: true,
},
experimentalRunAllSpecs: true,
},
})
A configuração dos script, foi estrutura da seguinte forma:
"scripts": {
"allure:report": "allure generate allure-results --clean",
"allure:open": "allure open",
"cypress:web": "npx cypress open",
"cypress:headless": "npx cypress run --env allure=true",
"lint": "eslint cypress/**/*.js && eslint cypress.config.js",
"lint:fix": "eslint cypress/**/*.js --fix && eslint cypress.config.js --fix"
},
- No terminal na linha de comando, executar o comando, para o
Cypress
roda em modoheadless
.
npx cypress run --env allure=true
# Ou
npm run cypress:headless
- No terminal na linha de comando, executar o comando para geração do
allure results
npm run allure:report
- Logo após o execute o comando, para abrir no browser o
AllureReport
npm run allure:open
No meu caso para facilitar a execução dos comando, tenho o seguinte plugin instalado:
npm i ntl -g
Que abre no terminal a opção para escolher quais script
quero executar de acordo com a criação dos mesmo.