Comment sélectionner une option dans une liste déroulante dans les tests e2e Protractorjs

Question

Je suis en train d'essayer de sélectionner une option dans une liste déroulante pour les tests e2e d'Angular en utilisant Protractor.

Voici un extrait de code de l'option de sélection :

    Ranjans Mobile Testing
    BeaverBox Testing
    BadgerBox
    CritterCase
    BoxLox
    BooBoBum

J'ai essayé :

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

Cela me donne l'erreur suivante :

Une chaîne invalide ou illégale a été spécifiée Informations sur la version : version : '2.35.0', révision : 'c916b9d', heure : '2013-08-12 15:42:01' Informations système : nom du système d'exploitation : 'Mac OS X', architecture du système d'exploitation : 'x86_64', version du système d'exploitation : '10.9', version de Java : '1.6.0_65' Informations sur le pilote : version du pilote : inconnue

J'ai aussi essayé :

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

Cela me donne l'erreur suivante :

ElementNotVisibleError: L'élément n'est pas actuellement visible et ne peut donc pas être interagi avec Durée ou temps d'attente de la commande : 9 millisecondes Informations sur la version : version : '2.35.0', révision : 'c916b9d', heure : '2013-08-12 15:42:01' Informations système : nom du système d'exploitation : 'Mac OS X', architecture du système d'exploitation : 'x86_64', version du système d'exploitation : '10.9', version de Java : '1.6.0_65' ID de session : bdeb8088-d8ad-0f49-aad9-82201c45c63f Informations sur le pilote : org.openqa.selenium.firefox.FirefoxDriver Capacités [{plateforme=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}]

Est-ce que quelqu'un pourrait s'il vous plaît m'aider avec ce problème ou éclairer ce que je pourrais faire de mal ici.

Answer 1

Pour moi, ça a fonctionné comme un charme

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

Answer 2

J'ai eu un problème similaire et j'ai finalement écrit une fonction d'aide qui sélectionne les valeurs d'un menu déroulant.

J'ai finalement décidé que ça me convenait de sélectionner par le numéro de l'option, j'ai donc écrit une méthode qui prend un élément et le numéro de l'option, et sélectionne cette option. Si le numéro de l'option est nul, cela ne sélectionne rien (laissant le menu déroulant non sélectionné).

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

J'ai écrit un article de blog si vous voulez plus de détails, il traite également de la vérification du texte de l'option sélectionnée dans un menu déroulant : http://technpol.wordpress.com/2013/12/01/protractor-and-dropdowns-validation/

Answer 3

Une approche élégante impliquerait de faire une abstraction similaire à ce que proposent instinctivement d'autres bindings de langage selenium (par exemple, la classe Select en Python ou Java).

Créons un enveloppe pratique et cachons les détails de l'implémentation à l'intérieur :

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;

Exemple d'utilisation (remarquez à quel point c'est lisible et facile à utiliser) :

var SelectWrapper  = require('select-wrapper');
var mySelect = new SelectWrapper(by.id('locregion'));

# sélectionner une option par valeur
mySelect.selectByValue('4');

# sélectionner par texte visible
mySelect.selectByText('BoxLox');

Solution tirée du sujet suivant : Abstract abstraction.

---

Pour votre information, j'ai créé une demande de fonctionnalité : Select -> option abstraction.

Answer 4

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

Answer 5

Pour accéder à une option spécifique, vous devez fournir le sélecteur nth-child():

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