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 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). Veja abaixo um exemplo, utilizando os mesmo valores utilizados na seção enterior.

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

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 cypress open).

E é 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.


Quer aprender automação de testes com Cypress na prática? Conheça meus cursos na Escola Talking About Testing, ou no Udemy, e bons testes!

3 comentários em “Como rodar testes simulando dispositivos móveis com Cypress

  1. Parabéns pelo site, ajuda muito. gostaria de saber se você tem algum exemplo de script de como executar o mesmo teste em vários tamanhos de dispositivos móveis?

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s