Usability of Protractor outside of AngularJS

Question

So I have recently switched from using AngularJS to ReactJS but I did really like working with the Protractor E2E test runner so I was wondering 2 things about Protractor.

Are there any major issues with using Protractor on a site that does not use AngularJS at all? I know that Protractor by default tries to synchronous with Angular and you get the:

Error: Angular could not be found on the page X : retries looking for angular exceeded

type message however I believe that can be prevented by doing browser.ignoreSynchronization = true before browser.get(). Are there any other issues besides that?

The other question is will Protractor ever become AngularJS specific, as in, it can only test AngularJS code? I would think that any AngularJS specific feature can be bypassed (like you can with browser.ignoreSynchronization = true), I just want to make sure that is a core goal of Protractor going forward.

Answer 1

Although Protractor is designed to write end-to-end testing code for Angular application, it still can be used to test non-Angular application.

There are two common solutions to achieve this:

Access the wrapped webdriver instance directly

browser.driver.find(By.id('test'));

For convenience, you can export it to to the global namespace and access it by alias name.

onPrepare: function () {
  global.drv = browser.driver;
}

Stop waiting for Angular to finish its work

As you mentioned, browser.ignoreSynchronization = true can disable the default waiting behavior of Protractor. The solution you adopted (doing browser.ignoreSynchronization = true before browser.get()) may cause error when your testing code is not dedicated to non-Angular application. browser.ignoreSynchronization is a global scope setting which means that this flag will affect the whole test suite once you change its value. Thus your Angular tests will get some error unless the flag gets updated accordingly in every Angular test.

Try this elegant and flexible way.

Define a ignoreSynchronization flag setter function in your config.js

onPrepare = function () {
  global.isAngularApp = function (flag) {
    return browser.ignoreSynchronization = flag;
  }
}

And you can determine the value of the flag in your test code

beforeEach(function() {
  isAngularApp(false);  //for non-Angular site
});

For your non-angular apps, you will now need to maintain synchronization on your own. You can do so by taking a more visual-to-the-user approach where you now wait on elements to appear/disappear/have a value/have no value/etc. All things that a user would see and react to. You can accomplish this with Selenium's implicit or explicit waits and the appropriate ExpectedConditions class. These are details by the Selenium Docs.

Hope it's helpful for you.