Cypress元素可见却被加载遮罩覆盖无法输入，如何校验元素可操作？

根因分析 #

1. 遮罩选择器书写错误：你写的cy.get('.blockUI blockOverlay')是查询class="blockUI"元素下的<blockOverlay>标签，而实际遮罩元素同时带有两个类，正确选择器应为.blockUI.blockOverlay，这是你遮罩存在但断言依然通过的核心原因。
2. Cypress内置的be.visible断言仅判断元素本身的可见性，不校验是否被其他元素覆盖，所以会出现断言通过但输入失败的情况。
3. Cypress环境下遮罩不消失通常是因为表单加载依赖的异步请求/事件没有完成，手动操作时请求触发正常，自动化执行时可能存在请求拦截、事件触发时序差异。

解决方案 #

方案1：修正遮罩等待逻辑（最推荐）

点击新建按钮后先等待遮罩完全消失，再操作表单元素：

it('should select new lead', () => {
  cy.visit(Cypress.env('lead_url'))
  cy.get('#new_lead').click()
  // 等待遮罩元素不存在，选择器去掉空格
  cy.get('.blockUI.blockOverlay').should('not.exist')
  // 之后再操作表单
  cy.get('#lead_name').type('foo')
  cy.get('#lead_last_name').type('bar')
  cy.get('.button').click()
})

方案2：拦截表单加载请求（解决遮罩一直不消失问题）

如果遮罩消失依赖表单加载接口返回，可通过cy.intercept等待接口完成，再校验遮罩状态：

it('should select new lead', () => {
  // 提前拦截表单加载的请求，替换为你实际的请求方法和路径
  cy.intercept('GET', '/your/form/load/api').as('loadForm')
  cy.visit(Cypress.env('lead_url'))
  cy.get('#new_lead').click()
  // 等待接口返回
  cy.wait('@loadForm')
  cy.get('.blockUI.blockOverlay').should('not.exist')
  cy.get('#lead_name').type('foo')
  cy.get('#lead_last_name').type('bar')
  cy.get('.button').click()
})

方案3：自定义元素未被覆盖断言

如果需要直接校验目标元素未被覆盖，可通过自定义断言实现：

// 可在cypress/support/commands.js中注册全局命令
Cypress.Commands.add('shouldNotBeCovered', { prevSubject: 'element' }, (subject) => {
  const el = subject[0]
  const rect = el.getBoundingClientRect()
  // 取元素中心点判断最上层元素是否是目标元素本身
  const topEl = document.elementFromPoint(rect.left + rect.width / 2, rect.top + rect.height / 2)
  expect(el.contains(topEl) || el === topEl).to.be.true
  return subject
})

// 使用时直接调用
cy.get('#lead_name').shouldNotBeCovered().type('foo')

方案4：临时强制输入（下策，仅用于紧急绕过）

如果不需要校验页面状态，可强制跳过元素覆盖检查：

cy.get('#lead_name').type('foo', { force: true })

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