如何在Cypress中配置监听应用错误通知的事件监听器？

可以通过配置DOM变化监听器或全局钩子，持续捕获应用动态弹出的错误通知，确保测试能及时感知到服务端或应用异常。以下是具体实现方式：

全局监听（所有测试生效） #

在cypress/support/e2e.js中添加全局监听逻辑，所有测试用例会自动监听错误通知：

// 全局监听应用错误通知
Cypress.on('test:before:run', () => {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.addedNodes.length) {
        const errorEl = document.querySelector('[data-e2e-notification-message-text]');
        if (errorEl && errorEl.textContent.includes('ERROR: ')) {
          // 捕获到错误后终止测试并抛出异常
          cy.wrap(errorEl).then(($el) => {
            throw new Error(`应用抛出错误通知：${$el.text()}`);
          });
        }
      }
    });
  });

  // 监听整个文档的DOM变化
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
});

单个测试用例内监听 #

如果仅需在特定测试中监听，可在测试代码内添加监听器：

it('执行业务操作并监听错误通知', () => {
  cy.document().then((doc) => {
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.addedNodes.length) {
          // 遍历所有通知元素，检查是否存在错误
          cy.get('[data-e2e-notification-message-text]').each(($el) => {
            if ($el.text().includes('ERROR: ')) {
              throw new Error(`检测到错误：${$el.text()}`);
            }
          });
        }
      });
    });

    observer.observe(doc.body, {
      childList: true,
      subtree: true
    });
  });

  // 执行你的测试步骤
  cy.visit('/target-page');
  // ...其他业务操作
});

可选：仅记录错误不终止测试 #

如果不需要终止测试，仅需记录错误信息，可将抛出异常的代码替换为日志记录：

Cypress.log({
  name: '应用错误通知',
  message: `捕获到错误内容：${$el.text()}`,
  level: 'error'
});

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