javascript - how to locate submenu elements (xpath, className or css locators) - Stack Overflow

admin管理员组

文章数量:1359230

I am struggling to locate some elements in my angulars JS app using protractor (JS Webdriver).

Heres is my HTML :

<div id="numDispBox" ng-mouseleave="hideNumDisplayBox()" style="display: none;">
  <div class="numDispOption transition_2" ng-click="UpdateNbResultPerNode(20)">20</div>
  <div class="numDispOption transition_2" ng-click="UpdateNbResultPerNode(40)">40</div>
  <div class="numDispOption transition_2" ng-click="UpdateNbResultPerNode(60)">60</div>
  <div class="numDispOption transition_2" ng-click="UpdateNbResultPerNode(80)">80</div>
</div>

I would like to be able select the 2nd, 3rd and 4th inner divs.

I have used class name however it did not work :

element(by.css('[ng-click="UpdateNbResultPerNode(60)"]'));

I am not able also to find out the xpath with firebug as when I click on the inspector my submenu goes away even when I block JS mutation.

Thanks

I am struggling to locate some elements in my angulars JS app using protractor (JS Webdriver).

Heres is my HTML :

<div id="numDispBox" ng-mouseleave="hideNumDisplayBox()" style="display: none;">
  <div class="numDispOption transition_2" ng-click="UpdateNbResultPerNode(20)">20</div>
  <div class="numDispOption transition_2" ng-click="UpdateNbResultPerNode(40)">40</div>
  <div class="numDispOption transition_2" ng-click="UpdateNbResultPerNode(60)">60</div>
  <div class="numDispOption transition_2" ng-click="UpdateNbResultPerNode(80)">80</div>
</div>

I would like to be able select the 2nd, 3rd and 4th inner divs.

I have used class name however it did not work :

element(by.css('[ng-click="UpdateNbResultPerNode(60)"]'));

I am not able also to find out the xpath with firebug as when I click on the inspector my submenu goes away even when I block JS mutation.

Thanks

• javascript
• angularjs
• selenium
• css-selectors
• protractor

Share Improve this question Follow asked Feb 7, 2014 at 16:22 ZiwdigforbugsZiwdigforbugs 1,21499 gold badges2525 silver badges4444 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

There are many ways to do this,let me list two selectors which can locate the required elements.

• The one which Whitney Imura has mentioned would be a good option.

css = #numDispBox div:nth-child(n)

In your case n can be 1,2 or 3 to locate 2nd, 3rd or 4th div element.

• you can also try using + to locate its sibling.

For example, to locate the 2nd div element the following selector would work.

css = #numDispBox > div + div

I would use XPath to find this element.

The code would look like this:

driver.findElement(By.xpath("//div[@ng-click='UpdateNbResultPerNode(60)']"));

You can also do this by referencing the text like this:

driver.findElement(By.xpath("//div[text()='60']"));

Or maybe you need to first find the parent div:

driver.findElement(By.xpath("//div[@id='numDispBox']/div[text()='60']"));

I have a video on how to utilize XPath with webDriver at: http://munity.neustar.biz/munity/wpm/load_testing/blog/2013/11/19/utilizing-xpath-to-interact-with-elements

Brian Kranson
Neustar, Inc. / Professional Services Engineer

In ruby, you can do (it's the same concept for what you're trying to do with the JS Webdriver):

driver.find_element(:css, '#id .class:nth-child(1))

You can also use element.all:

element.all(by.css('#numDispBox numDispOption')).then(function(items){
  items[1].click();
  items[2].click();
  items[3].click();
});

or

element.all(by.css('#numDispBox numDispOption')).get(1)
element.all(by.css('#numDispBox numDispOption')).get(2)
element.all(by.css('#numDispBox numDispOption')).get(3)

本文标签： javascripthow to locate submenu elements (xpathclassName or css locators)Stack Overflow