Protractor: Scroll down

Question

I have an button on my page that is visible when the user scrolls down. Because of this, protractor tests give me an error:

UnknownError: unknown error: Element is not clickable at point (94, 188).

I tried using:

browser.executeScript('window.scrollTo(0,document.body.scrollHeight)');

which worked when I tested it in protractors elementexplorer.js but in my regular tests it doesn't do anything. Any other way around this?

Answer 1

I'd like to add to the previous answer, and hopefully provide a little more explanation.

This code, in the call to 'executeScript':

'window.scrollTo(0,0);'

• Scrolls the window UP, to window coordinates 0,0...essentially to the very top
• If you know the specific area you need to go to, just change the coordinates.

If you know you want to be at the very bottom of the window, which was my goal. You can put a very large number in the 'y' coordinate, like I did here:

browser.executeScript('window.scrollTo(0,10000);').then(function () {
    expect(<some control>.<some state>).toBe(<some outcome>);
})

Answer 2

I found that creating a util helper and using it inside page objects (or the test files themselves) helped. This seems to work well for me:

utils.js

module.exports = {
  scrollIntoView: function(el) {
    browser.executeScript(function(el) {
      el.scrollIntoView();
    }, el.getWebElement());
  }
}

inside page object somewhere...

var scrollIntoView = require('../utils').scrollIntoView;

module.exports = {
  clickBackBtn: function() {
    var el = element(by.buttonText('Go back'));
    scrollIntoView(el);
    el.click();
    return;
  }
}

in the test itself...

it('should allow the user to go back to the profile page', function() {
  PageObject.clickBackBtn();
  expect(browser.getCurrentUrl()).toContain('/user/profile');
});

Answer 3

In case anyone else is having troubles like I was:

I was trying to scroll to the bottom of the page to load my next set of data in an infinite scroll scenario. I tried different variations of window.scrollTo as well as arguments[0].click() with no success.

Finally I realized, to get the page to scroll, I had to bring focus to the "window" by clicking on any element within the window. Then window.scrollTo(0, document.body.scrollHeight) worked liked a charm!

example code:

element(by.className('<any element on page>')).click();
browser.executeScript('window.scrollTo(0,document.body.scrollHeight)').then(function(){
//whatever you need to check for here
});

Answer 4

The answer of this question was marked correct at top replied.But after upgrade the newest chrome v54.The following code maybe best solution.

browser.actions().mouseMove(element).perform();

Answer 5

you need to wait for the promise to be solved. the following example comes from an open issue

browser.executeScript('window.scrollTo(0,0);').then(function () {
    page.saveButton.click();
})

Update: This is an old question (May of 2014), but it still gets some visitors. To clarify: window.scrollTo(0, 0) scrolls to the top left corner of the current page.

If you want to scroll to the buttom of your page you could call

window.scrollTo(0, document.body.scrollHeight)

as mentioned by @jsuser in this answer

A more modern approach would be using

browser.actions().mouseMove(element).perform();

Upvotes to @MartinBlaustein in this answer

Answer 6

Other way, you can try this:

this.setScrollPage = function (element) {

    function execScroll() {
        return browser.executeScript('arguments[0].scrollIntoView()',
            element.getWebElement())
    }

    browser.wait(execScroll, 5000);

};