Angularjs: identifying a button in Selenium

Question

I'm trying to identify a button in angularjs. The HTML code is placed below. How do i differentiate these buttons using selenium. I'm using robotframework for automation but it doesn't matter as long as some one can help in identifying these elements/buttons using css selector or xpath or any other means that helps in identifying them uniquely.

I've 4 buttons Mr Mrs Ms Other

Html for 4 as below

<button ng-repeat="choice in question.choices" ng-class="{selected: isSelected(choice.value)}" ng-click="selectAnswer(choice)" tabindex="1" class="ng-scope"><span fittext=".8" fittext-max="16" class="ng-scope ng-binding" style="display: inline-block; white-space: nowrap; line-height: 1; font-size: 16px;">Mr</span></button>

<button ng-repeat="choice in question.choices" ng-class="{selected: isSelected(choice.value)}" ng-click="selectAnswer(choice)" tabindex="1" class="ng-scope"><span fittext=".8" fittext-max="16" class="ng-scope ng-binding" style="display: inline-block; white-space: nowrap; line-height: 1; font-size: 16px;">Mrs</span></button>

<button ng-repeat="choice in question.choices" ng-class="{selected: isSelected(choice.value)}" ng-click="selectAnswer(choice)" tabindex="1" class="ng-scope"><span fittext=".8" fittext-max="16" class="ng-scope ng-binding" style="display: inline-block; white-space: nowrap; line-height: 1; font-size: 16px;">Ms</span></button>

<button ng-repeat="choice in question.choices" ng-class="{selected: isSelected(choice.value)}" ng-click="selectAnswer(choice)" tabindex="1" class="ng-scope"><span fittext=".8" fittext-max="16" class="ng-scope ng-binding" style="display: inline-block; white-space: nowrap; line-height: 1; font-size: 16px;">Other</span></button>

Guy · Accepted Answer · 2016-04-26 11:00:14Z

2

You can identify the <span> in the buttons by the text and click on it

driver.findElement(By.xpath("//span[text()='Mr']"));
driver.findElement(By.xpath("//span[text()='Mrs']"));
//...

edited Apr 26, 2016 at 11:00

answered Apr 26, 2016 at 7:41

Guy

51.2k10 gold badges49 silver badges96 bronze badges

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

2 Comments

jim Over a year ago

You identified a span, not a button

Guy Over a year ago

@jim Yes, I know. I refraze my answer.

jim · Accepted Answer · 2016-04-26 09:29:36Z

0

RobotFramework way to find one of these buttons would be

Click Button  xpath=//span[text()="Mr"]/parent::button

answered Apr 26, 2016 at 9:29

jim

9067 silver badges14 bronze badges

2 Comments

Nagendra Over a year ago

Thanks Jim....This worked...thanks heaps..is there an option to use CSS selector instead of xpath?

jim Over a year ago

You can select all buttons (css=button) and then iterate through them until you find the one you need, but this is a very bad idea. CSS can't be used to find by element text

Bhargav Krishna · Accepted Answer · 2016-04-26 09:53:21Z

-1

// first take each button inside the list 
List<WebElement> myButton = driver.findElements(By.className("ng-scope"));
System.out.println("Size of the button the webpage is : " + myButton.size());
// now you can click button on the basis of index like below

myButton.get(0).click(); // for first button
myButton.get(1).click(); // for second button
myButton.get(2).click(); // for third button
myButton.get(3).click(); //For Forth Button

answered Apr 26, 2016 at 9:53

Bhargav Krishna

113 bronze badges

1 Comment

jim Over a year ago

ng-scope is one very bad way of selecting something in an Angular app

Collectives™ on Stack Overflow

Angularjs: identifying a button in Selenium

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related