Dimensão de tela no cypress

Foto de rashid khreiss na Unsplash

No inicio dos testes no cypress, a dimensão de tela vem com uma medida default e na maioria das vezes, não não é a medida que o usuário utiliza em seu dia a dia. Então como podemos alterar o tamanho para que fique próximo do que o usuário utiliza?

Neste artigo, vou estar explicando de maneira simples e objetiva como podemos alterar essa dimensão.

Comando para dimensão

Ao olharmos na documentação oficial do cypress, encontramos um comando que irá nós ajudar a colocar as medidas que queremos para ficar o mais próximo do usuário possivel. Esse comando é: viewport.

Esse comando possível algumas variações de sintaxe que demostro abaixo:

cy.viewport(width, height)
cy.viewport(preset, orientation)
cy.viewport(width, height, options)
cy.viewport(preset, orientation, options)

No trecho acima, percebemos que um simples cy.viewport pode ter variações de argumentos e vou te explica o que é cada um:

• width (número): Largura da tela em pixel;
• height (número): Altura da tela em pixel;
• preset (letra): Dimensão pré-definida(Exemplo: iphone-14)
• orientation (letra): Portrait é a padrão mas caso queira inverter a largura/altura, utiliza landscape;
• options (objeto): Passar um objeto de opções. Atualmente, se tem apenas o log.

Exemplo de como ficaria cada linha:

cy.viewport(1280, 720)
cy.viewport('iphone-14')
cy.viewport('iphone-14', 'landscape')

Ao longo do artigo, verá que podemos utilizado o viewport de outras maneiras.

Utilizando na prática

É comum encontrar em códigos, o comando viewport dentro do beforeEach(), ficando da seguinte maneira:

describe('Example', () => {
    beforeEach(() => {
      cy.visit('/')
      cy.viewport(1280, 720)
      
    })

Dimensão via cypress.json

Havendo o arquivo cypress.json já criado na pasta do projeto(fora da pasta do cypress), você adiciona a dimensão de maneira diferente, ainda não apresentada aqui no arquivo.

Veja como seria:

{
  "viewportWidth": 1280,
  "viewportHeight": 720
}

Dimensão via cypress.config.ts

Havendo o arquivo cypress.config.ts já criado na pasta do projeto(fora da pasta do cypress), você adiciona a dimensão de maneira diferente, ainda não apresentada aqui no arquivo.

Veja como seria:

import { defineConfig } from 'cypress'

export default defineConfig({
  viewportWidth: 1280,
  viewportHeight: 720,
})

Eu particularmente prefiro colocar a dimensão em um arquivo separado do arquivo do código de testes, mantendo assim clean e organizado, cada coisa em seu lugar.

Referência

https://docs.cypress.io/api/commands/viewport#docusaurus_skipToContent_fallback