使用 webdriver-io 在可滚动元素内滚动？答案

【问题标题】：scroll within a scrollable element with webdriver-io?使用 webdriver-io 在可滚动元素内滚动？
【发布时间】：2015-04-01 07:30:18
【问题描述】：

如何使用 webdriver-io 在可滚动元素内滚动？我试过以下代码：

client
.scroll('#hierarchy_p')
.scroll(20, 50);

或者

client
.scroll('#hierarchy_p', 20, 50);

但是它们都没有任何效果。

【问题讨论】：

标签： javascript node.js selenium-webdriver webdriver webdriver-io

【解决方案1】：

通常情况下，我不会建议使用 driver.executeScript，但在出现 webElement.setAttribute 之类的东西之前，我怀疑还有很多其他方法可以做到这一点。

用于上下滚动可滚动元素：

function scrollToFn(driver, element, scrollAmount){
    return elem.getAttribute('scrollTop').then(function(val){
        scrollAmount += +val;       // written as +val for string to number conversion
        return driver.executeScript("arguments[0].scrollTop = arguments[1]", elem, scrollAmount);
    });
}

用于滚动到可滚动元素内的特定元素：

function scrollToInnerFn(driver, parentEle, innerEle){
    return innerEle.getAttribute('offsetTop').then(function(val){
        return driver.executeScript("arguments[0].scrollTop = arguments[1]", parentEle, val);
    });
}

注意：以上两个函数都会返回一个承诺。

用法

...
var webdriver = require('selenium-webdriver');
var browser1 = new webdriver.Builder().usingServer().withCapabilities({
    browserName: 'firefox'
}).build();
...

var elem = browser1.findElement(webdriver.By.css('#scrollT'));
var elem2 = browser1.findElement(webdriver.By.css('#mm'));
scrollToFn(browser1, elem, 200).then(function(){
    scrollToInnerFn(browser1, elem, elem2);
}).then(...

【讨论】：

【解决方案2】：

scrollTop 方法不适用于我的用例。这是有效的：

browser.execute(function() {
    document.querySelector('#hierarchy_p').scrollIntoView();
});

这是在 Chrome 中使用 webdriver.io v4.14.0 测试。

【讨论】：

【解决方案3】：

我知道这篇文章很旧，但我遇到了同样的问题。 @mido 给出的例子非常复杂，我很难理解它们，所以我找到了一个简单的方法来做到这一点。

我们必须使用 .execute() 命令：

browser.execute([function(){},param1,param2,....]);

您想在可滚动元素内向下滚动，因此假设您的容器是一个div，id 为id='scrollContent_body'。现在你所要做的就是使用下面的截图：

browser.execute(function() {
    // browser context - you may not access client or console
    // += 60 will scroll down
    // -= 60 will scroll up
    document.getElementById('scrollContent_body').scrollTop += 60;
});

注意：不管你的司机是browser，还是client。

【讨论】：