Cypress启动时iframe无法100%加载 页面渲染不完整问题

问题表现 #

• 非Cypress环境访问简历提交/职位申请页面时，所有表单字段可完整正常渲染
• 通过Cypress启动测试时页面加载不完整，截图仅展示前2个文本输入框
• 页面无法手动向下滚动，调用scrollIntoView()方法也无法定位到下方元素
• 已尝试添加显式等待、调整测试视口分辨率，问题未解决

Cypress运行时异常页面截图
正常环境完整页面截图

修复方案 #

按优先级依次排查以下场景：

• 屏蔽Cypress环境标识检测
  部分业务逻辑、第三方组件（尤其是反爬、风控类脚本）会检测window.Cypress全局变量，识别到测试环境后主动截断内容渲染。在测试用例的beforeEach钩子中添加如下配置，隐藏测试环境标识：

  beforeEach(() => {
    Cypress.on('window:before:load', (win) => {
      Object.defineProperty(win, 'Cypress', {
        value: undefined,
        configurable: true
      })
    })
  })
  

• 修正滚动容器样式异常
  Cypress运行时的iframe容器默认样式可能和普通浏览器环境存在差异，导致表单外层滚动容器被错误设置固定高度+overflow: hidden属性，内容被裁切且无法滚动。页面加载后执行如下脚本，校验并修正容器样式：

  // 替换为实际业务中表单外层滚动容器的选择器
  cy.get('.form-wrap, .scroll-container, form').each($container => {
    // 清除隐藏溢出的属性
    cy.wrap($container).invoke('css', 'overflow', 'auto')
    // 取消固定高度限制
    cy.wrap($container).invoke('css', 'height', 'auto')
    cy.wrap($container).invoke('css', 'max-height', 'none')
  })
  

• 调整Cypress安全与实验性配置
  Cypress默认开启的部分安全策略、实验性特性可能拦截表单依赖的动态加载脚本（比如上传组件、级联选择器依赖包），导致后续字段渲染中断。修改cypress.config.js配置：

  const { defineConfig } = require("cypress");
  
  module.exports = defineConfig({
    e2e: {
      // 关闭跨域安全限制，避免第三方脚本加载被拦截
      chromeWebSecurity: false,
      // 关闭第三方代码篡改特性，避免组件逻辑被修改
      experimentalModifyObstructiveThirdPartyCode: false,
      // 清空域名拦截列表，避免业务依赖资源被拦截
      blockHosts: []
    },
  });
  

• 手动触发布局重绘
  如果是页面加载后未触发resize事件导致的布局计算异常，可以在页面访问完成后手动触发全局重绘：

  cy.visit('/job/apply') // 替换为实际申请页地址
  cy.window().trigger('resize')
  cy.wait(300)
  // 校验页面底部提交按钮可见，确认页面渲染完整
  cy.get('button[type="submit"]').should('be.visible')
  

内容的提问来源于stack exchange，提问作者Mihai Ghimpu