Question

我正在努力使用量角器（JS Webdriver）在我的角度JS应用程序中找到一些元素。

Heres是我的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>

我希望能够选择第二，第三和第四内部div。

我使用了类名，但它不起作用：

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

我无法找到带有firebug的xpath，因为当我点击检查器时，即使我阻止JS变异，我的子菜单也会消失。

由于

Answer 1

在ruby中，你可以这样做（这与你尝试用JS Webdriver做的概念相同）：

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

Answer 2

我会使用XPath来查找此元素。

代码如下所示：

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

您也可以通过引用如下文本来执行此操作：

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

或许你需要先找到父div：

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

我有一个关于如何在webDriver上使用XPath的视频： http://community.neustar.biz/community/wpm/load_testing/blog/2013/11/19/utilizing-xpath-to-interact-with-elements

Brian Kranson
Neustar，Inc。/专业服务工程师

Answer 3

有很多方法可以做到这一点，让我列出两个可以找到所需元素的selectors。

Whitney Imura提到的那个将是一个不错的选择。

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

在您的情况下n可以是1,2或3来定位第2，第3或第4 div元素。

您也可以尝试使用 + 来找到它的兄弟。

例如，要找到第二个div元素，以下选择器将起作用。

css = #numDispBox > div + div

Answer 4

您也可以使用element.all：

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

或

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

如何定位子菜单元素（xpath，className或css定位器）

4 个答案: