Selenium JavaScript - 将元素滚动到视图中而不与标题重叠答案

【问题标题】：Selenium JavaScript - scroll element into view without overlapping with headerSelenium JavaScript - 将元素滚动到视图中而不与标题重叠
【发布时间】：2016-10-14 18:11:05
【问题描述】：

webdriver.executeScript("arguments[0].scrollIntoView();", element);

这会将元素滚动到视图中，但它位于页面标题的后面。

如何将元素滚动到视图中，以使元素位于标题的正下方而不是标题的后面？

【问题讨论】：

标签： javascript selenium

【解决方案1】：

scrollIntoView 方法可以滚动视图顶部或底部的元素，默认在顶部：

https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoView

所以你可以在底部滚动它：

webdriver.executeScript("arguments[0].scrollIntoView(false);", element);

您也可以在顶部滚动它，然后滚动视图高度的 1/4：

webdriver.executeScript("arguments[0].scrollIntoView(true); window.scrollBy(0, -window.innerHeight / 4);", element);

或者就在您的固定标题下方：

webdriver.executeScript("arguments[0].scrollIntoView(true); window.scrollBy(0, -arguments[1].offsetHeight);", element, header);

【讨论】：

这是在 Chrome 和 Firefox 中滚动的最佳答案，因为 Action 类在 Firefox 中不起作用。谢谢。

【解决方案2】：

如果您需要专注于特定元素，请尝试以下操作：

JavascriptExecutor js =(JavascriptExecutor)driver;
WebElement element =(WebElement)js.executeScript("document.querySelector('#urID').focus()");

您需要将 #urID 更改为正确的 CSS 定位器。

【讨论】：

【解决方案3】：

请试试这个“scrollIntoViewIfNeeded()”。希望它会自动处理这个位置。我正在 Salesforce 站点中尝试。它工作正常

((JavascriptExecutor) webDriver).executeScript("arguments[0].scrollIntoViewIfNeeded();", element)

*注意：在 Mozilla 中不支持。如果您将在 Chrome 和 Edge 上工作，那么它可能会正常工作。

【讨论】：