Navigating back to an Angular page from a non-Angular page using Protractor

Question

Navigating back to an Angular page from a non-Angular page using Protractor

Is there a specific method to return to an angular page? Below is the input and button code from an HTML (non-angular) page:

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

The script in todo-spec.js looks like this;

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

I have included

browser.driver.ignoreSynchronization = true;

at the end of the previous angular page to disable synchronization. However, it seems that this page interacts with a payment gateway service before redirecting to subsequent angular pages. Despite my attempts to disable synchronization, I am encountering errors.

It should be noted that I am receiving two distinct errors each time I run the same SCRIPT EXACTLY back-to-back. One error message reads;

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."

and the other one states;

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)

Your assistance in resolving these issues would be greatly appreciated...

javascript angularjs protractor

Answer 1

Answer №1

Resolved. I found that the solution to my issue had actually been suggested by others previously, but I had misunderstood it due to its similarity to other problems on Stack Overflow.

To ensure proper loading and settling on a non-angular page, I had to utilize browser.driver.sleep(5000) to prevent Protractor from rushing through it.

In order to address occasional jasmine timeouts that made me question if I was in the wrong all along, I explicitly set the timeout in the beforeEach function at the beginning. Refer to this example;

The usage of beforeEach can be seen here (Configuring defaultTimeoutInterval in config.js did not resolve the issue for me.)

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

    beforeEach(function (done) {
       jasmine.DEFAULT_TIMEOUT_INTERVAL = 80000;
       setTimeout(function () {
           done();
       }, 500);
    });

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

Another portion within the describe-it function (angular>>non-angular>>angular)

    browser.ignoreSynchronization = true; 
    this_page.clickBtn(); 

    
    //*NON-ANGULAR PAGE* loaded (payment gateway)
    browser.driver.sleep(5000);

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

If anyone has a different perspective on this, feel free to correct me. It took me a week of frustration to understand this aspect. - Newly minted 'protractorer' ;)

Also IMPORTANT TIP: when dealing with angular check boxes and radio buttons, make sure to use;

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

instead of just

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

I discovered that materialize hides the actual element in the check-box / radio button design, leading to undetected errors by protractor/webdriver. This awareness is crucial for effective communication with the backend. A small detail, yet significant once addressed. After resolving this, my protractor tests ran smoothly.

Another key learning was the importance of paying attention to webdriver errors, which provided more explicit guidance compared to protractor errors.

Answer 2

Resolved. I found that the solution to my issue had actually been suggested by others previously, but I had misunderstood it due to its similarity to other problems on Stack Overflow.

To ensure proper loading and settling on a non-angular page, I had to utilize browser.driver.sleep(5000) to prevent Protractor from rushing through it.

In order to address occasional jasmine timeouts that made me question if I was in the wrong all along, I explicitly set the timeout in the beforeEach function at the beginning. Refer to this example;

The usage of beforeEach can be seen here (Configuring defaultTimeoutInterval in config.js did not resolve the issue for me.)

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

    beforeEach(function (done) {
       jasmine.DEFAULT_TIMEOUT_INTERVAL = 80000;
       setTimeout(function () {
           done();
       }, 500);
    });

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

Another portion within the describe-it function (angular>>non-angular>>angular)

    browser.ignoreSynchronization = true; 
    this_page.clickBtn(); 

    
    //*NON-ANGULAR PAGE* loaded (payment gateway)
    browser.driver.sleep(5000);

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

If anyone has a different perspective on this, feel free to correct me. It took me a week of frustration to understand this aspect. - Newly minted 'protractorer' ;)

Also IMPORTANT TIP: when dealing with angular check boxes and radio buttons, make sure to use;

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

instead of just

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

I discovered that materialize hides the actual element in the check-box / radio button design, leading to undetected errors by protractor/webdriver. This awareness is crucial for effective communication with the backend. A small detail, yet significant once addressed. After resolving this, my protractor tests ran smoothly.

Another key learning was the importance of paying attention to webdriver errors, which provided more explicit guidance compared to protractor errors.

Answer 3

Answer №2

Upon clicking, I will patiently await being redirected to the designated page (ensuring a specific segment of URL is present in the current URL), re-enable synchronization, and trigger waitForAngular():

browser.driver.wait(function() {
  return browser.driver.getCurrentUrl().then(function(url) {
    return /section/.test(url);  // NOTE: Substitute "section" with an appropriate part of URL for your scenario
  });
}).then(function () {
    browser.ignoreSynchronization = true;     
    browser.waitForAngular();
});

Answer 4

Upon clicking, I will patiently await being redirected to the designated page (ensuring a specific segment of URL is present in the current URL), re-enable synchronization, and trigger waitForAngular():

browser.driver.wait(function() {
  return browser.driver.getCurrentUrl().then(function(url) {
    return /section/.test(url);  // NOTE: Substitute "section" with an appropriate part of URL for your scenario
  });
}).then(function () {
    browser.ignoreSynchronization = true;     
    browser.waitForAngular();
});

Navigating back to an Angular page from a non-Angular page using Protractor

Answer №1

Answer №2

Similar questions

Adding Currency Symbol to Tooltip Data in Material-UI Sparklinechart

Use jQuery to extract data from the URL instead of relying on PHP

Analyze React.js source code for errors, instead of focusing solely on the DOM manipulation aspect

Encountered an issue accessing property 'Component' which is undefined during the webpack build of a React component plugin

Problem with Onsen UI navigation: It is not possible to provide a "ons-page" element to "ons-navigator" when attempting to navigate back to the initial page

Removing the previously selected file from an input type file in Angular JS

What are some ways to avoid an image looking faded when adding it to the scene background in Three.js?

What are the downsides of using PHP redirects instead of JavaScript redirects, given that most large websites opt for the latter?

Is it possible to increase Google+ shares without needing an API key for every single page?

Utilize the Vue-Chartjs plugin registration for a specific chart component only

Troubleshooting jQuery masonry problem related to initial display and height settings

What are the advantages of using Angular.js with the built-in router, and how does incorporating node.js & express.js further enhance the

What is the reason behind ASP MVC model binder's preference for JSON in POST requests?

Creating PDF files from elements using Puppeteer JS

Using ng serve to upload multipart files in Angular 2

Send parameters to the $http service from a directive

The functionality of two-way data binding seems to be malfunctioning within the directive

This function appears to have an excessive number of statements, totaling 41 in total

Looking to display an alert message upon scrolling down a specific division element in HTML

Include jQuery, jQuery UI, and plugins seamlessly to avoid any version conflicts