如何select下拉protractorjs e2etesting的选项

我正在尝试使用量angular器从angular度e2etesting的下拉列表中select一个选项。

以下是select选项的代码片段：

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

这给了我以下错误：

一个无效的或非法的string指定构build信息：版本：'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'驱动程序信息：driver.version：unknown

我也试过了：

 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毫秒构build信息：版本：'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.FirefoxDriver Capabilities [{platform = MAC，acceptSslCerts = true，javascriptEnabled = true，browserName = firefox，rotate = false，locationContextEnabled = true，版本= 24.0，cssSelectorsEnabled = true，databaseEnabled = true，handlesAlerts = true，browserConnectionEnabled = true，nativeEvents = false，webStorageEnabled = true，applicationCacheEnabled = false，takesScreenshot = true}]

任何人都可以帮助我解决这个问题，或者抛开一些我可能在这里做错的事情。

Answer 1

我有一个类似的问题，并最终编写了一个帮助函数，select下拉值。

我最终决定，我很好地select了选项号码，因此写了一个方法，它带有一个元素和optionNumber，并select这个optionNumber。 如果optionNumber为null，则不会select任何内容（使下拉列表未选中）。

 var selectDropdownbyNum = function ( element, optionNum ) { if (optionNum){ var options = element.findElements(by.tagName('option')) .then(function(options){ options[optionNum].click(); }); } }; 

我写了一篇博客文章，如果你想要更多的细节，还包括在下拉菜单中validation所选选项的文本： http : //technpol.wordpress.com/2013/12/01/protractor-and-dropdowns-validation/

Answer 2

对我来说就像一个魅力

 element(by.cssContainingText('option', 'BeaverBox Testing')).click(); 

希望它有帮助。

Answer 3

 element(by.model('parent_id')).sendKeys('BKN01'); 

Answer 4

一个优雅的方法将涉及到一个抽象类似于其他selenium语言绑定提供了现成的（例如在Python或Java中Select类）。

让我们做一个方便的包装，并隐藏在里面的实现细节：

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

解决scheme取自以下主题： select – >选项抽象 。

---

仅供参考，创build了一项function请求： select – >选项抽象 。

Answer 5

要访问一个特定的选项，你需要提供nth-child（）select器：

 ptor.findElement(protractor.By.css('select option:nth-child(1)')).click(); 

Answer 6

以下是我如何做到的：

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

Answer 7

这是我做我的select。

  this.roomTypeSelect = function () { return element(By.model('hotelForm.roomType')); }; this.switchRoomType = function (optionName) { this.roomTypeSelect().element(By.xpath('//option[text() = \'' + optionName + '\']')).click(); }; 

Answer 8

你可以试试这个希望它会起作用

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

Answer 9

试试这个，它对我有用：

 element(by.model('formModel.client')) .all(by.tagName('option')) .get(120) .click(); 

Answer 10

也许不是超级优雅，而是高效：

 function selectOption(modelSelector, index) { for (var i=0; i<index; i++){ element(by.model(modelSelector)).sendKeys("\uE015"); } } 

这只是发送键到你想要的select，在我们的例子中，我们正在使用modelSelector，但显然你可以使用任何其他select器。

然后在我的页面对象模型中：

 selectMyOption: function (optionNum) { selectOption('myOption', optionNum) } 

而从testing：

 myPage.selectMyOption(1); 

Answer 11

要在这里select具有唯一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(); 

Answer 12

问题是在常规angular度select框上工作的解决scheme不适用于使用量angular器的Angular Material md-select和md-option。 这个是另外一个贴出来的，但是对我很有帮助，我也无法评论他的post（只有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 }); 

Answer 13

另一种设置选项元素的方法：

 var select = element(by.model('organization.parent_id')); select.$('[value="1"]').click(); 

Answer 14

在Firefox中selectDroogans的黑客修复程序有一个问题，我希望在这里明确提到，希望能够帮助别人解决一些问题： https ： //github.com/angular/protractor/issues/480 。

即使您的testing是通过Firefox本地传递的，您可能会发现它们在CircleCI或TravisCI上失败，或者您在CI和部署中使用的任何testing失败。 从一开始就意识到这个问题会节省很多时间:)

Answer 15

帮手设置一个选项元素：

 selectDropDownByText:function(optionValue) { element(by.cssContainingText('option', optionValue)).click(); //optionValue: dropDownOption } 

Answer 16

如果下面是给定的下拉菜单，

  <select ng-model="operator"> <option value="name">Addition</option> <option value="age">Division</option> </select> 

Answer 17

我们想使用angularjs材质上的优雅的解决scheme，但它没有工作，因为实际上没有选项/ md选项标签，直到mdselect被点击。 所以“优雅”的方式对我们来说不起作用（注意angular材！）这就是我们为之而做的，不知道它是否是最好的方法，但现在正在工作

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

我们需要select4个select，当select打开时，select下一个select的方式有一个覆盖。 这就是为什么我们需要等待500毫秒，以确保我们不会遇到仍在实施的物质效应。

Answer 18

另一种设置选项元素的方法：

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

Answer 19

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

Answer 20

我一直在网上寻找一个关于如何select模型下拉选项的答案，我已经使用这个组合，帮助我与Angular材料。

元素（by.model（“ModelName”））。click（）。element（By.xpath（'xpath location'））。click（）;

看起来在将代码全部放在一行中时，可以在下拉列表中find该元素。

花了很多时间来解决这个问题，我希望这能帮助别人。

Answer 21

您可以按值select下拉选项： $('#locregion').$('[value="1"]').click();

Answer 22

按索引select选项：

 var selectDropdownElement= element(by.id('select-dropdown')); selectDropdownElement.all(by.tagName('option')) .then(function (options) { options[0].click(); }); 

Answer 23

我已经改进了PaulL写的解决scheme。 首先，我修复了与最后一个Protractor API兼容的代码。 然后我在Protractorconfiguration文件的'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(); }); }; }, 

Answer 24

通过CSS属性select选项

 element(by.model("organization.parent_id")).element(by.css("[value='1']")).click(); 

要么

 element(by.css("#locregion")).element(by.css("[value='1']")).click(); 

where locregion（id），organization.parent_id（model name）是select元素的属性。

Answer 25

你可以select像这样的下拉选项：

 element(by.xpath(//*[@id="locregion"]//option[contains(text(),"Ranjans Mobile Testing")]')).click();