1

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>
  • I'm not too familiar with angular, if I quickly look up some information about models in angular it seems mostly related to data objects that are used within the application and not so much about the actual interaction in the browser. What do you want to test? The correctness of the data or do you want to interact with the page like a user? Or both? If you would like to interact with elements using selenium but are struggling to do so I suggest you add a snippet of HTML for the given element and the code that you have attempted so far to make it work. – Pieter A May 23 '18 at 7:01
  • @Pieter A, Could you explain "add a snippet of HTML for the given element"? – Joe May 23 '18 at 7:08
  • My main object to is to interact. But according to the current situation I'm consider about data correctness too. (Still I havent started doing API testing) – Joe May 23 '18 at 7:10
  • If you open the web site in your browser, use 'inspect element' by right clicking, the developer tools should open and you see the HTML source of the page, located at the element you want to inspect. Copy paste that element and the surrounding elements into the description of your question. – Pieter A May 23 '18 at 7:10
  • Give me several minutes – Joe May 23 '18 at 7:13
2

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.

1

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

0

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.

  • I've been using this methods. But it doenst work if something changed. Specially I cant rely on a text of a button. That's why I decided to ask this question. At the moment I'm checking on protractor and hoping to move to it if there is no any other solution for selenium – Joe May 23 '18 at 8:12
  • are you able to add custom HTML attributes? – Pieter A May 23 '18 at 8:24
  • Btw, I don't want to discourage you from using Protractor and it might be a better tool in your case (I don't know :) ). My starting point is that it should be possible to test click paths with Selenium with any web application and if you need help with that I'd be happy to assist. – Pieter A May 23 '18 at 8:33
  • Thanks. Ive managed to do the stuff using xapth. But there are situations tried to run test cases with xpaths I created ealier and some of them didn't work. But those test cases work at that moment – Joe May 23 '18 at 8:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.