Skip to content

Instantly share code, notes, and snippets.

@matefs
Last active April 17, 2023 23:34
Show Gist options
  • Save matefs/d625f2411c23e0ac71c63232cff804f9 to your computer and use it in GitHub Desktop.
Save matefs/d625f2411c23e0ac71c63232cff804f9 to your computer and use it in GitHub Desktop.
O que é cypress, como instalar e como utilizar.

Cypress

Cypress é uma ferramenta de teste end-to-end para aplicativos da web modernos. Ele é construído em cima do Node.js e utiliza o Electron para executar os testes em um navegador real. O Cypress é fácil de configurar e oferece uma ampla variedade de recursos para testes automatizados.

Instalação

Para instalar o Cypress, primeiro certifique-se de ter o Node.js e o npm instalados em seu sistema. Em seguida, execute o seguinte comando no terminal:

npm install cypress --save-dev

Utilização

Para executar o Cypress, execute o seguinte comando no terminal:

npx cypress open

Isso abrirá o painel de controle do Cypress, que permite que você execute seus testes e visualize os resultados em um navegador interno.

Como abrir o cypress sem o autorun

npx cypress open --config watchForFileChanges=false

Estrutura de diretórios

A estrutura de diretórios padrão do Cypress é a seguinte:

Copy code
cypress/
  ├── fixtures/
  ├── integration/
  ├── plugins/
  ├── support/
  ├── videos/
  ├── cypress.json
  └── README.md

  • fixtures/: Contém arquivos de dados que podem ser usados nos testes.
  • integration/: Contém os testes propriamente ditos. Os testes são organizados em arquivos de especificação, que devem ter a extensão .spec.js.
  • plugins/: Contém arquivos de plugin para o Cypress.
  • support/: Contém arquivos de suporte, como arquivos de utilidade e comandos personalizados.
  • videos/: Contém vídeos das execuções dos testes.
  • cypress.json: Arquivo de configuração do Cypress.

Escrevendo testes

Para escrever testes no Cypress, basta criar um arquivo de especificação na pasta integration/. Em seguida, você pode usar as APIs do Cypress para interagir com o aplicativo e verificar os resultados.

Por exemplo, para visitar uma página e verificar se ela contém um título específico, você pode escrever o seguinte código:

describe('Minha página', () => {
  it('tem o título correto', () => {
    cy.visit('https://minha-pagina.com')
    cy.get('h1').should('contain', 'Título da minha página')
  })
})

Este é apenas um exemplo simples, mas o Cypress oferece muitas outras APIs para interagir com o aplicativo e verificar os resultados.

Conclusão

O Cypress é uma ferramenta poderosa e fácil de usar para testes automatizados de aplicativos da web modernos. Com uma configuração simples e uma API intuitiva, o Cypress permite escrever testes confiáveis e manter a qualidade do código em seu projeto.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment