可能会也可能不会出现在页面开头的对话框

Question

我需要处理我的页面可能在加载阶段显示弹出对话框或可能不出现的情况。单击任意位置都会将其删除，我对测试此对话框不感兴趣，但它阻止了我需要访问的页面，因此必须将其删除

这是在对话框出现时获取对话框的代码

cy.get('.wps_popup')
  .find('[data-wps-popup-close]')
  .click()

但我不能把它放在测试的顶部，因为这个元素可能不会出现。

如何处理条件元素 - 我是否需要intercept更改 DOM 并将该代码放入事件侦听器中？

Answer 1

如果您不关心实际测试对话框，则可以在测试顶部添加侦听器。

function handler(win) {
  const observer = new MutationObserver(mutations => {
    const addedElement = mutations?[0].addedNodes?[0]
    if (addedElement?.classList.contains('wps_popup')) {
      addedElement.click()
    }
  }
  observer.observe(win.document.body, { childList: true })
}
cy.on('window:load', handler)

这将独立于 Cypress 测试运行，但请注意它会响应 DOM 的每一个更改。

为了尽量减少对测试运行者的影响，请尽快将其关闭

it('tests with background handler', () => {

  function handler(win) {
    const observer = new MutationObserver(mutations => {
      const addedElement = mutations?[0].addedNodes?[0]
      if (addedElement?.classList.contains('wps_popup')) {
        addedElement.click()
      }
    }
    observer.observe(win.document.body, { childList: true })
  }
  cy.on('window:load', handler)

  cy.visit('/')

  // some test code

  cy.off('window:load', handler)            // turn off 
})