Usability of Protractor outside of AngularJS

问题

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.

回答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.

回答2:

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 props
const loginButton = element(by.ReactSelector("button", { value: "OK" }));

// with react root element
const loginButton = element(
  by.ReactSelector("button", { value: "OK" }, {}, "#root")
);

// array finder
const loginButton = element.all(by.ReactSelector("button"));

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

来源：https://stackoverflow.com/questions/27506315/usability-of-protractor-outside-of-angularjs

标签

selenium

integration-testing

protractor

reactjs