CODEWITHSUNDEEP
angularjsseleniumselenium-webdriverautomated-testsspecflow
Sajeewa Wickramarachchi
Sajeewa Wickramarachchi

Reputation: 121

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

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 :)

Upvotes: 0

Views: 4334

Answers (3)

Grushman
Grushman

Reputation: 41

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.

Upvotes: 2

drkthng
drkthng

Reputation: 6909

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.

Upvotes: 1

Shubhasmit Gupta
Shubhasmit Gupta

Reputation: 416

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");

Upvotes: 5

Related Questions