5-Dicas-gerais.md

2.5 - Dicas gerais

Scripts úteis no package.json

Adicione estes scripts ao seu package.json para facilitar o dia a dia:

{
  "scripts": {
    "cy:open": "cypress open",
    "cy:run": "cypress run",
    "cy:run:headed": "cypress run --headed",
    "cy:run:chrome": "cypress run --browser chrome"
  }
}

Assim você pode rodar com npm run cy:open em vez de npx cypress open.

TypeScript

O Cypress tem suporte nativo a TypeScript. Para ativar, instale as dependências:

npm install typescript --save-dev

Crie um tsconfig.json na raiz do projeto:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "node"]
  },
  "include": ["cypress/**/*.ts"]
}

Renomeie seus arquivos de .js para .ts e .cy.js para .cy.ts. O Cypress vai compilar automaticamente.

Variáveis de ambiente

Nunca coloque credenciais diretamente nos testes. Use variáveis de ambiente:

cypress.config.js:

module.exports = defineConfig({
  e2e: {
    env: {
      apiUrl: 'http://localhost:3001/api',
    },
  },
})

Nos testes:

const apiUrl = Cypress.env('apiUrl')
cy.request(`${apiUrl}/users`)

Via linha de comando:

npx cypress run --env apiUrl=http://staging.meusite.com/api

Via arquivo .env (com plugin):

Instale o cypress-dotenv para usar arquivos .env.

Importante: Adicione .env ao seu .gitignore para não commitar credenciais.

O arquivo .gitignore

Um .gitignore básico para projetos Cypress:

node_modules/
cypress/videos/
cypress/screenshots/
cypress/downloads/
.env

Recarregamento automático

Enquanto estiver com npx cypress open rodando, qualquer alteração nos arquivos de teste vai recarregar o teste automaticamente. Aproveite esse ciclo rápido para desenvolver os testes.

Dica: use data-cy nos seletores

Em vez de selecionar elementos por classes CSS ou IDs que podem mudar, use atributos data-cy no HTML da aplicação:

<!-- No HTML da aplicação -->
<button data-cy="submit-button">Enviar</button>

// No teste
cy.get('[data-cy="submit-button"]').click()

Isso desacopla os testes das decisões de estilo e torna os seletores muito mais estáveis.

---

Ir para: 3.1 Seletores