Cypress Runner加载移动站点而非桌面站点的原因及解决方法

原因 #

Cypress默认采用移动设备规格的视口尺寸（默认375px宽 × 667px高），而梵高博物馆的网站会根据浏览器视口宽度自动切换移动端/桌面端布局，因此触发了移动端页面的渲染。

修复方法 #

1. 单测试用例临时设置桌面视口

在目标测试用例中，先设置桌面端分辨率再访问网站：

cy.viewport(1920, 1080) // 设置为常见桌面分辨率
cy.visit('https://www.vangoghmuseum.nl/nl')

// 也可使用Cypress内置的桌面设备预设
cy.viewport('macbook-15')
cy.visit('https://www.vangoghmuseum.nl/nl')

2. 全局配置默认桌面视口

修改项目根目录下的cypress.config.js（或cypress.config.ts），设置全局默认视口为桌面尺寸，所有测试用例会自动沿用该配置：

module.exports = {
  viewportWidth: 1920,
  viewportHeight: 1080,
  // 保留其他原有配置项
}

3. 测试套件统一设置视口

如果只需给某一组测试配置桌面视口，可在测试套件的before钩子中统一设置：

describe('梵高博物馆桌面端功能测试', () => {
  before(() => {
    cy.viewport(1920, 1080)
  })

  it('验证桌面版页面加载状态', () => {
    cy.visit('https://www.vangoghmuseum.nl/nl')
    // 后续测试逻辑...
  })
})

内容的提问来源于stack exchange，提问作者Devang Sanghani