Como rodar testes simulando dispositivos móveis com Cypress

Hoje na série “pitadas de Cypress“, aprenda como rodar testes em viewport mobile

Uma das grandes vantagens dos testes automatizados é que eles não se cansam, e portanto, podem ser executados em diferentes sistemas operacionais, navegadores e viewports, para garantir o funcionamento da aplicação em teste nesses diferentes “ambientes”.

Atualmente, um número crescente de pessoas acessa a internet diariamente através de seus dispositivos móveis, e como profissionais da área de desenvolvimento de software, é nossa responsabilidade garantir o perfeito funcionamento das aplicações, não somente em viewport desktop, como também em viewport mobile.

Com Cypress, podemos rodar os testes simulando um dispositivo móvel facilmente. Vejamos duas opções.

Direto pela linha de comando

Para executar testes simulando um dispositivo móvel via linha de comando, utilize o seguinte comando:

cypress run --config viewportWidth=375,viewportHeight=667

Obs.: Os valores de altura e largura podem ser alterados conforme suas necessidades.

Via arquivo de configurações

Por padrão, o Cypress utiliza a largura de 1000px e a altura de 660px.

Porém, é possível sobrescrever estes valores via arquivo de configuração (cypress.json em versões menores que a v10, ou cypress.config.js a partir da v10). Veja exemplos abaixo, utilizando os mesmo valores utilizados na seção enterior.

// cypress.json (Cypress < v10)

{
  "viewportWidth": 375,
  "viewportHeight": 667
}

// cypress.config.js (Cypress v10+)

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  viewportWidth: 375,
  viewportHeight: 667,
  e2e: {...},
})

Com a configuração acima, os testes serão executados em um viewport mobile, tanto quando rodando em modo headless (com cypress run), como quando executados em modo interativo (com o comando cypress open).

É isso aí.

---

Para mais detalhes, visite a documentação oficial do Cypress.

---

Gostou da pitada de hoje?

Deixa um comentário com tua experiência, ou alguma curiosidade a respeito do assunto.

---

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

---

Ficou curioso(a) e quer aprender mais sobre automação de testes com Cypress? Conheça meus cursos no Udemy.

• Cypress básico
• Cypress intermediário
• Cypress avançado
• Boas práticas em automação de testes com Cypress
• Testes end-to-end com Cypress

---

Bons testes! 🎉