量角器 - 从引导下拉列表中选择答案

【问题标题】：Protractor - Select from Bootstrap Dropdown量角器 - 从引导下拉列表中选择
【发布时间】：2016-04-19 13:13:16
【问题描述】：

我有一个Bootstrap single-button dropdown，我想使用量角器单击下拉菜单中显示的选项之一。我该如何做到这一点？

               <div class="btn-group" ng-if="!persist.edit" dropdown>
                    <button type="button"
                            class="btn btn-default"
                            dropdown-toggle>
                        <span translate="GENERAL.ACTIONS"></span>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">

                        <!-- Check In -->
                        <li role="presentation">
                            <a ng-click="checkIn()"
                               role="menuitem"
                               tabindex="-1"
                               translate="ITEMS.LIST.BUTTON_CHECK_ITEM_IN">
                            </a>
                        </li>


                        <!-- Check Out -->
                        <li role="presentation"">
                            <a ng-click="checkOut()"
                               role="menuitem"
                               tabindex="-1"
                               translate="ITEMS.LIST.BUTTON_CHECK_ITEM_OUT"
                               translate-value-length="1">
                            </a>
                        </li>
                    </ul>
                </div>

我试过这个（下拉被调用，但点击失败）：

it('Should click Actions button and show dropdown', function(){
    element(by.buttonText("Actions")).click(); 
    browser.sleep(1000);
});
it('Should click the Check Item Out dropdown option and change status to checked out', function(){
    element(by.css('[value="ITEMS.LIST.BUTTON_CHECK_ITEM_OUT"]')).click();
});

【问题讨论】：

标签： javascript twitter-bootstrap selenium selenium-webdriver protractor

【解决方案1】：

首先，点击“下拉切换”按钮打开下拉菜单。然后，选择一个选项：

var dropDown = element(by.css("div[dropdown]"));
dropDown.element(by.css("button[dropdown-toggle]")).click(); 
dropDown.element(by.css("a[ng-click*=checkIn]")).click();  // Check In

工作代码：

    element(by.buttonText("Actions")).click(); 
    element(by.css('[ng-click="]checkIn()"]')).click();  // Check In

【讨论】：

看起来它没有点击“checkIn”部分（从页面上的另一个锚元素中选择）。我不太明白语法，你在链接，对吧？ "使用 ng-click class= "checkIn" 选择锚点。为什么是 *？
@VSO 好的，已更新，使其特定于上下文，特定于下拉菜单。 *= 基本上意味着“包含”。
我在帖子末尾添加了我尝试的内容的编辑（我将在之后删除），但它引发了错误。请注意，我在页面上有大约 10 个下拉菜单，因此 var dropDown 发生了变化。我知道它会按照我的方式选择正确的下拉菜单。我认为它不会与您的代码混淆，但如果有，请告诉我。
让我再问你一个理论上的问题 - 在我点击下拉菜单后，我是否可以通过任何方式选择元素，然后点击它们，而无需通过父元素，理论上？或者我必须通过父母？顺便说一句，感谢所有帮助。
@VSO 当然，您不需要“通过父元素”。感谢您的更新。

【解决方案2】：

从 Bootstrap Dropdown 中选择一个干净的解决方案是先点击 buttonText，然后点击 linkText：

element(by.buttonText('your button')).click();
element(by.linkText('your selection')).click();

【讨论】：