Question

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

这是html：

我尝试使用by.className： element（by.className（“ filter-button”））。click（）;

使用。 xpath： 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>

Answer 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();
		});
};

Answer 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");

我还没有真正运行它，所以您可能需要对其进行调整

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

2 个答案: