Search code examples
javascripttestingprotractorend-to-end

Capturing scroll on click of a button

I have a webpage where there is scroll happening to next section within the webpage on click of a button. Can someone please suggest how to capture that scroll? Code is with in the anchor tag and href is pointing to # to scroll to next section in page. I am not sure how to validate if scroll actually worked?

Solution

  • You can assert/check few things in this case:

    • the current URL to point to the correct # section:

      expect(browser.getCurrentUrl()).toEqual("https://url.com/mypage#myparagraph");

    • check the scrollTop position of the body element (assuming it is what is scrolled - or the other scrollable container):

      var body = $("body");
expect(body.getCssValue("scrollTop")).toEqual("someValue");  // or apply the "greater than" check
    • check the current active element (assuming there is an element focused once the "anchor" paragraph is becoming active)

    • solution based on your suggestion to use window.pageYOffset - compare the value before and after the click:

      browser.executeScript('return window.pageYOffset;').then(function (offsetBefore) {
    offsetBefore = parseInt(offsetBefore);
    button.click();

    browser.executeScript('return window.pageYOffset;').then(function (offsetAfter) { 
         offsetAfter = parseInt(offsetAfter);
         expect(offsetAfter).toBeGreaterThan(offsetBefore);
    });
});