CODEWITHSUNDEEP
javascriptnode.jsselenium-webdriverwebdriverwebdriver-io
dezhavi
dezhavi

Reputation: 61

scroll within a scrollable element with webdriver-io?

How do you scroll within a scrollable element with webdriver-io? I have tried the following code:

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

Or 

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

But neither of them have any effect.

Upvotes: 0

Views: 5723

Answers (3)

rycornell
rycornell

Reputation: 717

The scrollTop approach did not work for my use case. This is what worked:

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

This is using webdriver.io v4.14.0 testing in Chrome.

Upvotes: 1

JBaba
JBaba

Reputation: 610

I know this post is old, but I had the same problem. The examples given by @mido are quite complex and I had hard time understanding them, so I found a simple way to do this.

We have to use the .execute() command:

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

You want to scroll down inside the scroll-able element, so let's suppose your container is a div with id id='scrollContent_body'. Now all you have to do is use below the snipped presented bellow:

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;
});

Note: It does not matter weather your driver is browser, or client.

Upvotes: 0

mido
mido

Reputation: 25034

Normally, I wouln't advice using driver.executeScript, but until something like webElement.setAttribute comes up, I doubt that there are many other ways of doing this.

for scrolling up and down a scrollable element:

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);
    });
}

for scrolling to particular element inside scrollable element:

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

Note: both the above functions would be returning a promise.

usage

...
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(...

Upvotes: 1

Related Questions