cypress-example

Projeto para desenvolver habilidades na ferramenta cypress. Veja mais informações das lições aprendidas na Wiki

Como usar

• Instalação
  • Tecnologias
  • Clone
  • Execução na interface
  • Execução modo headless
  • Integração contínua
• Exemplos
• Time

Instalação

Tecnologias

• Nível básico

  • NodeJS
  • NPM
  • JavaScript
  • Cypress
  • Mocha

• Nível Intermediário

  • Faker

• Nível Avançado

  • Faker
  • Cypress localStorage
  • Standardjs

• Teste de regressão visual

  • Percy

Não possui nenhuma ferramenta na máquina? Ou quer saber mais sobre as ferramentas, veja mais informações em Tecnologias para execução do nível básico, Tecnologias para execução do nível intermediário e Tecnologias para execução de teste de regressão visual

Clone

Clone este repositório para sua máquina local usando comando abaixo:

$ git clone https://github.com/jalussa-santos/cypress-example.git

Execução na interface

Acessar a raiz do repositório

$ cd /{diretorio}/cypress-example

Execute comando para instalar as dependências listadas na seção de devDependencies do arquivo package.json

npm install

Execute comando para abrir a UI do cypress

npx cypress open

Na UI do cypress

- Clicar em </> Tests
- Clicar em Integration tests
- Clicar em exampleBasico
- Clicar em tickets.spec.js

Execução modo headless

Acessar a raiz do repositório

$ cd /{diretorio}/cypress-example

Abrir o git bash Execute comando

npm test

Este comando irá executar o comando cypress run configurado em scripts do package.json. Veja mais em Linhas de comando

Integração Contínua

• Configuração do yml para execução do cypress no Gitlab-ci.

Veja mais na Wiki Configurações Gitlab-CI

• Configuração do yml para execução do cypress no Github Actions.

Veja mais na Wiki Configurações Github Actions

Veja mais na Wiki Integração contínua - Nível intermediário

Exemplos

• Nível básico

  • Acessar URL
  • Preencher campo de texto
  • Interagir com selectbox
  • Interagir com radiobutton
  • Interagir com checkbox
  • Criar assertions
  • Interagir com button
  • Teste end-to-end
  • Criar comandos customizados

• Nível Intermediário

  • Usando faker
  • Usando autocomplete
  • Interagindo com a URL
  • Indentificando elemento com contains
  • Utilizando request do cypress para teste de api
  • Otimizando teste de GUI com chamada a api nas pré-condições
  • Teste de GUI com muitas pré-condições
  • Interagindo com execução a nível de sistema
  • Realizando leitura de arquivo

• Nível Avançado

  • Interceptando solicitações e respostas
  • Repetição de execução da função/teste
  • Teste com simulação de erro de servidor e de rede
  • Testando independente api
  • Selecionando elementos de forma mais específica
  • Lendo o localStorage do navegador
  • Simulando um atraso na chamada à API
  • Validando requisições em cache
  • Análise de código e refatoração com standardjs

• Teste de regressão visual

  • Criando snapshot
  • Exemplo de validação de estados da aplicação
  • Controlando a renderização
  • Execução na pipeline Github
  • Execução na pipeline Gitlab
  • Integração com cypresspluginsnapshots

Time

Jalussa dos Santos | Linkedin | Github | Gitlab