带打字稿的量角器下拉菜单 [英] Dropdown in Protractor with typescript

问题描述

我是Protractor的新手，并且我想自动执行下拉菜单。我对如何在javascript中获得它有一些想法，但是我在这里使用打字稿。有人可以根据我传递的文字建议我如何获得下拉列表。

I m new to Protractor and I want to automate a dropdown selection. I have some idea on how to get it in javascript, but here i m using typescript. Can anyone suggest me on how to get the dropdown based on the text we pass.

例如：

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

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

how can I select the dropdown value based on the text visible.

推荐答案

您可以执行以下操作：

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

如果要自动化，可以创建包装器类。在您的情况下，应如下所示：

If you want to automate you can create a wrapper class. In your case that would look as follows:

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');

我没有对此进行测试，但这应该可以工作，因为我几乎以相同的方式使用它。

I did not test this but this should work as I use it almost the same way.

这篇关于带打字稿的量角器下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！