我正在尝试从下拉列表中选择一个选项，用于使用量角器进行角度 e2e 测试。
以下是选择选项的代码片段：
<select id="locregion" class="create_select ng-pristine ng-invalid ng-invalid-required" required="" ng-disabled="organization.id !== undefined" ng-options="o.id as o.name for o in organizations" ng-model="organization.parent_id">
<option value="?" selected="selected"></option>
<option value="0">Ranjans Mobile Testing</option>
<option value="1">BeaverBox Testing</option>
<option value="2">BadgerBox</option>
<option value="3">CritterCase</option>
<option value="4">BoxLox</option>
<option value="5">BooBoBum</option>
</select>
我试过：
ptor.findElement(protractor.By.css('select option:1')).click();
这给了我以下错误：
指定了无效或非法的字符串构建信息：版本："2.35.0"，修订版："c916b9d"，时间："2013-08-12 15：42：01"系统信息： os.name： 'Mac OS X'， os.arch： 'x86_64'， os.version： '10.9'， java.version： '1.6.0_65'驱动程序信息：驱动程序版本：未知
我也尝试过：
ptor.findElement(protractor.By.xpath('/html/body/div[2]/div/div[4]/div/div/div/div[3]/ng-include/div/div[2]/div/div/organization-form/form/div[2]/select/option[3]')).click();
这给了我以下错误：
ElementNotVisibleError：元素当前不可见，因此可能无法与之交互 命令持续时间或超时：9 毫秒 构建信息：版本："2.35.0"，修订版："c916b9d"，时间："2013-08-12 15：42：01" 系统信息： os.name： 'Mac OS X'， os.arch： 'x86_64'， os.version： '10.9'， java.version： '1.6.0_65' 会话 ID： bdeb8088-d8ad-0f49-aad9-82201c45c63f 驱动程序信息： org.openqa.selenium.firefox.Firefox Capabilities [{platform=MAC， acceptSslCerts=true， javascriptEnabled=true， browserName=firefox， rotatable=false， locationContextEnabled=true， version=24.0， cssSelectorsEnabled=true， databaseEnabled=true， handlesAlerts=true， browserConnectionEnabled=true， nativeEvents=false， webStorageEnabled=true， applicationCacheEnabled=false， takesScreenshot=true}]
任何人都可以帮助我解决这个问题或阐明我可能在这里做错了什么。
就像一个魅力
element(by.cssContainingText('option', 'BeaverBox Testing')).click();
我遇到了类似的问题，最终编写了一个选择下拉值的辅助函数。
我最终决定按选项编号进行选择，因此编写了一个方法，该方法采用元素和选项编号，并选择该选项编号。 如果选项数字为空，则不选择任何内容（不选择下拉列表）。
var selectDropdownbyNum = function ( element, optionNum ) {
if (optionNum){
var options = element.all(by.tagName('option'))
.then(function(options){
options[optionNum].click();
});
}
};
如果您想了解更多细节，我写了一篇博客文章，它还涵盖了在下拉列表中验证所选选项的文本：http://technpol.wordpress.com/2013/12/01/protractor-and-dropdowns-validation/
一个优雅的方法涉及制作一个类似于其他 selenium 语言绑定提供的开箱即用的抽象（例如 Select Python 或 Java 中的类）。
让我们做一个方便的包装器，并将实现细节隐藏在里面：
var SelectWrapper = function(selector) {
this.webElement = element(selector);
};
SelectWrapper.prototype.getOptions = function() {
return this.webElement.all(by.tagName('option'));
};
SelectWrapper.prototype.getSelectedOptions = function() {
return this.webElement.all(by.css('option[selected="selected"]'));
};
SelectWrapper.prototype.selectByValue = function(value) {
return this.webElement.all(by.css('option[value="' + value + '"]')).click();
};
SelectWrapper.prototype.selectByPartialText = function(text) {
return this.webElement.all(by.cssContainingText('option', text)).click();
};
SelectWrapper.prototype.selectByText = function(text) {
return this.webElement.all(by.xpath('option[.="' + text + '"]')).click();
};
module.exports = SelectWrapper;
使用示例（注意它的可读性和易用性）：
var SelectWrapper = require('select-wrapper');
var mySelect = new SelectWrapper(by.id('locregion'));
# select an option by value
mySelect.selectByValue('4');
# select by visible text
mySelect.selectByText('BoxLox');
解决方案取自以下主题：选择 -> 选项抽象。
仅供参考，创建了一个功能请求：选择 -> 选项抽象。
element(by.model('parent_id')).sendKeys('BKN01');
要访问特定选项，您需要提供 nth-child（） 选择器：
ptor.findElement(protractor.By.css('select option:nth-child(1)')).click();
这就是我选择的方式。
function switchType(typeName) {
$('.dropdown').element(By.cssContainingText('option', typeName)).click();
};
这是我是如何做到的：
$('select').click();
$('select option=["' + optionInputFromFunction + '"]').click();
// This looks useless but it slows down the click event
// long enough to register a change in Angular.
browser.actions().mouseDown().mouseUp().perform();
试试这个，它对我有用：
element(by.model('formModel.client'))
.all(by.tagName('option'))
.get(120)
.click();
你可以试试这个希望它会起作用
element.all(by.id('locregion')).then(function(selectItem) {
expect(selectItem[0].getText()).toEqual('Ranjans Mobile Testing')
selectItem[0].click(); //will click on first item
selectItem[3].click(); //will click on fourth item
});
设置选项元素的另一种方法：
var select = element(by.model('organization.parent_id'));
select.$('[value="1"]').click();
要选择具有唯一 ID 的项目（选项），如下所示：
<select
ng-model="foo"
ng-options="bar as bar.title for bar in bars track by bar.id">
</select>
我正在使用这个：
element(by.css('[value="' + neededBarId+ '"]')).click();
我们编写了一个库，其中包含 3 种选择选项的方法：
selectOption(option: ElementFinder |Locator | string, timeout?: number): Promise<void>
selectOptionByIndex(select: ElementFinder | Locator | string, index: number, timeout?: number): Promise<void>
selectOptionByText(select: ElementFinder | Locator | string, text: string, timeout?: number): Promise<void>
此函数的另一个功能是，它们在对select执行任何操作之前等待元素显示。
你可以在npm @hetznercloud/protractor-test-helper上找到它。还提供了 TypeScript 的键入。
也许不是超级优雅，但效率很高：
function selectOption(modelSelector, index) {
for (var i=0; i<index; i++){
element(by.model(modelSelector)).sendKeys("uE015");
}
}
这只会将键发送到您想要的选择上，在我们的例子中，我们使用 modelSelector，但显然您可以使用任何其他选择器。
然后在我的页面对象模型中：
selectMyOption: function (optionNum) {
selectOption('myOption', optionNum)
}
从测试中：
myPage.selectMyOption(1);
问题是，适用于常规角度选择框的解决方案不适用于使用量角器的角度材料 md-select 和 md-option。这个是由另一个人发布的，但它对我有用，我还无法对他的帖子发表评论（只有 23 个代表点）。另外，我清理了一下，而不是browser.sleep，我使用了browser.waitForAngular（）;
element.all(by.css('md-select')).each(function (eachElement, index) {
eachElement.click(); // select the <select>
browser.waitForAngular(); // wait for the renderings to take effect
element(by.css('md-option')).click(); // select the first md-option
browser.waitForAngular(); // wait for the renderings to take effect
});
在 Firefox 中选择选项时存在一个问题，Droogans 的黑客修复了我想在这里明确提及的问题，希望它可以为某人省去一些麻烦：https://github.com/angular/protractor/issues/480。
即使您的测试在 Firefox 本地通过，您也可能会发现它们在 CircleCI 或 TravisCI 或任何您用于 CI&部署的测试上都失败了。从一开始就意识到这个问题会为我节省很多时间：）
设置选项元素的助手：
selectDropDownByText:function(optionValue) {
element(by.cssContainingText('option', optionValue)).click(); //optionValue: dropDownOption
}
如果下面是给定的下拉列表-
<select ng-model="operator">
<option value="name">Addition</option>
<option value="age">Division</option>
</select>那么量角器代码可以是-
var operators=element(by.model('operator'));
operators.$('[value=Addition]').click();源 https://github.com/angular/protractor/issues/600
按索引选择选项：
var selectDropdownElement= element(by.id('select-dropdown'));
selectDropdownElement.all(by.tagName('option'))
.then(function (options) {
options[0].click();
});
我对PaulL编写的解决方案进行了一些改进。首先，我修复了代码以与最后一个量角器API兼容。然后我将量角器配置文件的"onPrepare"部分中的函数声明为浏览器实例的成员，因此可以从任何 e2e 规范中引用它。
onPrepare: function() {
browser._selectDropdownbyNum = function (element, optionNum) {
/* A helper function to select in a dropdown control an option
* with specified number.
*/
return element.all(by.tagName('option')).then(
function(options) {
options[optionNum].click();
});
};
},
下面的示例是最简单的方法。我已经测试并通过了量角器版本 5.4.2
//Drop down selection using option's visibility text
element(by.model('currency')).element(by.css("[value='Dollar']")).click();
Or use this, it $ isshort form for .By.css
element(by.model('currency')).$('[value="Dollar"]').click();
//To select using index
var select = element(by.id('userSelect'));
select.$('[value="1"]').click(); // To select using the index .$ means a shortcut to .By.css
完整代码
describe('Protractor Demo App', function() {
it('should have a title', function() {
browser.driver.get('http://www.way2automation.com/angularjs-protractor/banking/#/');
expect(browser.getTitle()).toEqual('Protractor practice website - Banking App');
element(by.buttonText('Bank Manager Login')).click();
element(by.buttonText('Open Account')).click();
//Drop down selection using option's visibility text
element(by.model('currency')).element(by.css("[value='Dollar']")).click();
//This is a short form. $ in short form for .By.css
// element(by.model('currency')).$('[value="Dollar"]').click();
//To select using index
var select = element(by.id('userSelect'));
select.$('[value="1"]').click(); // To select using the index .$ means a shortcut to .By.css
element(by.buttonText("Process")).click();
browser.sleep(7500);// wait in miliseconds
browser.switchTo().alert().accept();
});
});
有关如何在模型下拉列表中选择一个选项的答案，并且我使用了这种组合，它帮助我解决了 Angular 材料。
element(by.model("ModelName")).click().element(By.xpath('xpathlocation')).click();
似乎当将所有代码全部抛出一行时，它可以在下拉列表中找到该元素。
这个解决方案花了很多时间，我希望这对某人有所帮助。
如果上面的答案都不适合你，试试这个
Works with async/await too
用于按文本选择选项
let textOption = "option2"
await element(by.whichever('YOUR_DROPDOWN_SELECTOR'))
.getWebElement()
.findElement(by.xpath(`.//option[text()="${textOption}"]`))
.click();
或按数字
let optionNumber = 2
await element(by.whichever('YOUR_DROPDOWN_SELECTOR'))
.getWebElement()
.findElement(by.xpath(`.//option[${optionNumber}]`))
.click();
当然，您可能需要修改子选项的路径
不要问我为什么，但这是我自动化下拉菜单的唯一方法，当我已经失去希望时
<小时 />Update
实际上，在一种情况下，即使这种方法也不起作用。这有点丑陋，但有效。我只需要选择两次值
我们想使用 angularjs 材料的优雅解决方案，但它不起作用，因为在单击 md-select 之前，DOM 中实际上没有选项/md-option 标签。所以"优雅"的方式对我们不起作用（注意角度材料！这是我们为它所做的，不知道这是否是最好的方法，但它现在肯定有效
element.all(by.css('md-select')).each(function (eachElement, index) {
eachElement.click(); // select the <select>
browser.driver.sleep(500); // wait for the renderings to take effect
element(by.css('md-option')).click(); // select the first md-option
browser.driver.sleep(500); // wait for the renderings to take effect
});
当选择打开时，选择下一个选择的方式会有一个叠加层。 这就是为什么我们需要等待 500 毫秒，以确保我们不会遇到材质效果仍在起作用的麻烦。
设置选项元素的另一种方法：
var setOption = function(optionToSelect) {
var select = element(by.id('locregion'));
select.click();
select.all(by.tagName('option')).filter(function(elem, index) {
return elem.getText().then(function(text) {
return text === optionToSelect;
});
}).then(function(filteredElements){
filteredElements[0].click();
});
};
// using the function
setOption('BeaverBox Testing');
----------
element.all(by.id('locregion')).then(function(Item)
{
// Item[x] = > // x is [0,1,2,3]element you want to click
Item[0].click(); //first item
Item[3].click(); // fourth item
expect(Item[0].getText()).toEqual('Ranjans Mobile Testing')
});
您可以按值选择下拉选项： $('#locregion').$('[value="1"]').click();
以下是通过选项值或索引进行操作的方法。这个例子有点粗糙，但它展示了如何做你想做的事情：
.html：
<mat-form-field id="your-id">
<mat-select>
<mat-option [value]="1">1</mat-option>
<mat-option [value]="2">2</mat-option>
</mat-select>
</mat-form-field>
TS：
function selectOptionByOptionValue(selectFormFieldElementId, valueToFind) {
const formField = element(by.id(selectFormFieldElementId));
formField.click().then(() => {
formField.element(by.tagName('mat-select'))
.getAttribute('aria-owns').then((optionIdsString: string) => {
const optionIds = optionIdsString.split(' ');
for (let optionId of optionIds) {
const option = element(by.id(optionId));
option.getText().then((text) => {
if (text === valueToFind) {
option.click();
}
});
}
});
});
}
function selectOptionByOptionIndex(selectFormFieldElementId, index) {
const formField = element(by.id(selectFormFieldElementId));
formField.click().then(() => {
formField.element(by.tagName('mat-select'))
.getAttribute('aria-owns').then((optionIdsString: string) => {
const optionIds = optionIdsString.split(' ');
const optionId = optionIds[index];
const option = element(by.id(optionId));
option.click();
});
});
}
selectOptionByOptionValue('your-id', '1'); //selects first option
selectOptionByOptionIndex('your-id', 1); //selects second option
static selectDropdownValue(dropDownLocator,dropDownListLocator,dropDownValue){
let ListVal ='';
WebLibraryUtils.getElement('xpath',dropDownLocator).click()
WebLibraryUtils.getElements('xpath',dropDownListLocator).then(function(selectItem){
if(selectItem.length>0)
{
for( let i =0;i<=selectItem.length;i++)
{
if(selectItem[i]==dropDownValue)
{
console.log(selectItem[i])
selectItem[i].click();
}
}
}
})
}
我们可以为此创建一个自定义的 DropDown 类，并添加一个方法作为：
async selectSingleValue(value: string) {
await this.element.element(by.xpath('.//option[normalize-space(.)='' + value + '']')).click();
}
此外，为了验证当前选择了哪个值，我们可以有：
async getSelectedValues() {
return await this.element.$('option:checked').getText();
}
这是一个简单的单行答案，其中 angular 具有特殊的定位器，可以帮助从列表中选择和索引。
element.all(by.options('o.id as o.name for o in organizations')).get(Index).click()