使用Cypress测试移动端视图时viewport与userAgent设置均失效如何解决

问题原因 #

• 多个生命周期钩子冲突：同时定义了多组before、beforeEach，还在测试用例内部重复修改配置、多次调用cy.visit，后续配置会覆盖前面的设置，导致移动端配置不生效。
• viewport参数错误：方法4中将viewportHeight设为375px、viewportWidth设为667px，属于手机横屏尺寸，不符合常规移动端竖屏的适配触发条件。
• userAgent设置时机错误：在onBeforeLoad阶段修改navigator.userAgent过晚，站点在页面请求阶段已经拿到默认UA头，无法识别修改后的值。
• 重复访问冲突：同一条用例内调用3次cy.visit，前两次的配置会被最后一次覆盖。

正确实现方案 #

单测试文件配置方案

/// <reference types = "Cypress"/>

describe("移动端视图测试", () => {
    beforeEach(() => {
        // 先设置UA，再设置竖屏视口，最后访问页面，保证配置在页面请求前生效
        Cypress.config('userAgent', "Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1");
        cy.viewport('iphone-x', 'portrait'); // 显式指定竖屏模式
        cy.visit("https://www.bookmundi.com/", {
          onBeforeLoad: (win) => {
            // 补充模拟移动端触摸属性，适配部分靠触摸检测判断设备的站点
            Object.defineProperty(win.navigator, 'maxTouchPoints', { value: 5 });
            win.devicePixelRatio = 3;
          }
        });
    })

    it("正常加载首页移动端视图", () => {
        // 后续测试逻辑示例：校验移动端专属元素是否存在
        cy.get('.mobile-nav-toggle').should('be.visible');
    });
});

全局配置方案（适合所有移动端测试用例复用）

在cypress.config.js中统一配置移动端参数：

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    userAgent: "Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1",
    viewportWidth: 375,
    viewportHeight: 812,
  },
})

配置完成后测试文件内不需要重复设置UA和视口，直接访问页面即可。

内容的提问来源于stack exchange，提问作者Siya Shrestha