Cypress测试中如何处理页面加载时未必出现的条件弹窗

不需要使用intercept拦截DOM变化——intercept的设计用途是拦截网络请求，和DOM监听无关，处理这类页面加载阶段的条件渲染遮挡元素，用Cypress内置的重试、DOM判断能力就足够，没必要上DOM事件监听器这类重方案，下面按实现成本从低到高给可直接落地的方案：

最优方案：利用弹窗特性直接点空白区域 #

你自己也提到这个弹窗点击页面任意位置就能关闭，正常点击页面空白区域也不会触发业务逻辑，那根本没必要费神判断弹窗存不存在，页面加载完先点一次确定无交互元素的空白位置就行：

// 选页面左上角0,0坐标点击，加force:true跳过元素可交互性检测
// 弹窗弹了就会被点掉，没弹的话点一下空白也不会对页面产生任何影响
cy.get('body').click(0, 0, { force: true })

这个方案代码最少，也不会因为弹窗延迟个一两秒弹出来就漏关。

通用方案：带重试的条件判断点击关闭 #

如果弹窗不支持点击空白关闭，必须点专属关闭按钮，就用带超时重试的存在性判断逻辑，避免弹窗延迟渲染时判断太早漏关：

// 超时时间设为业务场景下弹窗最晚弹出的时长，比如3000ms，超时后无弹窗也不会报错
cy.get('body', { timeout: 3000 }).should($body => {
  const $closeBtn = $body.find('.wps_popup [data-wps-popup-close]')
  if ($closeBtn.length > 0) {
    $closeBtn.trigger('click')
  }
})

这段逻辑会在超时窗口内反复检测弹窗是否出现，只要弹窗渲染出来就会触发关闭，没出现就自动进入后续测试步骤，不会阻塞流程。

注意事项 #

• 不要直接用同步的Cypress.$或者单次无重试的if判断元素存在性，这类写法只会在执行瞬间检测一次DOM，如果弹窗是接口返回后延迟1-2秒渲染，会出现判断时弹窗还没加载、后续弹窗弹出遮挡元素的问题
• 关闭弹窗后建议加一个后续待操作元素可见的断言，利用Cypress的自动重试等页面状态稳定后再执行后续操作，避免时序问题
• 只有当弹窗会在测试流程的任意时间点随机弹出（不是仅页面加载阶段弹出）时，才需要考虑用MutationObserver监听DOM变动自动关闭，页面初始加载阶段的弹窗完全不需要这类逻辑

内容的提问来源于stack exchange，提问作者Lisa La