Skip to main content

Viewport | Cypress | Test & QA

  • Viewport | Cypress | Test & QA

No Cypress, o viewport define o tamanho da área visível do navegador durante a execução dos testes, permitindo simular diferentes resoluções e dispositivos (desktop, tablet, mobile).

🖥️ O que é Viewport?​

Viewport é a largura e altura (em pixels) da janela do navegador controlado pelo Cypress.

Ele influencia:

  • Layout responsivo (CSS media queries)
  • Comportamento de menus mobile
  • Componentes que mudam por resolução
  • Scroll e renderização de elementos

⚙️ Formas de configurar o Viewport​

1️⃣ Globalmente (cypress.config.js)​

Define um padrão para todos os testes.

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    viewportWidth: 1280,
    viewportHeight: 720
  }
})

2️⃣ Por teste ou spec​

Usado quando apenas alguns testes precisam de outra resolução.

cy.viewport(1024, 768)

📌 A mudança afeta apenas o teste atual.

3️⃣ Usando presets de dispositivos​

O Cypress possui presets para simular dispositivos comuns.

cy.viewport('iphone-x')

Exemplos:

cy.viewport('macbook-15')
cy.viewport('ipad-2')
cy.viewport('samsung-note9')

📱 Exemplo de teste responsivo​

describe('Menu mobile', () => {
  it('abre o menu em mobile', () => {
    cy.viewport('iphone-x')
    cy.visit('/')

    cy.get('[data-cy=menu-button]')
      .should('be.visible')
      .click()

    cy.get('[data-cy=menu-mobile]')
      .should('be.visible')
  })
})

🔁 Viewport e Retry-ability​

  • Alterar o viewport não tem retry
  • Sempre configure o viewport antes de interagir com a página
  • Evite mudar o viewport no meio de ações críticas

🚫 Anti-padrões​

❌ Mudar viewport após ações:

cy.click()
cy.viewport(375, 667)

❌ Usar viewport para testar layout pixel-perfect

✅ Boas práticas​

  • Use viewport fixo para testes funcionais
  • Teste responsividade apenas onde faz sentido
  • Combine viewport com seletores estáveis (data-cy)
  • Evite testar detalhes visuais finos (isso é papel de testes visuais)

🧪 Combinando viewport com múltiplos ambientes​

if (Cypress.env('device') === 'mobile') {
  cy.viewport('iphone-x')
}

Rodando:

npx cypress run --env device=mobile

📌 Resumo rápido​

FormaUso
viewportWidth / viewportHeightConfiguração global
cy.viewport(w, h)Configuração por teste
cy.viewport(preset)Simular dispositivos
env + viewportExecuções dinâmicas