网络元素“成长"滚动到视图后 [英] Web Element "Grows" After Being Scrolled into View
问题描述
我最近发布了一个问题 在 SO 上，当我调用 element.getSize().getWidth() 时，我观察到 Chrome Inspector 工具与 Selenium WebDriver 返回的元素高度和宽度不同) 和 element.getSize().getHeight().使用 Chrome Inspector 我得到 w = 979、h = 1961 的尺寸.使用 Selenium 我分别得到 979 和 1461 的尺寸.
I recently posted a question on SO where I observed a different element height and width being returned by Chrome Inspector tool vs. Selenium WebDriver when calling element.getSize().getWidth() and element.getSize().getHeight(). With Chrome Inspector I get dimensions of w = 979, h = 1961. With Selenium I get dimensions of 979 and 1461 respectively.
我用来检索元素的代码:
Code I'm using to retrieve element:
String URL = "https://www.amazon.com/dp/B07G9RZD14";
driver.navigate().to(URL);
String XPath = ".//*[@id='aplus']/div";
WebElement element = driver.findElement(By.xpath(XPath));
我已经多次重复这个实验，每次都得到相同的结果.有些人建议我正在更改浏览器的大小，但事实并非如此.从头到尾，我总是在最大化模式下执行我的测试.
I've repeated this experiment several times and each time I got the same result. Some have suggested that I was changing the size of the browser however this is not the case. I always performed my test in maximized mode from start to finish.
我做了进一步的实验，结果证明，如果我在页面加载后立即使用 Chrome Inspector 检查元素(没有向下滚动到元素以便将其放入视图)，则返回的尺寸与Selenium (1461) 返回的维度.只有在我将元素滚动到视图中之后，元素高度才会增长".到 1961 年.
I did experiment further and it turn out that if I inspect the element with Chrome Inspector immediately after the page loads (without scrolling down to element so it is put into view) the dimensions returned matches the dimensions returned by Selenium (1461). It is only after I scroll element into view that the element height "grows" to 1961.
当我检查上述 URL 中的 HTML 时，我看到一个脚本正在执行扩展器"；功能.
When I inspect the HTML in the above URL I see a script executing an "expander" function.
我有三个问题.
1) 这个功能是如何工作的?(看起来它正在使用 Javascript)
1) How does this function work? (Looks like it's using Javascript)
2) 是否可以在不将元素滚动到视图中的情况下获得所述元素 (1961) 的真实尺寸?或者需要滚动到带有这种功能的视图元素?
2) Is it possible to get the real dimensions of the said element (1961) without scrolling element into view? Or it would be required to scroll into view element with this kind of function attached?
3) 如果需要将这些元素滚动到视图中，我们是否可以知道哪些元素具有此功能并且需要滚动到视图中，或者我必须滚动所有元素作为预防措施?
3) If it is required to scroll such elements into view, is it possible for us to know which elements have this function and need to be scrolled into view or I would have to scroll all elements into view as a precaution?
谢谢
推荐答案
亚马逊产品页面相当复杂，包含大量延迟加载的图片和其他元素.您的元素可能会变大，因为当您向下滚动页面时，新内容会延迟呈现.
Amazon product pages are quite complex, and include a lot of lazy-loaded images and other elements. It's likely that your element is growing in size because new content is being rendered lazily as you scroll down the page.
要回答您的问题，如果您想要完全准确的尺寸，您当然需要向下滚动整个页面并允许所有元素完成渲染.
To answer your question, you will certainly need to scroll down the entire page and allow all elements to finish rendering if you want completely accurate dimensions.
这篇关于网络元素“成长"滚动到视图后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
