Cypress

O que é

  • Ferramenta de testes útil que simula o funcionamento de um usuário interagindo com o sistema diretamente no frontend.
  • Os testes são criados em javascript e podem ser executados pela interface visual do Cypress ou direto na linha de comando.
  • Por debaixo dos panos o Cypress utiliza os eventos do DOM, portanto é uma ferramenta com uma ótima performance.
  • Utiliza sintaxe padrão do Mocha.

Como usar

Instalando o Cypress com npm install cypress além de adicionar o Cypress ao projeto, vai fazer o download do executável do Cypress e fazer a configuração no projeto. Após isso você já consegue rodar utilizando os seguintes comandos (adicionar no package.json para facilitar):

# Abrir ferramenta visual do Cypress
node_modules/.bin/cypress open
# ou
npx cypress open

# Rodar testes diretamente pelo console (só ver os resultados)
node_modules/.bin/cypress run

O frontend deve estar rodando quando for usar os comandos pois ele acessa ele pela URL e não pelo código.

Escrevendo testes

  • De uma forma simples conseguimos escrever testes incríveis:

    // cypress/integration/example.spec.js
describe("Um teste incrível", () => {
  it("o teste", () => {
    cy.visit("a-url-da-pagina");
    cy.get("seletor-do-seu-elemento-em-tela").type("um texto aleatório");
  });
});

  • E dessa forma escrevemos em um elemento em tela (nesse caso um input, textarea ou algo do tipo)

  • Se já estiver com o comando open rodando, ao salvar este arquivo o teste já se inicia na aba que o cypress criou.

Práticas comuns

  • Criar comandos para funções repetitivas

É comum que testes repitam alguma sequência de passos em comum. É possível criar comandos customizados do cypress para melhorar esse processo. Estes comandos devem ser criados no arquivo cypress/support/commands.js. Por exemplo, para realizar login:

Cypress.Commands.add("login", () => {
  cy.visit("http://localhost:3000/login");

  cy.get("#input-login").type("email@email.com");
  cy.get("#input-password").type("senha");

  cy.get("#login-button").click();
});
// Este comando pode ser usado nos testes como cy.login();
  • Comandos before e beforeEach

Em cada especificação de testes, é possível adicionar comandos como before e beforeEach que vão executar antes de cada teste definido no arquivo. Por exemplo:

beforeEach(() => {
    cy.login();
});
  • Upload de imagens

Utilizando a biblioteca cypress-file-upload é possível realizar testes que fazem upload de imagens. Após instalar a biblioteca, basta importá-la no arquivo cypress/support/commands.js e utilizar o comando cy.get("input[type=file]").attachFile("img/person.jpg") para anexar arquivos ou fixtures durante os testes.

  • Iterar por múltiplos elementos na tela

Quando é preciso acessar vários elementos por um mesmo seletor, o comando .each() permite iterar por estes elementos. Exemplo:

// selecionar primeira opção em todos os selects da tela
cy.get("select").each(select => {
     cy.get(select)
          .children("option")
          .eq(1)
          .invoke("val")
          .then(val => {
            cy.get(select).select(val);
     });
});
  • Atributos HTML

Ao selecionar um elementos nos testes, utilizamos propriedades HTML como id, classe, ou nome do elemento. Uma boa prática é adicionar o atributo data-cy a elementos importantes para garantir que o teste funcione independente de mudanças no posicionamento ou no estilo dos elementos. Por exemplo:

<div data-cy="important-div" id="div-id" class="div-class">This is a div!<div>

E no teste, podemos obter este elemento da seguinte forma:

cy.get(`[data-cy=important-div]`);
  • Obter texto de elementos

Em alguns momentos precisamos validar se o texto exibido em determinado elemento está correto. Para isso podemos usar a função text(). Por exemplo, podemos obter o texto da div do exemplo anterior com o seguinte comando:

cy.get(`[data-cy=important-div]`).then(($div) => $div.text()));
// $div.text() retorna "This is a div!"
  • Plugins para automação

Existem alguns plugins para navegadores que permitem gravar as ações realizadas pelo desenvolvedor, gerando os comandos do cypress automaticamente. Um deles é o Cypress Recorder.

Como aprender

Material útil

Validando o conhecimento

  • O Cypress vem com uma lista de testes que acessa a documentação deles e faz algumas ações. Dar uma olhada nos testes sendo executados e ver como estão programados para fazer cada coisa.
  • Fazer o Cypress logar em algum admin e fazer todas operações em um CRUD simples;

Comandos úteis

  • node_modules/.bin/cypress open - Interface gráfica do Cypress
  • node_modules/.bin/cypress run - CLI, geralmente utilizado na CI

...

← YupDetox →