Solved: Protractor Testing Issue

1

Trying to write some protractor tests for ionic, realized the selector element( by.css(’.selector’)); no longer scrolls to the element. Which when it’s not visible in the browser, automatically fails the test.

Took me awhile to figure it out. Using a ptor.sleep(2000) to delay the page after browser.get(‘domain’); and then If I scroll through the sections where the elements are being tested, they pass (as expected).

I believe this has something to do with ionic taking over scroll events.

Has anyone ran into this before or have some sort of scrollTo implementation for all elements?

Thanks!

1 Like
2

Ended up using a global scroll method that takes the element as an argument.

var scrollIntoView = function (element) {
  arguments[0].scrollIntoView();
};

Then just call it/pass in your element.

describe( "Register page", function ()
{
    browser.get( "#/register" );

    ptor.sleep(2000);

    it( "Check SMS Preference", function ()
    {

        var smsLabelConfirm = element( by.css( ".sms-confirm" ) ),
            smsInputConfirm = element ( by.id( "sms-confirm" ) ),
            smsInputDeny = element ( by.id( "sms-deny" ) );

            browser.executeScript(scrollIntoView, smsLabelConfirm);

            smsLabelConfirm.click();
            expect( smsInputConfirm.getAttribute( "checked" ) ).toBe( "true" );
            expect( smsInputDeny.getAttribute( "checked" ) ).toBe( null );

    } );
});

See: http://stackoverflow.com/questions/25436491/protractor-not-scrolling-to-test-element/25449650#25449650

3

If you pass an element to browser.executeScript() it may be too big. In that case you will get following error:

RangeError: Maximum call stack size exceeded

I recommend to do something like this, instead:

browser.executeScript("document.getElementsByClassName('sms-confirm')[0].scrollIntoView();");
1 Like