javascript - Hur man väljer ett alternativ i en rullgardinsmeny i protractorjs e2e-tester

Jag försöker välja ett alternativ från en rullgardinsmeny för Angular e2e-tester med Protractor.

Här är kodsnutten för valalternativet:

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

Jag har försökt:

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

Detta ger mig följande fel:

En ogiltig eller olaglig sträng angavs Bygginformation: version: '2.35.0', revision: 'c916b9d', tid: '2013-08-12 15:42:01' Systeminformation: os.namn: 'Mac OS X', os.arch: 'x86_64', os.version: '10.9', java.version: '1.6.0_65' Drivarinformation: driver.version: okänd

Jag har också försökt:

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

Detta ger mig följande fel:

ElementNotVisibleError: Elementet är för närvarande inte synligt och kan därför inte interageras med Kommando varaktighet eller timeout: 9 millisekunder Bygginformation: version: '2.35.0', revision: 'c916b9d', tid: '2013-08-12 15:42:01' Systeminformation: os.name: 'Mac OS X', os.arch: 'x86_64', os.version: '10.9', java.version: '1.6.0_65' Sessions-ID: bdeb8088-d8ad-0f49-aad9-82201c45c63f Drivarinformation: org.openqa.selenium.firefox.FirefoxDriver Funktioner [{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}]

Kan någon vänligen hjälpa mig med detta problem eller kasta lite ljus över vad jag kan göra fel här.

Svar #1

För mig fungerade det som en charm

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

Svar #2

Jag hade ett liknande problem och skrev till slut en hjälpfunktion som väljer värden i rullgardinsmenyer.

Jag bestämde mig till slut för att det var okej att välja efter alternativnummer, och skrev därför en metod som tar ett element och optionNumber, och väljer det optionNumber. Om optionNumber är null markeras ingenting (rullgardinsmenyn lämnas ovald).

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

Jag skrev ett blogginlägg om du vill ha mer detaljer, det täcker också att verifiera texten för det valda alternativet i en dropdown: http://technpol.wordpress.com/2013/12/01/protractor-and-dropdowns-validation/

Svar #3

En elegant metod skulle innebära att göra en abstraktion liknande det som andra Selenium-språkbibliotek erbjuder direkt (t.ex. Select-klassen i Python eller Java).

Låt oss skapa en smidig wrapper och dölja implementeringsdetaljer inuti:

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;

Exempel på användning (notera hur läsbart och lättanvänt det är):

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

Lösning hämtad från följande ämne: Välj -> alternativ abstraktion.

För din information, skapade en funktionsförfrågan: Välj -> alternativ abstraktion.

Svar #4

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

Svar #5

För att komma åt ett specifikt alternativ behöver du ange nth-child()-väljaren:

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

Relaterade artiklar