如何使用量角器从下拉列表中选择一个值？答案

【问题标题】：How to select a value from a drop down using protractor?如何使用量角器从下拉列表中选择一个值？
【发布时间】：2019-08-13 21:33:07
【问题描述】：

我正在尝试单击一个按钮，然后从下拉列表中选择一个值。我点击城市按钮，然后选择多伦多。但是我什至无法点击按钮。

这里是html：

我尝试过使用 by.className ： element(by.className("filter-button")).click();

使用者。路径： element(by.xpath("/html/body/div[2]/div/div/div/div[1]/div[1]/div[1]")).click();

好像没用。

<div class="content-wrapper list-page">
    <div class="content">
        <div class="section-wrapper page-full-width">
            <div class="section page-centered">
                <div class="filter-bar"><span class="medium-utility-label filter-by-label">Filter by:</span>
                    <div role="button" class="filter-button-wrapper" tabindex="0" aria-label="Filter by City: All" aria-haspopup="true" aria-expanded="false">
                        <div class="filter-button">City
                            <svg class="filter-button-caret icon icon-caret-down" width="16px" height="16px" viewBox="0 0 16 16">
                                <path d="M7.6741598,11.3413318 L8.03952616,11.7324251 L8.40489252,11.3413318 L14.8653664,4.42595055 L14.1346336,3.74328687 L7.6741598,10.6586682 L8.40489252,10.6586682 L1.86536636,3.65866816 L1.13463364,4.34133184 L7.6741598,11.3413318 Z M7.6741598,11.3413318" fill="#979797"></path>
                            </svg>
                        </div>
                        <div class="filter-popup">
                            <ul>
                                <li>
                                    <a class="category-link selected" href="?" rel="nofollow">
                                        <svg class="selected-filter-checkmark icon icon-checkmark" width="16px" height="16px" viewBox="0 0 16 16">
                                            <path d="M6.2,14.4L0,8.2l2.5-2.5l3.5,3.5c0.1,0.1,0.2,0.1,0.2,0L13.5,2L16,4.5L6.2,14.4z"></path>
                                        </svg>All</a>
                                </li>
                                <li><a class="category-link" href="?location=Chicago%2C%20Illinois" rel="nofollow">Chicago, Illinois</a>
                                </li>
                                <li><a class="category-link" href="?location=Edmonton%2C%20Alberta%2C%20Canada" rel="nofollow">Edmonton, Alberta, Canada</a>
                                </li>

【问题讨论】：

标签： javascript html protractor

【解决方案1】：

您需要先点击下拉菜单，然后找到所需的选项并点击它。
请尝试以下操作：

const EC = protractor.ExpectedConditions;
const city = element.all(by.css('.filter-bar .filter-button-wrapper .filter-button')).get(0);
const dropDownPopUp = element.all(by.css('.filter-popup')).get(0);
const toronto = dropDownPopUp.all(by.cssContainingText('.category-link', 'Toronto, Ontario, Canada'));

const selectToronto = function () {
	return browser.wait(EC.elementToBeClickable(city))
		.then(function() {
			return city.click();
		})
		.then(function() {
			return browser.wait(EC.elementToBeClickable(toronto))
		})
		.then(function() {
			return toronto.click();
		});
};

【讨论】：

感谢您的帮助。当我尝试单击按钮时，我不再出现错误，但它似乎不止一次找到实例：[16:09:08] W/element - 为定位器找到了多个元素 By(css 选择器， .filter-bar .filter-button-wrapper .filter-button) - 将使用第一个结果
如果有多个元素，在这种情况下，你需要第一个元素，你可以这样：element.all(by.css('.filter-bar .filter-button-wrapper .filter-button')).first(); Were you could select the right option from the dropdown with my method ?考虑将我的答案标记为正确，以供其他人查看。谢谢。
谢谢华金。我不再收到警告，但 GUI 中没有发生任何事情。点击按钮不会打开弹出下拉菜单

【解决方案2】：

获取下拉元素，然后获取选项并在它们之间循环查找您想要的选项

async function selectFromList(dropDownElem,stringValue){
    const dropDownOptions = await dropDownElem.all(by.tagName('li'));
    for(let i =0;i< dropDownOptions.length;i++){
        if(await dropDownOptions[i].getText() === stringValue){
            await dropDownOptions[i].click();
        }
    }
}
const dropDownElem = element(by.className("filter-popup");
selectFromList(dropDownElem, "Chicago, Illinois");

我还没有实际运行，所以你可能需要调整它

【讨论】：

可能也想在循环中添加一个中断