如何等待断言一个元素永远不会出现在文档中？

在软件开发中，特别是在前端测试中，有时我们需要确保某个元素不会出现在文档中。这通常是为了验证某些操作或状态变化后，页面上不应该存在的元素是否确实消失了。以下是一些基础概念和相关方法来实现这一目标。

基础概念

断言（Assertion）：断言是一种编程技术，用于在代码中指定预期条件，并在运行时检查这些条件是否为真。
元素不存在：在DOM（文档对象模型）中，某个元素不存在意味着它没有被添加到文档树中。

类型与应用场景

显式等待：使用显式等待来定期检查元素是否不存在。
隐式等待：设置一个全局等待时间，在这段时间内不断尝试查找元素，直到超时。
应用场景：在用户登录后验证错误消息框不再出现，或者在页面重定向后确认旧页面元素已经移除。

示例代码

以下是一个使用JavaScript和Jest测试框架的示例，展示如何等待并断言一个元素永远不会出现在文档中：

function waitForElementToDisappear(selector, timeout = 5000) {
  return new Promise((resolve, reject) => {
    const startTime = Date.now();
    const checkElement = () => {
      if (document.querySelector(selector)) {
        if (Date.now() - startTime < timeout) {
          setTimeout(checkElement, 100);
        } else {
          reject(new Error(`Element ${selector} still exists after ${timeout}ms`));
        }
      } else {
        resolve();
      }
    };
    checkElement();
  });
}

// 使用示例
test('element should disappear', async () => {
  // 假设我们有一个操作会移除id为"error-message"的元素
  // 执行移除操作...

  try {
    await waitForElementToDisappear('#error-message', 3000);
    expect(document.querySelector('#error-message')).toBeNull();
  } catch (error) {
    fail(error.message);
  }
});