javascript - 带 typescript 的 Protractor 中的下拉菜单

Question

我是 Protractor 新手，我想自动执行下拉选择。我对如何在 javascript 中获取它有一些想法，但在这里我使用 typescript 。谁能建议我如何根据我们传递的文本获取下拉菜单。

例如:

<ul class="ui-dropdown-items ui-dropdown-list ui-widget-content ui-widget ui-corner-all ui-helper-reset ng-tns-c46-10 ng-star-inserted" style="">
                        <!---->
                        <!----><!---->
                            <!---->
                            <!----><li class="ng-tns-c46-10 ui-dropdown-item ui-corner-all ng-star-inserted">
                                <!----><span class="ng-tns-c46-10 ng-star-inserted">Value 1</span>
                                <!---->
                            </li><li class="ng-tns-c46-10 ui-dropdown-item ui-corner-all ng-star-inserted">
                                <!----><span class="ng-tns-c46-10 ng-star-inserted">Value 2</span>
                                <!---->
                            </li><li class="ng-tns-c46-10 ui-dropdown-item ui-corner-all ng-star-inserted">
                                <!----><span class="ng-tns-c46-10 ng-star-inserted">Value 3</span>
                                <!---->
                            </li>


                        <!---->
                        <!---->
                    </ul>

如何根据可见文本选择下拉值。

Answer 1

这不是最有效的方法，这是一种 hacky 方法。您可以按照以下方式做一些事情:

object class `getDropDown() {
                   return element(by.className('the class you assign to the dropdown');

然后在你的规范类中:

`it('should select an element in the drop down), () => {
                             page.navigateTo(); 
                             page.getDropDown().sendKeys(Key.DOWN)
                             page,getDropDown().sendKeys(Key.RETURN)`

虽然这不是最实用的方法，但它有效并且实现起来非常简单。现在，当你有很多 li 并且需要选择一个特定的 li 时，这样的事情是不切实际的。为此，根据您创建下拉列表的方式，您可以简单地执行我上面所做的操作，期望而不是使用向下并输入，您可以简单地执行 sendKeys('whatever item you need')。就我而言，当我测试表单中特定 li 的验证时，这会起作用。但如果您的表单不允许您在下拉列表中输入内容，则这可能不起作用。