Usability of Protractor outside of AngularJS

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.

i have developed one plugin protractor-react-selector

This plugin will help you to find web elements very easily using REACT's component, props and states.

Try it out, if you are using protractor for your REACT app...

You can use it like below:

// with only component. If you dont provide any root, it assume that root is set to '#root'const loginButton = element(by.ReactSelector("button"));// with propsconst loginButton = element(by.ReactSelector("button", { value: "OK" }));// with react root elementconst loginButton = element(  by.ReactSelector("button", { value: "OK" }, {}, "#root"));// array finderconst loginButton = element.all(by.ReactSelector("button"));

Give a star if it works for you.. any feedback/PR will be valuable..