如何在下拉量子器e2e测试中选择选项

Question

我试图从下拉列表中选择使用量角器进行角度e2e测试的选项.

以下是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();

这给了我以下错误:

指定了无效或非法字符串构建信息:版本:'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毫秒构建信息:版本:'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,rotating = false,locationContextEnabled = true,version = 24.0,cssSelectorsEnabled = true,databaseEnabled = true,handlesAlerts = true,browserConnectionEnabled = true,nativeEvents = false,webStorageEnabled = true,applicationCacheEnabled = false,takesScreenshot = true}]

任何人都可以帮助我解决这个问题,或者说明我可能在这里做错了什么.

Answer 1

对我来说,工作就像一个魅力

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

希望能帮助到你.

Answer 2

我遇到了类似的问题,并最终编写了一个帮助函数来选择下拉值.

我最终决定通过选项号选择我很好,因此写了一个方法,它接受一个元素和optionNumber,并选择那个optionNumber.如果optionNumber为null,则不选择任何内容(不选择下拉列表).

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/

Answer 3

一种优雅的方法是使抽象类似于其他selenium语言绑定提供的开箱即用(例如SelectPython或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');

解决方案取自以下主题:选择 - >选项抽象.

仅供参考,创建了一个功能请求:选择 - >选项抽象.

Answer 4

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

Answer 5

要访问特定选项,您需要提供nth-child()选择器:

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

Answer 6

这就是我做出选择的方式.

function switchType(typeName) {
     $('.dropdown').element(By.cssContainingText('option', typeName)).click();
};

Answer 7

我是这样做的:

$('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 8

试试这个,它对我有用:

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