Selenium：如何跟踪 DOM 操作以查找元素的可见性？答案

【问题标题】：Selenium: How to track DOM manipulation to find visibility of an element?Selenium：如何跟踪 DOM 操作以查找元素的可见性？
【发布时间】：2017-09-21 19:34:22
【问题描述】：

是否有可能在网页上查看以下事件：某个元素已变为可见？

使用 selenium 可以做到这一点吗？

例如，如果我定义了从 startTime 到 endTime 观看网页的时间线。从 startTime 到 endTime，可以捕获不同的网页事件，其中包括 dom 操作（例如：添加了 html 元素并使其可见）。一旦达到 endTime，我将遍历事件列表，并且可以验证是否发生了特定事件。

就我而言，我想知道一个 html 元素是否可见。

通常的找出方法是使用 webdriver 的 API 来检查元素的可见性，并设置一些超时。

但是，我想捕获不同的事件并进行一些回调，从而验证是否发生了一些预期的事件。

[更新]：我们是否支持 Selenium 中的 MutationObserver？

【问题讨论】：

在没有任何经过验证的代码的情况下，使用冗长的文本和通用的操作很难理解您的确切要求。你能更新我们你的手动步骤吗？
我还没有尝试过代码，但是遇到了我们无法在超时内找到 html 元素的情况，即使在视觉上我们看到该 html 元素变得可见。寻找跟踪 dom 操作的替代方法，刚刚找到关于 MutationObserver 的信息。现在检查 selenium 是否有与 MutationObserver 相关的 API
如果没有任何经过验证的代码和错误堆栈跟踪，很难猜测那里发生了什么错误并缩小范围以进行补救。是的，MutationObserver 确实有解决方案。
这能回答你的问题吗？ Selenium: are there events like "New element inserted in DOM"

标签： javascript java html selenium dom

【解决方案1】：

以下是您可以执行的操作示例：

WebDriverWait wait = new WebDriverWait(driver, 10); // how many seconds
wait.until(ExpectedConditions.elementToBeClickable(myPage.getButton()));

对于更复杂的事情，您可以为WebDriverWait 提供自己的Function，即：

wait.until(o -> {
    return driver.getWindowHandles().stream().collect(Collectors.toList()).get(tabNo);
});

【讨论】：

ExpectedConditions 使用轮询而不是检测 DOM 事件。所以如果一个元素改变了它的状态，然后很快又变回来了，我可能会错过。

【解决方案2】：

是的，您使用显式等待，如 WebDriver Documentation 所示。

ExpectedConditions 类提供了许多有用的元素状态，例如ElementToBeVisible、ElementToBeClickable 等。

这应该可以解决问题。

【讨论】：

ExpectedConditions 使用轮询而不是检测事件。所以如果一个元素改变了它的状态，然后很快又变回来了，我可能会错过。

【解决方案3】：

Selenium 不支持事件，因此您可能应该转移到另一个工具，例如 puppetter，它似乎支持事件。也就是说，仍然可以通过将所有事件存储在页面中的变量中来使用脚本注入来记录事件：

jse.executeScript(
  "var window.__events = [];" +
  "new MutationObserver(function(mutations) {" +
  "    mutations.forEach(function(mutation) {" +
  "        window.__events.push(mutation);" +
  "    });" +
  "})).takeRecords();");

然后简单地返回列表：

Object events = jse.executeScript("return window.__events;");

【讨论】：