Is it possible to test dynamic web sites using selenium?

Question

I have a dynamic web site which is developed using angular (front end). Elements cannot be identified using ID,name etc... as they are not used to name elements. But models have used to name elements uniquely.

I'm using Selenium and TestNG at the moment. But it doesn't have any feature to capture models. I have tried using xpath. But it's risky and also hard to capture elements.

So I want to know whether there is any option to capture models(mostly)? or should I move to another tool like protractor?

Are there any other tool or framework which is good at doing this?

For an example here is the HTML code of a button. (This doesn't have any model though) Tell me if there is a method to capture the button (to click)

<button class="btn btn--02 thm--02 ng-scope" ng-click="vm.UTV = true" ng-if="!vm.UTV" style="margin: 0px;">Create</button><button class="btn btn--02 thm--02 ng-scope" ng-click="vm.UTV = true" ng-if="!vm.UTV" style="margin: 0px;">Create</button>

Answer 1

Protractor is a wrapper of selenium specifically built for testing angular applications. However, that alone isn't necessarily enough - you would still do well to work with the developers to ensure testability is high. Use of angular things like repeaters, models and bindings in protractor will make your life easier though.

Answer 2

The problem you will face on a dynamic website is that you need to be carefull to check for the existence of elements before relying on them as they may not have been created yet.

Xpath can be tricky in these situations as you will need to be very aware of how your page loads to ensure your xpath is valid at the time you apply it.

It would be safer to use direct matching of a specific ID that is unique to that element.

Some reactive frameworks make this annoyingly difficult by not keeping ID's unique or sane. In my opinion that is a bad code smell and should be challenged because it makes it very hard to debug or talk about your applications structure.

When doing matching by ID you might need to tweak the timeouts, its generally a bad idea to mix element matching approaches.

driver.manage().timeouts().implicitlyWait(0, TimeUnit.MILLISECONDS);

You can check if the element exists like this

boolean exists = driver.findElements( By.id("...") ).size() != 0

Then if exists is true you safely directly access your element

driver.findElements( By.id("...")

You might want to wrap this up into a function to keep it tidy

Answer 3

Looking at the html of the button, it looks like you would be able to interact with the button like with the following xpath:

//button[text()="Create"]

So your code would be something like:

driver.findElement(By.xpath("//button[text()="Create"]")).click();

I'm using the text of the button to locate it, as the classes and other html attributes seem a bit generic and they might not be specific for this button. I usually don't like to use text labels for locating elements, as they could for instance be different in a multi language website, or be changed by a content manager.

If possible, you could add a specific attribute or class in the HTML for this button and then use that for locating it.

If the HTML surrounding the button has some unique attributes, you can make a more specific xpath or css selector, like:

driver.findElement(By.cssSelector(".class_of_surrounding_element button")).click();

This is in the assumption that there are not other buttons within the same surrounding element.