javascript - traduzione - Come selezionare l'opzione in dropdown protractorjs e2e test




protractor traduzione (17)

Sto provando a selezionare un'opzione da un menu a discesa per i test angolari di e2e usando il goniometro.

Ecco lo snippet di codice dell'opzione 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>

Ho provato:

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

Questo mi dà il seguente errore:

È stata specificata una stringa non valida o illegale Informazioni sulla build: versione: '2.35.0', versione: 'c916b9d', ora: '2013-08-12 15:42:01' Informazioni di sistema: os.name: 'Mac OS X' , os.arch: 'x86_64', os.version: '10 .9 ', java.version:' 1.6.0_65 'Informazioni sul driver: driver.version: sconosciuto

Ho anche provato:

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

Questo mi dà il seguente errore:

ElementNotVisibleError: Element non è attualmente visibile e quindi potrebbe non essere interagito con Durata o timeout del comando: 9 millisecondi Informazioni build: versione: '2.35.0', versione: 'c916b9d', ora: '2013-08-12 15:42: 01 'System info: os.name:' Mac OS X ', os.arch:' x86_64 ', os.version: '10 .9', java.version: '1.6.0_65' ID sessione: bdeb8088-d8ad-0f49-aad9 -82201c45c63f Informazioni sul driver: org.openqa.selenium.firefox.FirefoxDriver Funzionalità [{platform = MAC, acceptSslCerts = true, javascriptEnabled = true, browserName = firefox, ruotatable = false, locationContextEnabled = true, version = 24.0, cssSelectorsEnabled = true, databaseEnabled = true, handlesAlerts = true, browserConnectionEnabled = true, nativeEvents = false, webStorageEnabled = true, applicationCacheEnabled = false, takesScreenshot = true}]

Qualcuno può aiutarmi per favore con questo problema o gettare un po 'di luce su quello che potrei fare di sbagliato qui.


È possibile selezionare le opzioni a discesa in questo modo:

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

È possibile selezionare le opzioni del menu a discesa in base al valore: $('#locregion').$('[value="1"]').click();


Ecco come l'ho fatto:

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

Forse non super elegante, ma efficiente:

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

Questo semplicemente invia la chiave sul selettore desiderato, nel nostro caso utilizziamo modelSelector ma ovviamente puoi usare qualsiasi altro selettore.

Quindi nel mio modello a oggetti della pagina:

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

E dal test:

myPage.selectMyOption(1);

Ho avuto un problema simile e alla fine ho scritto una funzione di supporto che seleziona i valori di dropdown.

Alla fine ho deciso che stavo bene selezionando per numero opzione, e quindi ho scritto un metodo che prende un elemento e l'opzioneNumero, e seleziona quell'opzioneNumero. Se optionNumber è null, non seleziona nulla (lasciando il menu a discesa deselezionato).

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

Ho scritto un post sul blog se vuoi maggiori dettagli, ma copre anche la verifica del testo dell'opzione selezionata in un menu a discesa: http://technpol.wordpress.com/2013/12/01/protractor-and-dropdowns-validation/


Ho cercato la rete per una risposta su come selezionare un'opzione in un modello a discesa e ho usato questa combinazione che mi ha aiutato con materiale angolare.

element (by.model ("ModelName")). click (). element (By.xpath ('percorso xpath')). click ();

sembra che quando si lancia il codice tutto in una riga, potrebbe trovare l'elemento nel menu a discesa.

Ho impiegato molto tempo per questa soluzione, spero che questo aiuti qualcuno a uscire.


Il problema è che le soluzioni che funzionano su normali caselle di selezione angolari non funzionano con il materiale angolare md-select e md-option usando il goniometro. Questo è stato pubblicato da un altro, ma ha funzionato per me e non sono ancora in grado di commentare il suo post (solo 23 punti rep). Inoltre, l'ho ripulito un po ', invece di browser.sleep, ho usato 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
});

Per accedere a un'opzione specifica devi fornire il selettore nth-child ():

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

Per selezionare elementi (opzioni) con ID univoci come qui:

<select
    ng-model="foo" 
    ng-options="bar as bar.title for bar in bars track by bar.id">
</select>

Sto usando questo:

element(by.css('[value="' + neededBarId+ '"]')).click();

Prova questo, funziona per me:

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

Questo è come ho fatto la mia selezione.

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

Se di seguito è riportato il dropdown

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

Quindi il codice protractorjs può essere-

        var operators=element(by.model('operator'));
    		operators.$('[value=Addition]').click();

Fonte: https://github.com/angular/protractor/issues/600


Un altro modo per impostare un elemento opzionale:

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

Un altro modo per impostare un elemento opzionale:

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

Seleziona l'opzione in base alla proprietà CSS

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

o

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

Dove locregion (id), organization.parent_id (nome del modello) sono gli attributi dell'elemento select.


Un approccio elegante implicherebbe la creazione di un'astrazione simile a quella di altri leganti del linguaggio del selenio che offrono out-of-the-box (ad es. Select classe in Python o Java).

Facciamo un wrapper conveniente e nascondiamo i dettagli di implementazione all'interno:

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;

Esempio di utilizzo (nota come è leggibile e facile da usare):

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

Soluzione tratta dal seguente argomento: Seleziona -> opzione astrazione .

Cordiali saluti, ha creato una richiesta di funzionalità: Seleziona -> opzione astrazione .


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




protractor