Introdução | Cypress | Test & QA

• Introdução | Cypress | Test & QA

---

success

Site para realizar testes: https://demoqa.com/

info

Github com exemplos completos: 🔗 Clique aqui

---

Pré-requisitos

Antes de instalar o Cypress, você precisa ter:

✅ Node.js

• Versão recomendada: LTS (18 ou superior)
• Verifique se está instalado:

node -v
npm -v

Se não estiver instalado:

• https://nodejs.org/

---

✅ Editor de código (opcional, mas recomendado)

• VS Code

---

Criando um projeto do zero

Crie uma pasta para o projeto:

mkdir estudos-cypress
cd estudos-cypress

Inicialize o projeto Node.js:

npm init -y

Isso cria o arquivo package.json.

---

Instalando o Cypress

Instalação local (recomendada)

npm install cypress --save-dev

O Cypress será instalado como dependência de desenvolvimento.

Verifique se instalou corretamente:

npx cypress --version

---

Abrindo o Cypress pela primeira vez

Execute:

npx cypress open

Na primeira execução, o Cypress irá:

• Criar a pasta cypress/
• Criar arquivos de configuração
• Abrir a interface gráfica (Cypress App)

---

Escolhendo o tipo de teste

Ao abrir o Cypress App:

1. Escolha E2E Testing
2. Aceite a configuração automática
3. Selecione o navegador (Chrome, Edge, Electron etc.)
4. Clique em Start E2E Testing

---

Estrutura de pastas do Cypress

Após a configuração inicial, a estrutura padrão será:

cypress/
 ├── e2e/           # Testes E2E
 ├── fixtures/      # Massa de dados (JSON, mocks)
 ├── support/       # Commands e configurações globais
 └── downloads/     # Arquivos baixados nos testes
cypress.config.js
package.json

---

Criando o primeiro teste

Crie um arquivo dentro de cypress/e2e:

cypress/e2e/hello-world.cy.js

Conteúdo:

describe('Hello World Cypress', () => {
  it('Deve visitar o site do Cypress', () => {
    cy.visit('https://www.cypress.io')
    cy.contains('Testing').should('be.visible')
  })
})

---

Rodando os testes

Modo interativo (GUI)

npx cypress open

• Clique no arquivo de teste
• Veja o teste rodando passo a passo

---

Modo headless (terminal)

npx cypress run

• Ideal para CI/CD
• Executa todos os testes automaticamente

---

Scripts no package.json (boa prática)

Edite o package.json:

"scripts": {
  "cy:open": "cypress open",
  "cy:run": "cypress run"
}

Agora você pode usar:

npm run cy:open
npm run cy:run

Opções do CLI ao executar o Cypress

    "runner": "cypress open --e2e --browser chrome --env demoVariable=demoValue",

Opção	Descrição
open	Abre Cypress GUI
run	Executa headless
--spec	Arquivo específico
--browser	Define navegador
--headed	Abre navegador
--env	Variáveis de ambiente
--config	Configurações rápidas
--record	Cypress Cloud
--parallel	Execução paralela
--retries	Retry automático

---

Configuração básica (cypress.config.js)

Exemplo mínimo:

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    baseUrl: 'https://example.cypress.io',
    viewportWidth: 1280,
    viewportHeight: 720
  }
})

Agora você pode usar:

cy.visit('/')

---

Executando um teste específico

npx cypress run --spec "cypress/e2e/hello-world.cy.js"

---