finding xpath for elements in applications built on angularjs

Question

The application under test is built on angular because of which the xpaths are failing to locate the element . I am using selenium web diver for automating the tests and google chrome browser.

Can anybody kindly specify how to break down angularjs components to basic html elements while creating the xpath or any other way i can adapt to find the exact element on the page.

Any link or path or tips to follow.

I have searched a lot but no luck till now.

Answer 1

Starting with covering some general concerns.

When testing AngularJS applications, the timing issues are usually the most common - this is partially why we have tools like Protractor built mainly to test AngularJS applications. What makes it unique is that it works in sync with Angular, knowing when it is ready to be interacted with. It also provide AngularJS specific locators which makes locating elements much easier, samples:

element.all(by.repeater("item in items"));
element(by.binding("mybinding"));
element(by.model("mymodel"));

If you can, you should consider switching to Protractor - the test flow is natural - almost no explicit waits, a lot of convenient syntactic sugar and much more element-locating options.

If not, you can still use Angular-specific attributes to locate elements, examples:

driver.findElements(By.xpath("//*[@ng-repeat='item in items']"));
driver.findElement(By.xpath("//*[@ng-binding='mybinding']"));
driver.findElement(By.xpath("//*[@ng-model='mymodel']"));

Though, as usual, you should prefer to use ids, classes and other "data-oriented" attributes.

Things can easily go wrong with the above sample expressions - imagine web developers add a "tracking" to the repeater, or rename the ng-repeater to data-ng-repeater.

As a side note, using Angular specific things like ng-* attributes in your tests, would make the test codebase tight to this specific technology used to build the application under test. It is not necessarily a bad thing but you should keep it in mind.