J'essaie de sélectionner une option dans une liste déroulante pour les tests angulaires e2e à l'aide d'un rapporteur.
Voici l'extrait de code de l'option de sélection:
<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>
J'ai essayé:
ptor.findElement(protractor.By.css('select option:1')).click();
Cela me donne l'erreur suivante:
Une chaîne non valide ou illégale a été spécifiée Informations de construction: version: '2.35.0', révision: 'c916b9d', heure: '2013-08-12 15:42:01' Informations système: os.name: 'Mac OS X' , os.arch: 'x86_64', os.version: '10 .9 ', java.version:' 1.6.0_65 'Informations sur le pilote: driver.version: unknown
J'ai également 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 actuellement pas visible et ne peut donc pas interagir avec la durée ou le délai d'expiration de la commande: 9 millisecondes Informations de construction: version: '2.35.0', révision: 'c916b9d', heure: '2013-08-12 15:42: 01 'Informations système: os.name:' Mac OS X ', os.arch:' x86_64 ', os.version: '10 .9', java.version: '1.6.0_65' ID de session: bdeb8088-d8ad-0f49-aad9 -82201c45c63f Informations sur le pilote: org.openqa.selenium.firefox.FirefoxDriver Capabilities [{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}]
Quelqu'un peut-il s'il vous plaît m'aider avec ce problème ou jeter un peu de lumière sur ce que je pourrais faire de mal ici.
la source
Pour moi a fonctionné comme un charme
J'espère que ça aide.
la source
ElementFinder
est capable de chaîner, vous pouvez donc faire:element(by.css('.specific-select')).element(by.cssContainingText('option', 'BeaverBox Testing')).click();
Une approche élégante impliquerait de faire une abstraction similaire à ce que d'autres liaisons de langage sélénium offrent prêtes à l'emploi (par exemple,
Select
classe en Python ou Java).Créons un wrapper pratique et masquons les détails de l'implémentation à l'intérieur:
Exemple d'utilisation (notez à quel point il est lisible et facile à utiliser):
Solution tirée du sujet suivant: Sélectionnez -> option abstraction .
FYI, a créé une demande de fonctionnalité: Sélectionnez -> option abstraction .
la source
click()
. Merci.la source
Pour accéder à une option spécifique, vous devez fournir le sélecteur nth-child ():
la source
C'est ainsi que j'ai fait ma sélection.
la source
Voici comment je l'ai fait:
la source
waitForAngular()
méthode du rapporteur .Essayez ceci, cela fonctionne pour moi:
la source
Vous pouvez essayer ceci en espérant que cela fonctionnera
la source
Une autre façon de définir un élément option:
la source
Pour sélectionner des éléments (options) avec des identifiants uniques comme ici:
J'utilise ceci:
la source
Nous avons écrit une bibliothèque qui comprend 3 façons de sélectionner une option:
Une caractéristique supplémentaire de ces fonctions est qu'elles attendent que l'élément soit affiché avant qu'une action sur le
select
soit effectuée.Vous pouvez le trouver sur npm @ hetznercloud / protractor-test-helper . Des typages pour TypeScript sont également fournis.
la source
Peut-être pas super élégant, mais efficace:
Cela envoie simplement la clé vers le bas sur la sélection que vous voulez, dans notre cas, nous utilisons modelSelector mais évidemment vous pouvez utiliser n'importe quel autre sélecteur.
Puis dans mon modèle d'objet de page:
Et du test:
la source
Le problème est que les solutions qui fonctionnent sur des boîtes de sélection angulaires régulières ne fonctionnent pas avec le matériau angulaire md-select et md-option utilisant le rapporteur. Celui-ci a été posté par un autre, mais cela a fonctionné pour moi et je ne peux pas encore commenter son post (seulement 23 points de rep). De plus, je l'ai un peu nettoyé, au lieu de browser.sleep, j'ai utilisé browser.waitForAngular ();
la source
element(by.model('selectModel')).click(); element(by.css('md-option[value="searchOptionValue"]')).click();
mdSelectElement.getAttribute('aria-owns').then( function(val) { let selectMenuContainer = element(by.id(val)); selectMenuContainer.element(by.css('md-option[value="foo"]')).click(); } );
Il y a un problème avec la sélection des options dans Firefox que le piratage de Droogans corrige ici explicitement, en espérant que cela pourrait épargner à quelqu'un des problèmes: https://github.com/angular/protractor/issues/480 .
Même si vos tests réussissent localement avec Firefox, vous pouvez constater qu'ils échouent sur CircleCI ou TravisCI ou tout ce que vous utilisez pour le CI et le déploiement. Être conscient de ce problème dès le début m'aurait fait gagner beaucoup de temps :)
la source
Aide à définir l'élément une option:
la source
Si ci-dessous se trouve la liste déroulante donnée-
Alors le code de protractorjs peut être-
Source- https://github.com/angular/protractor/issues/600
la source
Sélectionnez l'option par index:
la source
J'ai un peu amélioré la solution écrite par PaulL. Tout d'abord, j'ai corrigé le code pour qu'il soit compatible avec la dernière API Protractor. Et puis je déclare la fonction dans la section 'onPrepare' d'un fichier de configuration Protractor en tant que membre de l' instance de navigateur , afin qu'elle puisse être référencée sous n'importe quelle spécification e2e.
la source
J'ai parcouru le filet pour trouver une réponse sur la façon de sélectionner une option dans la liste déroulante d'un modèle et j'ai utilisé cette combinaison qui m'a aidé avec le matériau angulaire.
il semble qu'en lançant le code sur une seule ligne, il pourrait trouver l'élément dans la liste déroulante.
Cela a pris beaucoup de temps pour cette solution, j'espère que cela aidera quelqu'un.
la source
Nous voulions utiliser la solution élégante là-haut en utilisant le matériel angularjs, mais cela n'a pas fonctionné car il n'y a en fait aucune balise option / md-option dans le DOM tant que le md-select n'a pas été cliqué. Donc, la manière "élégante" n'a pas fonctionné pour nous (notez le matériau angulaire!) Voici ce que nous avons fait pour cela à la place, je ne sais pas si c'est la meilleure façon mais cela fonctionne définitivement maintenant
Nous devions avoir 4 sélections sélectionnées et pendant que la sélection est ouverte, il y a une superposition dans la manière de sélectionner la sélection suivante. C'est pourquoi nous devons attendre 500 ms pour nous assurer de ne pas avoir de problèmes avec les effets matériels toujours en action.
la source
Une autre façon de définir un élément option:
la source
la source
Vous pouvez sélectionner des options de liste déroulante par valeur:
$('#locregion').$('[value="1"]').click();
la source
Voici comment le faire par valeur d'option ou par index . Cet exemple est un peu grossier, mais il montre comment faire ce que vous voulez:
html:
ts:
la source
la source
Nous pouvons créer une classe DropDown personnalisée pour cela et ajouter une méthode comme:
Aussi, pour vérifier quelle valeur est actuellement sélectionnée, nous pouvons avoir:
la source
L'exemple ci-dessous est le moyen le plus simple. J'ai testé et passé la version Protractor
5.4.2
Code complet
la source
Il s'agit d'une réponse simple en une ligne dans laquelle angular a un localisateur spécial qui peut aider à sélectionner et à indexer dans la liste.
la source
Sélectionnez l'option par propriété CSS
ou
Où locregion (id), organization.parent_id (nom du modèle) sont les attributs de l'élément select.
la source