首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >带有typescript的量角器中的下拉列表

带有typescript的量角器中的下拉列表
EN

Stack Overflow用户
提问于 2018-05-10 14:20:49
回答 2查看 537关注 0票数 0

我是Protractor的新手,我想自动化下拉选择。我对如何在javascript中获得它有一些想法,但这里我使用的是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>

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

EN

回答 2

Stack Overflow用户

发布于 2018-06-18 21:28:36

你可以这样做:

代码语言:javascript
运行
复制
// select combobox
let container = element(by.css('ul'));
// select option
container.element(by.cssContainingText('value 1')).click();

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

代码语言:javascript
运行
复制
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);
  }

}

然后,在测试中,您可以执行以下操作:

代码语言:javascript
运行
复制
let listWrapper = new ListWrapper(element(by.css('ul')));
await listWrapper.selectByText('Value 1');

我没有对此进行测试,但这应该是可行的,因为我使用它的方式几乎是一样的。

票数 1
EN

Stack Overflow用户

发布于 2018-06-18 22:20:06

这不是最有效的方式,这是一种老生常谈的方式。你可以像这样做一些事情:

代码语言:javascript
运行
复制
object class `getDropDown() {
                   return element(by.className('the class you assign to the dropdown');

然后在您的spec类中:

代码语言:javascript
运行
复制
`it('should select an element in the drop down), () => {
                             page.navigateTo(); 
                             page.getDropDown().sendKeys(Key.DOWN)
                             page,getDropDown().sendKeys(Key.RETURN)`

虽然这不是最实用的方法,但它是有效的,并且实现起来非常简单。现在,当您有大量的li并且需要选择一个特定的li时,这样的东西是不实际的。因此,根据您创建下拉菜单的方式,您可以简单地执行我上面所做的操作,expect而不是使用down和enter,您可以简单地执行sendKeys('whatever item you need')。在我的例子中,当我在我的表单中测试特定li的验证时,这是可行的。但是,如果您的表单不允许您在下拉列表中键入内容,则此操作可能不起作用。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50266723

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档