O documento introduz o Cypress, uma ferramenta para testes de frontend. Ele descreve a instalação e estrutura básica do Cypress, incluindo comandos úteis e exemplos de como escrever testes que interagem com sites reais como o GitHub e o DuckDuckGo.

1. 09/10/2023, 18:41 StackEdit
https://stackedit.io/app# 1/6
Introdução ao Cypress
O Cypress é uma ferramenta de teste de frontend que ajuda os desenvolvedores a
escrever testes para aplicativos da web. Ele foi projetado para tornar a escrita de testes
end-to-end, de integração e unitários mais fácil e rápida. Vamos abordar os conceitos
básicos do Cypress, como instalá-lo e como escrever e executar seus primeiros testes.
Vantagens do Cypress:
Instalação fácil e rápida.
Não depende do Selenium.
Roda testes diretamente no browser, o que resulta em testes mais rápidos.
Recarrega automaticamente os testes quando os arquivos são alterados.
Fornece uma interface interativa para visualizar os testes sendo executados.
Instalação e Configuração:
1. Instalando o Cypress via npm:
npm install cypress --save-dev
2. Abrindo o Cypress:
./node_modules/.bin/cypress open
Ao executar pela primeira vez, o Cypress criará uma estrutura de pastas com
exemplos de testes.
Estrutura de Pastas do Cypress:
cypress/
|-- fixtures/
|-- integration/
|-- plugins/
`-- support/
fixtures : Arquivos JSON usados para dados de teste.
integration : Testes que você escreverá.
plugins : Extensões ou plugins que você pode escrever ou adicionar.
support : Arquivos de comando e ajudantes reutilizáveis.
Escrevendo seu primeiro teste:

2. 09/10/2023, 18:41 StackEdit
https://stackedit.io/app# 2/6
1. Dentro da pasta integration , crie um arquivo sample_spec.js .
2. Adicione o seguinte código:
describe('Meu Primeiro Teste', function() {
it('Visita a página do Kitchen Sink', function() {
cy.visit('https://example.cypress.io') // visita um URL
cy.contains('type').click() // encontra um elemento com o texto "type"
// Verifica a URL para garantir que ela inclui '/commands/actions'
cy.url().should('include', '/commands/actions')
})
})
3. Abra o Cypress e clique no arquivo de teste. O teste será executado e você poderá
ver os resultados.
Comandos úteis do Cypress:
cy.visit(url) : Visita uma URL.
cy.contains(content) : Procura um elemento com o conteúdo fornecido.
cy.click() : Clica em um elemento.
cy.should() : Faz uma asserção sobre o elemento ou comando anterior.
Conclusão:
O Cypress é uma ferramenta poderosa e moderna para testar aplicações da web. Ele
fornece uma forma rápida e confiável de garantir que seu aplicativo funcione como
esperado em diferentes cenários. Aprender a usar o Cypress pode melhorar
significativamente a qualidade e a confiabilidade de seus aplicativos.
A estrutura de um teste no Cypress é influenciada pelo Mocha, uma popular framework
de testes para JavaScript. Os principais componentes são describe , it , e os
comandos cy . Vamos detalhar essa estrutura:
1. describe e context :
Ambos são essencialmente a mesma função e são usados para agrupar testes
relacionados. Isso ajuda a organizar e descrever o conjunto de testes.

3. 09/10/2023, 18:41 StackEdit
https://stackedit.io/app# 3/6
describe é o método tradicionalmente usado para agrupar testes em Mocha.
context é um alias para describe e pode ser usado da mesma maneira,
permitindo que os desenvolvedores escrevam seus testes de uma forma que
pareça mais legível ou semântica para certos cenários.
describe('Grupo de Testes', function() {
// ... testes aqui ...
});
OU
context('Grupo de Testes', function() {
// ... testes aqui ...
});
2. it :
Dentro de um bloco describe ou context , você define testes individuais usando it .
A função it descreve um único teste.
it('deve executar alguma funcionalidade', function() {
// ... código do teste aqui ...
});
3. Comandos cy :
Dentro de um teste ( it ), você utiliza os comandos do Cypress (todos começando com
cy ) para interagir com sua aplicação, fazer asserções, entre outras coisas.
cy.visit(url) : Navega para uma URL.
cy.get(selector) : Obtém um ou mais elementos DOM.
cy.click() : Clica em um elemento.
cy.type(text) : Digita em um elemento input ou textarea.
cy.should(...) : Faz uma asserção sobre o estado ou comportamento do
elemento anterior.
Exemplo:

4. 09/10/2023, 18:41 StackEdit
https://stackedit.io/app# 4/6
it('deve preencher e enviar o formulário', function() {
cy.visit('/formulario')
cy.get('input[name=nome]').type('João')
cy.get('input[type=submit]').click()
cy.url().should('include', '/obrigado')
});
4. Hooks:
Existem também hooks que permitem definir comportamentos para serem executados
antes de um conjunto de testes ou antes de cada teste. Os mais comuns são:
before() : Roda uma vez antes de todos os testes no bloco.
after() : Roda uma vez depois de todos os testes no bloco.
beforeEach() : Roda antes de cada teste no bloco.
afterEach() : Roda depois de cada teste no bloco.
Exemplo:
describe('Hooks', function() {
before(function() {
// roda uma vez antes de todos os testes
})
after(function() {
// roda uma vez depois de todos os testes
})
beforeEach(function() {
// roda antes de cada teste
})
afterEach(function() {
// roda depois de cada teste
})
// ... testes aqui ...
});
Resumo:

5. 09/10/2023, 18:41 StackEdit
https://stackedit.io/app# 5/6
Um teste típico no Cypress tem a seguinte estrutura:
describe('Descrição do Grupo de Testes', function() {
beforeEach(function() {
// Talvez algum código de configuração aqui
})
it('Descrição do Teste 1', function() {
// Código do teste 1
})
it('Descrição do Teste 2', function() {
// Código do teste 2
})
// ... mais testes ...
});
Vamos criar alguns testes básicos usando sites reais. Tenha em mente que sites reais
podem mudar a qualquer momento, o que significa que os testes podem falhar no futuro
se os elementos ou o comportamento do site mudarem. Para este exemplo, usaremos o
GitHub e o DuckDuckGo.
1. Testando a Busca no GitHub:
Vamos fazer um teste simples para verificar se a pesquisa no GitHub retorna resultados:
describe('GitHub Search', function() {
it('Deve retornar resultados para uma pesquisa', function() {
cy.visit('https://github.com')
cy.get('input[name=q]').type('Cypress{enter}')
cy.get('.repo-list li').its('length').should('be.gt', 0)
})
})
Este teste visita o GitHub, insere “Cypress” na barra de pesquisa, pressiona Enter e, em
seguida, verifica se há resultados na lista de repositórios.

6. 09/10/2023, 18:41 StackEdit
https://stackedit.io/app# 6/6
2. Testando a Busca no DuckDuckGo:
Vamos fazer uma pesquisa simples no DuckDuckGo:
describe('DuckDuckGo Search', function() {
it('Deve retornar resultados de busca', function() {
cy.visit('https://duckduckgo.com')
cy.get('input[name=q]').type('OpenAI{enter}')
cy.get('.result__title').its('length').should('be.gt', 0)
})
})
Este teste visita o DuckDuckGo, realiza uma pesquisa por “OpenAI” e verifica se há
resultados retornados.
3. Testando a Página About no OpenAI:
Vamos verificar se podemos navegar até a página “About” no site da OpenAI:
describe('OpenAI Navigation', function() {
it('Deve navegar para a página About', function() {
cy.visit('https://openai.com')
cy.contains('About').click()
cy.url().should('include', '/about')
})
})
Este teste visita o site da OpenAI, clica no link “About” e verifica se a URL mudou para
incluir “/about”.