如何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}]

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

我有一个类似的问题,并最终编写了一个帮助函数,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/

对我来说就像一个魅力

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

希望它有帮助。

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

一个优雅的方法将涉及到一个抽象类似于其他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 – >选项抽象 。

要访问一个特定的选项,你需要提供nth-child()select器:

 ptor.findElement(protractor.By.css('select option:nth-child(1)')).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(); 

这是我做我的select。

  this.roomTypeSelect = function () { return element(By.model('hotelForm.roomType')); }; this.switchRoomType = function (optionName) { this.roomTypeSelect().element(By.xpath('//option[text() = \'' + optionName + '\']')).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 }); 

试试这个,它对我有用:

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

也许不是超级优雅,而是高效:

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

要在这里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(); 

问题是在常规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 }); 

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

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

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

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

帮手设置一个选项元素:

 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> 

我们想使用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毫秒,以确保我们不会遇到仍在实施的物质效应。

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

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

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

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

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

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

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

按索引select选项:

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

我已经改进了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(); }); }; }, 

通过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元素的属性。

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

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