CODEWITHSUNDEEP
javascriptscrolljasmineprotractor
andrepm
andrepm

Reputation: 877

Scroll down to an element with protractor

I have an element on the page that I'm testing that I have to scroll down to be visible. When I execute my test, I get Element is not clickable at point (94, 188) for example.

I tried the following:

dvr.executeScript('window.scrollTo(0,250);');

But it didn't work. Does anyone know how this works?

Upvotes: 13

Views: 43662

Answers (7)

bhargava krishna
bhargava krishna

Reputation: 63

pass the xpath to this method dynamically it will scroll to the element

   scrollToElement: function (element) {
        return element.getLocation().then(function (location) {
            return browser.executeScript('window.scrollTo(' + location.x + ', ' + location.y + ');');
        });
    },

Upvotes: 1

James Lawson
James Lawson

Reputation: 8618

'use strict';

/**
 * Vertically scroll top-left corner of the given element (y-direction) into viewport.
 * @param scrollToElement element to be scrolled into visible area
 */
function scrollTo(scrollToElement) {
    var wd = browser.driver;
    return scrollToElement.getLocation().then(function (loc) {
        return wd.executeScript('window.scrollTo(0,arguments[0]);', loc.y);
    });
};

Usage:

scrollTo(element(by.css("div.someclass")));

Disclaimer: this code is from sg-protractor-tools's scroll.js.
Code is licensed under the MIT license.

Upvotes: 5

prakash krishnan
prakash krishnan

Reputation: 831

I used the link that Bassem suggested and that works. The steps are as follows:

  1. We will have to install sg-protractor-tools with the following command (Use Sudo if you do not have admin accesses):

    npm install --save-dev sg-protractor-tools

  2. The code then would look something like this (I tried this on wikipedia)

    var sgpt = require('sg-protractor-tools');
it ('verify that scroll works', function ()
  { 
   browser.get('http://wikipedia.org');                                             
   browser.manage().window().setSize(1000, 1000); 
   sgpt.scroll.scrollTo(element(by.linkText('Terms of Use'))); 
  }
);

Upvotes: 2

rajana sekhar
rajana sekhar

Reputation: 511

i think this is helpful to you:

dvr.executeScript('window.scrollTo(94,188);').then(function() {
    element(by.<<here your button locator>>).click();
})

your webdriver is unable to read that point (1254,21),the reason is your protractor browser unable to cover the full of page what do you want to test, then we give a command that browser is scroll to that point (1254,21), then perform the click operation

Upvotes: 2

Bassem
Bassem

Reputation: 11

Try using npm module "sg-protractor-tools", working well for me with firefox and chrome drivers,

It's a clean way to do scroll on page elements, More details here https://www.npmjs.com/package/sg-protractor-tools

Upvotes: 1

Rahul Reddy
Rahul Reddy

Reputation: 695

This seems so late to answer you.. But anyways,

The following code helped me to remove the Element is not clickable error.

var elm = element.all(by.css('.your-css-class')).get(9);
browser.executeScript("arguments[0].scrollIntoView();", elm.getWebElement());

elm.click();

Basically this allows you scroll into your view..

Upvotes: 44

Junior Ales
Junior Ales

Reputation: 121

The window.scrollTo(x,x) solution didn't work for me. Specially when testing against ripple emulator. I managed to make it work using scrollIntoView method.

var scrollToScript = 'document.getElementById("ELEMENT ID").scrollIntoView();';

browser.driver.executeScript(scrollToScript).then(function() {
  element(by.id('ELEMENT ID')).click();
  expect(...);
});

Upvotes: 11

Related Questions