在下拉量角器与打字稿(Dropdown in Protractor with typescript)

我新来量角器，我希望自动下拉选择。 我对如何得到它在JavaScript的一些想法，但这里使用打字稿即时通讯。 任何人都可以建议我如何基于我们通过文字来获取下拉列表。

例如：

<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:

嗯，这是不是最有效的方式，它是一种的哈克的方式。 你可以沿着这行做财产以后：

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)`

虽然这不是最实用的方法，它的工作原理是很容易实现。 现在，当你有很多李和需要选择特定的一种这样的事情是不实际的。 对于这一点，这取决于您是如何创建下拉，你可以简单地做什么我做了上面，而不是指望然后使用，并输入，你可以简单地做sendKeys('whatever item you need') 就我而言，我会在我的形成特定的李来测试验证这会工作。 但是，如果你的表单不允许您键入到下拉这可能无法正常工作。

Answer 2:

你可以这样做：

// select combobox
let container = element(by.css('ul'));
// select option
container.element(by.cssContainingText('value 1')).click();

如果你想自动您可以创建一个包装类。 在你的情况下，将如下所示：

import { browser, element, by, ElementArrayFinder, ElementFinder, Locator } from 'protractor';
import { By } from 'selenium-webdriver';
import { ProtractorLocator } from 'protractor/built/locators';

const locators = {
  byText: (text: string) => by.cssContainingText('li', text)
};

export class ListWrapper {

  constructor(private container: ElementFinder) {
    // for example: let container = element(by.css('ul'))
  }

  public async selectByText(text: string): Promise<void> {
    await this.findChild(locators.byText(text)).click();
  }

  public findChild(locator: By | Locator): ElementFinder {
    return this.container.element(locator);
  }

}

然后，在测试中，你可以这样做：

let listWrapper = new ListWrapper(element(by.css('ul')));
await listWrapper.selectByText('Value 1');

我没有测试这一点，但这个应该工作，因为我用它几乎相同的方式。

文章来源: Dropdown in Protractor with typescript