Test for scrolling

Question

In my angular application, I have a page that has nav links on the side, that, when clicked, scrolls the page down to a matching element.

How do I write e2e test for this in protractor? Is there something like "Grab the first visible h1" or something like that?

Answer 1

You should be able to grab the first h1 element that is in the page with something like this:

$$('h1').first().getText().then(function (h1Txt) {
  expect(h1Txt).toEqual('Correct h1 text');
});

or use a specific index to find the right h1:

$$('h1').then(function (h1tagList) {
  var h1Text = h1tagList[0].getText();
  expect(h1Text).toEqual('Correct h1 text');
});

If it is not visible on the page at the time it tries to read the text it should throw an error like element not reachable or something like that.

Answer 2

You can sipmly use a scroll down function :

var filter = browser.findElement(by.id('idvalue'));
var scrollIntoView = function () {
arguments[0].scrollIntoView();
}
browser.executeScript(scrollIntoView, filter);

Answer 3

You can use javascript's window.pageYOffset for this. Here's how I've done it in one of my own test case:

    browser.driver.sleep(2000);
    browser.executeScript('return window.pageYOffset;').then(function(pos) {
        expect(pos).to.be.at.most(100);
    });

Where 100 is my expected position.

Note: I'm using mocha and chai instead of jasmine. So, just change the last line accordingly. Also I'm waiting 2 seconds for my scrolling to complete.