I recently started working on an Ionic Framework app with some other developers. The team uses Protractor for unit tests. I'm ashamed to admit, this will be the first project I've ever written unit tests for!
I was struggling to get rolling because my tests keep failing. The results would frequently say that multiple matches were found. After digging around in the console in Chrome to find how the CSS selectors were failing, I realized the problem was due to how Ionic caches views. My element did exist in multiple DOM nodes.
Fortunately, this turned out to be pretty easy to fix. Just use xpath to find the currently active <nav-view> like this:
describe('Account', function(){
beforeAll(function(){
login_as_frontdesk();
});
describe("click in account tab", function(){
beforeEach(function(){
element(by.xpath('//div[@nav-bar="active"]')).element(by.css(".bar-header .buttons-right span.secondary-buttons a.ion-ios7-gear-outline")).click();
});
it("should be in /tab/account", function(){
expect(browser.getLocationAbsUrl()).toMatch("/tab/account");
});
});
});
One thing I was surprised by was that many tests will fail unless the testing browser is "focused". So, I have to sit there and watch the tests proceed. This is very time consuming. Does anyone have suggestions for a solution?
