如何在“量角器”中定位动态元素

Question

当我尝试运行以下代码时出现此错误：

失败：元素不可见

以下是我要定位的元素的html代码：

<a class="dropdown-toggle ng-binding ng-scope" aria-expanded="false"    
role="button" href="/" data-toggle="dropdown" ng-if="tab.subtabs">
Content
<span class="caret"></span></a>
<ul class="dropdown-menu ng-scope" role="menu" ng-if="tab.subtabs">
<li class="ng-scope" ng-repeat="test in tab.subtabs">
<a class="ng-binding" target="_self" href="/custom/ui">Custom</a>
</li>
<li class="ng-scope" ng-repeat="test in tab.subtabs">
<a class="ng-binding" target="_self" href="/patch/ui">Patch</a></li>
<li class="ng-scope" ng-repeat="test in tab.subtabs">
<a class="ng-binding" target="_self" href="/swd/ui">Software</a>

我想点击标签内的元素：

<a class="ng-binding" target="_self" href="/custom/ui">Custom</a>
<a class="ng-binding" target="_self" href="/patch/ui">Patch</a>
<a class="ng-binding" target="_self" href="/swd/ui">Software</a>

我在protractor 中尝试了以下代码，但它不起作用：

it("should click on Content and then custom", function(){
    element(by.xpath('/html/body/bf-header/div/nav/div/div/div[2]/ul[1]  
   /li[2]/a')).element(by.xpath('/html/body/bf-header/div/nav/div/div   
   /div[2]/ul[1]/li[3]/ul/li[1]')).click();

Answer 1

element(by.xpath('/html/body/bf-header/div/nav/div/div/div[2]/ul[1]
/li[2]/a')).element(by.xpath('/html/body/bf-header/div/nav/div/div
/div[2]/ul[1]/li[3]/ul/li[1]')).click();

好吧，现在您可能明白为什么 Protractor Style Guide 建议不要使用 XPath 定位技术了：

永远不要使用 xpath

为什么？

• 这是所有定位器中最慢和最脆弱的策略
• 标记是 很容易发生变化，因此 xpath 定位器需要一个 大量维护
• xpath 表达式不可读且很难 调试

这并不总是正确的，如果您选择 XPath，您所做的表达式至少必须真正简单易读。如果您要继续使用 XPath，首先要解决的问题是不要创建绝对 XPath 表达式 - 您不必从 html 元素开始并检查沿树向下移动到所需元素的每个元素。

---

在这种情况下，简单的“通过链接文本”或“通过部分链接文本”定位器应该可以完美地工作：

element(by.linkText("Custom")).click();

请注意，可能会抛出Failed: element not visible 错误，因为您在尝试单击子菜单之前没有单击菜单将其打开（假设这些是您需要单击的子菜单链接）。

您可能还需要等待元素可点击：

var EC = protractor.ExpectedConditions;
var custom = element(by.linkText("Custom"));

browser.wait(Ec.elementToBeClickable(custom), 5000);
custom.click();

希望对您有所帮助。