Cypress无法操作ng-bootstrap模态框内元素且无报错如何解决？

问题修复方案 #

1. 修正元素选择逻辑，避免匹配隐藏DOM

ng-bootstrap 模态框关闭后默认不会从DOM中移除，仅设置为隐藏状态，你的选择器大概率匹配到了之前隐藏的旧模态框内的按钮，导致点击了不可见元素，自然没有效果。
修改选择器，仅匹配当前可见的激活模态框内的按钮：

// 方式1：增加可见性过滤
cy.get('.modal-button:visible').contains('No Template').click()

// 方式2：先定位激活态的模态框再查找元素（更稳定）
cy.get('div.modal.show .modal-button').contains('No Template').click()

2. 增加元素就绪校验，规避动画影响

即使等待了3秒，模态框动画过渡过程中，按钮的pointer-events、opacity属性可能还未切换到可交互状态，Cypress的点击会失效。替换硬等待为元素状态校验：

cy.get('div.modal.show .modal-button')
  .contains('No Template')
  .should('be.visible')
  .and('be.enabled')
  .and('have.css', 'pointer-events', 'auto') // 确认元素可接收点击事件
  .click()

3. 替换点击实现方式，绕过模拟点击校验

如果上述方案都不生效，可以直接调用元素的原生点击方法，绕过Cypress的模拟点击校验逻辑，比{force: true}参数适配性更强：

cy.get('div.modal.show .modal-button')
  .contains('No Template')
  .invoke('click') // 直接触发元素原生click事件

4. 排除遮罩层拦截问题

如果模态框的背景遮罩层存在z-index异常，或者焦点未锁定到模态框内部，可以先点击模态框空白区域锁定焦点后再操作按钮：

cy.get('div.modal.show')
  .click('topLeft') // 点击模态框空白区域锁定焦点
  .find('.modal-button')
  .contains('No Template')
  .click()

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