Filtrando os navegadores disponíveis ao Cypress

Aprenda como definir quais browsers estarão disponíveis para execução dos testes com Cypress

O Cypress é um framework de automação de testes web que vem com tudo que você precisa para criar testes automatizados sem perdas de tempo com configurações e outros detalhes.

Dentre suas facilidades, o Cypress identifica quais navegadores estão disponíveis em seu computador, e quando aberto, você pode selecionar em qual navegador quer executar os testes, conforme demonstrado na imagem abaixo.

Como você pode perceber, além dos navegadores Chrome, Edge e Firefox (disponíveis em meu computador quando tirei essa screenshot), também há o navegador Electron, o qual é a versão desktop do Chrome.

Além disso, você também pode escolher em qual navegador os testes serão executados quando os rodando em modo headless (o modo normalmente utilizado na integração contínua).

Para isso, basta executar:

cypress run --browser chrome

cypress run --browser edge

ou

cypress run --browser firefox

Obs.: Ao executar só cypress run, o Cypress irá executar os testes por padrão no navegador Electron (a versão desktop do Chrome).

Disponibilizando somente navegadores web ao Cypress

Usualmente, aplicações web são utilizadas por seus usuários em navegadores web, em vez de uma versão desktop do navegador, tal como o Electron.

Portanto, para não correr o risco da execução dos testes em tal navegador, podemos removê-lo da listagem de navegadores.

Para isso, basta adicionar a seguinte implementação à função setupNodeEvents definida na propriedade e2e do arquivo de configurações do Cypress (o cypress.config.js).

setupNodeEvents(on, config) {
  return {
    browsers: config.browsers.filter(browser => browser.name !== 'electron')
  }
}

Ou seja, a partir da configuração do Cypress, estamos obtendo os navegadores e filtrando-os para todos, com exceção do electron.

Dessa forma, ao executar o comando cypress open, o navegador Electron não estará mais disponível, conforme a imagem abaixo.

E dessa forma, não corremos o risco de acidentalmente testarmos a aplicação em um navegador que os usuários reais da aplicação não usariam.

Para um exemplo real, consulte o seguinte arquivo de configurações do projeto meal-suggestion no GitHub.

Fonte: https://docs.cypress.io/guides/guides/launching-browsers#Customize-available-browsers

Quer aprender mais sobre automação de testes web com Cypress? Conheça os cursos da Escola TAT.

• Cypress Playground
• Cypress, do Zero à Nuvem
• Cypress intermediário
• Cypress avançado
• Boas práticas em automação de testes com Cypress
• Testes end-to-end com Cypress

👋  Até a próxima e bons testes!

Este conteúdo foi traduzido para inglês e pode ser encontrado no DEV Community.