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?
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.
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.
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);