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

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 still it is getting 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 bottom 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 2

I found an easier way. If you want to scroll to an element you can use

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

After that the browser will be focusing the element.

Answer 3

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 4

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 5

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 6

If you are looking just to navigate to the top or bottom of a long page you could simply use the 'HOME' key to go too the top, or 'END' key to go to the bottom.

e.g:

browser.actions().sendKeys(protractor.Key.HOME).perform();

or

browser.actions().sendKeys(protractor.Key.END).perform();

Answer 7

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 8

Other way, you can try this:

this.setScrollPage = function (element) {

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

    browser.wait(execScroll, 5000);

};

Answer 9

The easiest way is scroll till the expected element and click it. Please use the below tested and verified code in the current protractor version .

it('scroll to element', function() {
           browser.driver.get('https://www.seleniumeasy.com/');
            var btnSubscribe= element(by.id('mc-embedded-subscribe'));
            browser.executeScript("arguments[0].scrollIntoView();", btnSubscribe);
             browser.sleep(7500);
             btnSubscribe.click();
          });

Answer 10

use

await browser.executeScript(`arguments[0].scrollIntoView({block: "center"});`, $element.getWebElement());

if you want the element to be scrolled into the the center of the window

Answer 11

I have followed all mentioned methods above, could conclude that 3 things works for sure:

// if you want to move on top of the browser page
browser.actions().sendKeys(protractor.Key.HOME).perform();

// if you want to move on Bottom of the browser page
browser.actions().sendKeys(protractor.Key.END).perform();

If the scroll functionality is implemented inside the browser not on the entire page then make sure to click on anywhere on the grid which you want to scroll then use the above code.

//Please for other methods to scroll can check "https://www.guru99.com/scroll-up-down-selenium-webdriver.html"
// Best way I would suggest is to use this way as here Element means the XPath 
let Element = element(by.xpath(optionid));
await browser.executeScript("arguments[0].scrollIntoView();", Element.getWebElement());

Answer 12

I have encountered the same issue which I resolved using two different methods.

//#region Focus
var checkelem=await element(by.xpath("SomeXpath"));
await browser.executeScript("arguments[0].focus()", checkelem);

There might be some chance the above code fails in that case use this:

//#region Adjust_To_Center
var FcsAdBenf = await element(by.xpath("SomeXpath"));
await browser.executeScript('arguments[0].scrollIntoView({block: "center"});', FcsAdBenf);