How can I use selenium automation testing on an angularJS front end

Question

I'm testing an application written in .NET Backend and AngularJS front end. Writing some automation tests using Selenium with specflow integration (C#).

I have done the initial setup but one of the biggest difficulties I face is detecting the dynamic web elements. Since the app is using Angular I can't easily identify most elements unless I try to use XPath. Selenium doesn't support the compound class names ie "class="ng-pristine ng-valid ng-touched"" and the IDs keep changing.

Is there a better way of doing this ? or a library I can use to make my life easier ?

Any input appreciated :)

Shubhasmit Gupta · Accepted Answer · 2016-11-23 04:55:50Z

5

For testing AngularJS application I'll recommend you to use Protractor. Which is an end-to-end test framework for AngularJS applications. The problem you are facing is very common when you are using any automation tool to automate Angular application and that's why Google has came up with Protractor.

For compound class use:

driver.findElement(By.cssSelector(".ng-pristine.ng-valid.ng-touched");

answered Nov 23, 2016 at 4:55

Shubhasmit Gupta

4161 gold badge4 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

doct03 Over a year ago

This is an excellent suggestion. I use protractor for automation on non-angular pages too. Protractor doesn't have the best error logging, but if you have experience with selenium it should help you debug tests. With protractor you can go off the ng-model & ng-repeat tags. It also doesn't care about compound class names! :)

Grushman · Accepted Answer · 2016-11-23 14:24:38Z

2

I agree with Shubhasmit Gupta. Only problem that the original Protractor is JavaScript based and it might be challenge start to use it. I would recommend to use Protractor.NET , also it will allow you to use SpecFlow with it.

Main benefits of Protractor that it allows to use specific angular locators: NgBy.Model, NgBy.Repeater, NgBy.Binding etc. and provides good synchronization mechanism.

And because Protractor is a wrapper around selenium, you can use all Selenium functions.

answered Nov 23, 2016 at 14:24

Grushman

414 bronze badges

1 Comment

Shubhasmit Gupta Over a year ago

Completely agreed with you, people might find it little default to understand initially due to the async behavior of JavaScript and NodeJS. I also faced the same issue :)

drkthng · Accepted Answer · 2016-11-23 11:37:15Z

Shubhasmit Gupta is right about using Protractor for AngularJS apps. But if you are not ready to go down that road, what's wrong with using xpath?

Using your example you can easily identify your objects with the class parameter like this, if you're sure, that there won't be any more dynamically loaded classes:

//*[@class='ng-pristine ng-valid ng-touched']

Or like this, if there is a probability that more classes could be loaded on that element dynamically:

//*[contains(@class='ng-pristine ng-valid ng-touched')]

Or, if even the order of your classes could change:

//*[contains(@class='ng-pristine') and contains(@class='ng-valid') and contains(@class='ng-touched')]

Of course this approach assumes that your element could be identified uniquely by this combination of class attributes or that you are searching for a group of objects or that you will use other attributes to make the identification unique.

AND Shubhasmit Guptas approach using cssSelector is generally regarded as the faster more precise approach IF you are able to identify an object just by this combination of classes. xpath is favored if you need potentially more attributes than just the class.

Collectives™ on Stack Overflow

How can I use selenium automation testing on an angularJS front end

3 Answers 3

1 Comment

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Related