How to navigate from a non-Angular page back to another Angular page with protractor

Question

What exactly should be done to redirect back to an angular page? This is my input & button from html (non-angular page)

<input class="value" type="password" 3dsinput="password" name="password">
<input type="submit" value="Submit" name="submit" alt="Submit" border="0">

located in todo-spec.js like this;

 element(by.css('.value')).sendKeys('12345');
 element(by.buttonText('Submit')).click();

with browser.driver.ignoreSynchronization = true; called last on the previous angular page to turn off synchronization. Keep in mind this little page communicates with a payment gateway service before it redirects the user to oncoming angular pages. I've tried to switch off synchronization but to no relief.

Also to note: I seem to be getting two different errors whenever I run the same EXACT SCRIPT minute after minute. My guess is it's something to do with timeout. One is;

Failed: Cannot assign to read only property 'stack' of Error while waiting for Protractor to sync with the page: "window.angular is undefined. This could be either because this is a non-angular page or because your test involves client-side navigation, which can interfere with Protractor's bootstrapping. See http://git.io/v4gXM for details"

and the other;

Failed: javascript error: document unloaded while waiting for result (Session info: chrome=51.0.2704.84) (Driver info: chromedriver=2.21.371459 (36d3d07f660ff2bc1bf28a75d1cdabed0983e7c4),platform=Windows NT 10.0 x86_64) (WARNING: The server did not provide any stacktrace information) Command duration or timeout: 1.40 seconds Build info: version: '2.52.0', revision: '4c2593c', time: '2016-02-11 19:06:42' System info: host: 'xxxxxxxx', ip: 'xxxxx', os.name: 'Windows 10', os.arch: 'amd64', os.version: '10.0', java.version: '1.8.0_92' Driver info: org.openqa.selenium.chrome.ChromeDriver Capabilities [{applicationCacheEnabled=false, rotatable=false, mobileEmulationEnabled=false, chrome={chromedriverVersion=2.21.371459 (36d3d07f660ff2bc1bf28a75d1cdabed0983e7c4), userDataDir=C:\Users\Colin\AppData\Local\Temp\scoped_dir6892_17447}, takesHeapSnapshot=true, databaseEnabled=false, handlesAlerts=true, hasTouchScreen=false, version=51.0.2704.84, platform=XP, browserConnectionEnabled=false, nativeEvents=true, acceptSslCerts=true, locationContextEnabled=true, webStorageEnabled=true, browserName=chrome, takesScreenshot=true, javascriptEnabled=true, cssSelectorsEnabled=true}] Session ID: fde99ca463aacd06f923cae8895b06a5

Your help shall be highly appreciated...

score 2 · Accepted Answer · edited May 23 '17 at 11:52

Solved. I'm probably repeating the same solution (suggested by others) that I simply misunderstood with other SO similar issues.

I had to use browser.driver.sleep(5000) on non-angular page to ensure it loads in and settles properly and that protractor does not quickly run over it.

To manage jasmine timeouts (which was an occasional issue - making me feel like I was the wrong one all along), I explicitly programmed the timeout in the beforeEach function at the top. Take a look;

The beforeEach as seen here (Setting defaultTimeoutInterval in config.js did not work for me.)

  describe('angularjs homepage todo list', function() {

    beforeEach(function (done) {
       jasmine.DEFAULT_TIMEOUT_INTERVAL = 80000;
       setTimeout(function () {
           // console.log('inside timeout');
           done();
       }, 500);
    });

   it ('should be bla bla bla', function(){

Other section in the describe-it function (angular>>non-angular>>angular)

    browser.ignoreSynchronization = true; // Turn sync off before submit (on angular page).
    this_page.clickBtn(); //Redirect to *NON-ANGULAR PAGE*


    //*NON-ANGULAR PAGE* loaded (payment gateway)
    browser.driver.sleep(5000);// to fully load non-angular page 

    element(by.css('.value')).sendKeys('12345');                     
    element(by.buttonText('Submit')).click();

Again I stand to be corrected if anyone feels different about this. Took me a week of up and down frustration to figure this bit out. - New 'protractorer' ;)

Also BONUS VERY IMPORTANT if you ever run into angular check boxes and radio buttons, explicitly use;

    var elm = element(by.id('drop-off'));
    browser.executeScript("arguments[0].click();", elm.getWebElement());

instead of just

element(by.id('drop-off')).click();

For some reason, materialize, with its design, hides the raw element in the check-box / radio button making you over look it as protractor/webdriver will not detect an error. So you need to be very aware of that to help with talking to the backend. Tiny but big issue I spotted late. When I figured this, my protractor tests ran as smooth as a baby's butt ;)

One more thing that greatly helped me was paying attention to webdriver errors (which I was not doing before). They were more explicit than the protractor ones.

alecxe · Answer 2 · 2016-06-17T13:03:29.793

0

After the click, I would wait to be redirected to the desired page (waiting for a specific part of URL to be present in the current URL), turn the sync on again and issue waitForAngular():

browser.driver.wait(function() {
  return browser.driver.getCurrentUrl().then(function(url) {
    return /index/.test(url);  // TODO: replace "index" with a relevant part of URL in your case
  });
}).then(function () {
    browser.ignoreSynchronization = true;     
    browser.waitForAngular();
});

edited Jun 17 '16 at 13:03

answered Jun 15 '16 at 14:11

alecxe

462,703
120
1,088
1,195

@colinDev256 what if you put the sync on and wait for angular into the browser.wait's callback - updated the answer. – alecxe Jun 17 '16 at 13:03
thanks for your feedback. Your logic guided me to figure out the solution. Check it out and maybe evaluate? ;) – colin_dev256 Jun 20 '16 at 08:58
@colinDev256 oh, wow, nicely broke the problem done to pieces. Great job. – alecxe Jun 20 '16 at 13:36

How to navigate from a non-Angular page back to another Angular page with protractor

2 Answers2