javascript - 如何使用 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"]')); 但它不会点击下拉菜单。

在 Protractor 中是否有任何不同的方式来点击下拉菜单？

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 表达式是因为我们不仅要针对任何下拉切换链接，还要针对“身份验证”标签之后的链接。