仅在滚动（分页）后显示的数据是不是是加载页面时 dom 的一部分？

Posted 2023-02-21

【中文标题】仅在滚动（分页）后显示的数据是不是是加载页面时 dom 的一部分？

【英文标题】：Does the data that is shown only after scrolling (paging) is part of the dom when page is loaded?仅在滚动（分页）后显示的数据是否是加载页面时 dom 的一部分？

【发布时间】：2022-01-21 23:26:31

【问题描述】：

我正在尝试理解以下代码：

WebElement elem = driver.findElement(By.id("123"));
javascriptExecutor js = (JavascriptExecutor) driver
js.executeScript("arguments[0].scrollIntoView(true);",elem);

我读到这段代码在 Facebook 等有分页过程的地方很有用。

但是我在想，如果元素只有在分页后才能看到，这是否意味着第一行 WebElement Elem = driver.findElement(By.id("123")); 会抛出异常，因为元素不是一部分Dom 还没有（直到分页到达这个项目）？

【问题讨论】：

这可能会滚动到页面底部的一个项目，该项目已经在 DOM 中，并且当它实际可见时会在内部触发加载更多内容。

@luk2302，所以在启动时，DOM 存储了用户多年前发布的帖子？

这是无法回答的，它完全取决于您正在浏览的网站以及该网站在做什么。

【参考方案1】：

逐行解释：

WebElement elem = driver.findElement(By.id("123"));

驱动程序是一个网络驱动程序引用，使用它您可以调用findElement 方法并在Selenium 中的an abstract 类的帮助下传递id 之类的定位器。

Selenium 与 htmlDOM 对话和通信，因此如果您在 HTMLDOM 中将 123 视为 id，则不会出现任何错误/异常。

但如果123 id web 元素不存在或未正确呈现，那么您会看到与 WebElement 相关的异常。

JavascriptExecutor

基本上是Selenium-Java绑定中的一个接口。

还有这一行

js.executeScript("arguments[0].scrollIntoView(true);", elem);

这条线基本上是两个参数。 second arg 在您的情况下是一个网络元素 (elem)。和 arguments[0] 代表指定的 web 元素，我们正在调用 JS - scrollIntoView(true); 方法。

【讨论】：

@cruiseoandey，谢谢。但是，是否会找到 id 为 123 的元素取决于什么？

如果在 DOM 上没有找到 driver.findElement(By.id("123"));，您可能会遇到异常。但请确保您在 HTMLDOM 中检查这一点，而不仅仅是在 UI 上。

HTMLDOM 是我在使用 inspect 时看到的？

是的，没错！ 检查步骤： Press F12 in Chrome -> 转到 element 部分 -> 做一个 CTRL + F -> 然后粘贴 id 看看，如果你想要的 element 得到 突出显示与1/1匹配节点。

【参考方案2】：

Selenium 通过 UI 模仿真实的用户操作。 因此，作为用户，您不能单击等未出现在可见屏幕视图上的元素。这就是为什么 Selenium 驱动程序会在您尝试访问此类元素时抛出异常的原因。 但是，此元素可以存在于 DOM 上。 它可以完全呈现​​与否，取决于特定网页如何实现的特定技术，但网页元素将存在。 JavaScript 可以访问不可见且仍未完全呈现的元素。因此，使用 JS，您可以执行 Selenium 驱动程序不允许您执行的多项操作。 但这不会通过 UI 模仿真实的人类用户操作。

【讨论】：

您能否解释一下您的最后一句话：但这不会通过 UI 模仿真实的人类用户操作。 为什么它不会模仿真实的人类用户操作？

如果元素不在可见屏幕部分，作为用户，您首先必须滚动页面才能到达它。作为用户，您如何无需滚动直接与此类元素交互？你不能！

所以行 js.executeScript("arguments[0].scrollIntoView(true);", elem);会模仿用户滚动吗？

我不完全确定这可以定义为真正的用户页面滚动，但是是的，它会滚动页面。我认为使用Actions 滚动可以定义为用户滚动模仿。我不知道这两种方式有什么区别（如果有的话）。

两个答案都很好。我需要决定:)