Scrolling to Bottom of the Text Area using Protractor

Question

I have a text field that I need to scroll to the bottom of in order for the Next button to be activated to click. This project is using Angular 6 my tests are end to end test running on the protractor/cucumber framework.

The textbox is contained within the page and nothing seems to work allowing me to scroll within the text field. I have tried the mouseMove mouseDown options, along with a simple sendKeys End or ArrowDown.
You can find out more details in this screenshot.

Any advice is greatly appreciated.

Answer 1

Have you tried simply scrolling to the bottom without any reference to any object:

element(by.className('<any element on page>')).click();//to focus on page first where scroll need to happen
 browser.executeScript('window.scrollTo(0,document.body.scrollHeight)').then(function()
{ //whatever you need to check for here }
);

Answer 2

While I haven't used Protractor, generally when I come across an issue like this I use a scrollTo or scrollIntoView() action to bring the viewport into view of the element.

Some cursory research on Protractor shows there are a few examples out there including this one suggesting you wrap the scrollIntoView() action in an executeScript method: https://stackoverflow.com/questions/39399477/protractor-scroll-into-view-not-working#comment66147579_39399892.

So in your case you should be able to locate the Next button within the DOM and then scroll it to within view.

Answer 3

As far as I know there is no way to scroll a textarea directly in protractor. But you can use browser.executeScript, e.g. (horizontally scrolling 100px):

    import {ExpectedConditions} from 'protractor';
    ...
    

    it ('tests scrolling a textarea', async() => {

       const textarea_id = 'myId';
       /* wait for the textarea to be visible (this can be tricky (e.g. if some
          http requests are necessary), for simplicity I show a simple way)
       */
       const textarea_el = await element(by.id(textarea_id));
       browser.wait(ExpectedConditions.visibilityOf(textarea_el), 10000);
       await browser.executeScript(
            `document.getElementById('${textarea_id}').scrollTo(100, 0))`);
       
    });