如何使用 on-toggle 属性单击下拉菜单

Question

  <div ng-if="domainList.length>1" class="form-group ng-scope">
            <div class="col-sm-3">
                <label translate="ZillaMain.Authentication" class="ng-scope">Authentication</label>
            </div>
            <div class="col-sm-9">
                <label uib-dropdown="" keyboard-nav="true" on-toggle="toggled(open)" class="dropdown">
                    <a href="" tabindex="0" aria-label="" uib-dropdown-toggle="" class="dropdown-toggle" aria-haspopup="true" aria-expanded="false">
                        <!-- ngIf: authentication_domain -->
                        <!-- ngIf: !authentication_domain --><h3 ng-if="!authentication_domain" class="ng-scope">
                            <span translate="ZillaMain.Select" class="ng-scope">Select</span>
                            <i class="icon angle-down-icon"></i>
                        </h3><!-- end ngIf: !authentication_domain -->
                    </a>
  ------
  ------
  ------

使用上面提到的代码，我正在尝试在下拉列表中单击：

this.AuthDD = element(by.css('[on-toggle="toggled(open)"]'));

AuthDD.click();

但这并没有点击下拉菜单，我的测试也没有失败......我不确定它有什么问题。

我也尝试通过element(by.css('a.dropdown-toggle')); 或element(by.css('[translate="ZillaMain.Select"]')); 更改定位器，但它没有在下拉菜单中单击。

量角器中是否有任何不同的方式可以点击下拉菜单？

Answer 1

我会改进您定位下拉列表的方式（我认为您的定位器总体上太宽泛 - 在您的页面上下文中可能不会太宽泛，但我没有使用它）并指出a 元素的定位器通过适当的等待条件来强制执行可靠性：

var authDropdown = element(by.xpath("//label[. = 'Authentication']/following::label[@class = 'dropdown']/a"));
var EC = protractor.ExpectedConditions;

browser.wait(EC.elementToBeClickable(authDropdown), 5000);
authDropdown.click();

我们之所以使用这种 XPath 表达式，是因为我们不仅要定位任何下拉切换链接，还要定位“身份验证”标签之后的那个。

Answer 2

我通过进行以下更改来实现此功能：

 this.AuthDD = element(by.css('i.angle-down-icon'));

 AuthDD.click();