Cypress测试移动端页面时全屏请求被拒绝的解决办法

针对你遇到的移动端视口下操作登录元素触发全屏，导致测试因TypeError: Fullscreen request denied报错终止的问题，提供以下几种可行方案：

1. Mock全屏API方法（推荐） #

直接拦截浏览器的全屏请求方法，让应用的全屏调用不实际执行，避免触发权限限制。可以修改POM的Visit_Homepage方法，加入mock逻辑：

class Homepage_PO {
  Visit_Homepage(){
    cy.visit(Cypress.env('integrax_homepage'),{
      timeout:60000,
      onBeforeLoad(win) {
        // 模拟全屏请求成功，避免权限报错
        Object.defineProperty(win.document.documentElement, 'requestFullscreen', {
          value: () => Promise.resolve(),
          writable: true
        });
        // 兼容不同浏览器前缀
        Object.defineProperty(win.document.documentElement, 'webkitRequestFullscreen', {
          value: () => Promise.resolve(),
          writable: true
        });
        Object.defineProperty(win.document.documentElement, 'mozRequestFullScreen', {
          value: () => Promise.resolve(),
          writable: true
        });
      }
    })
  }
  Login(login, password){
    cy.get('input[name="login"]').type(login)
    cy.get('input[name="password"]').type(password)
    cy.get('#loginBtn').click()
  }
}

export default Homepage_PO;

2. 覆盖应用的全屏触发逻辑 #

如果应用是根据视口尺寸判断是否触发全屏，可以让应用误以为处于大屏环境，同时保持测试所需的移动端视口：

// 在测试文件的beforeEach中添加
beforeEach(() => {
  cy.visit(Cypress.env('integrax_homepage'), {
    onBeforeLoad(win) {
      // 模拟大屏宽度，让应用不触发全屏逻辑
      Object.defineProperty(win, 'innerWidth', {
        value: 768,
        writable: true
      });
      Object.defineProperty(win.document.documentElement, 'clientWidth', {
        value: 768,
        writable: true
      });
    },
    timeout:60000
  });
  // 设置测试需要的移动端视口
  cy.viewport(360, 640);
});

3. 临时忽略特定未捕获异常（不推荐） #

若仅需临时跳过该错误继续测试，可配置Cypress忽略对应异常，但会屏蔽同类型错误，可能遗漏真实问题：

// 添加在测试文件顶部
Cypress.on('uncaught:exception', (err, runnable) => {
  if (err.message.includes('Fullscreen request denied')) {
    return false;
  }
});

内容的提问来源于stack exchange，提问作者Robert Świderski