Ich versuche, eine Option aus einem Dropdown für die Winkel-e2e-Tests mit einem Winkelmesser auszuwählen.
Hier ist das Code-Snippet der Auswahloption:
<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>
Ich habe versucht:
ptor.findElement(protractor.By.css('select option:1')).click();
Dies gibt mir den folgenden Fehler:
Es wurde eine ungültige oder unzulässige Zeichenfolge angegeben. Build-Info: Version: '2.35.0', Revision: 'c916b9d', Zeit: '2013-08-12 15:42:01' Systeminfo: os.name: 'Mac OS X' , os.arch: 'x86_64', os.version: '10 .9 ', java.version:' 1.6.0_65 'Treiberinfo: driver.version: unbekannt
Ich habe auch versucht:
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();
Dies gibt mir den folgenden Fehler:
ElementNotVisibleError: Das Element ist derzeit nicht sichtbar und kann daher möglicherweise nicht mit der Befehlsdauer oder dem Zeitlimit interagiert werden: 9 Millisekunden Build-Info: Version: '2.35.0', Revision: 'c916b9d', Zeit: '2013-08-12 15:42: 01 'Systeminfo: os.name:' Mac OS X ', os.arch:' x86_64 ', os.version: '10 .9', java.version: '1.6.0_65' Sitzungs-ID: bdeb8088-d8ad-0f49-aad9 -82201c45c63f Treiberinformationen: org.openqa.selenium.firefox.FirefoxDriver Funktionen [{platform = MAC, acceptSslCerts = true, javascriptEnabled = true, browserName = Firefox, rotatable = false, locationContextEnabled = true, version = 24.0, cssSelectorsEnabled = = true, handleAlerts = true, browserConnectionEnabled = true, nativeEvents = false, webStorageEnabled = true, applicationCacheEnabled = false, takeScreenshot = true}]
Kann mir bitte jemand bei diesem Problem helfen oder etwas Licht auf das werfen, was ich hier falsch machen könnte?
quelle
Für mich hat wie ein Zauber gearbeitet
Ich hoffe es hilft.
quelle
ElementFinder
istelement(by.css('.specific-select')).element(by.cssContainingText('option', 'BeaverBox Testing')).click();
Ein eleganter Ansatz würde darin bestehen , eine Abstraktion zu erstellen, die der von anderen Selen-Sprachbindungen ähnelt (z. B.
Select
Klasse in Python oder Java).Lassen Sie uns einen praktischen Wrapper erstellen und Implementierungsdetails darin verbergen:
Anwendungsbeispiel (beachten Sie, wie lesbar und benutzerfreundlich es ist):
Lösung aus folgendem Thema: Wählen Sie -> Optionsabstraktion .
Zu Ihrer Information, eine Feature-Anfrage erstellt: Wählen Sie -> Optionsabstraktion .
quelle
click()
. Vielen Dank.quelle
Um auf eine bestimmte Option zuzugreifen, müssen Sie den Selektor nth-child () angeben:
quelle
So habe ich meine Auswahl getroffen.
quelle
So habe ich es gemacht:
quelle
waitForAngular()
.Versuchen Sie dies, es funktioniert für mich:
quelle
Sie können diese Hoffnung versuchen, es wird funktionieren
quelle
Eine andere Möglichkeit, ein Optionselement festzulegen:
quelle
So wählen Sie Elemente (Optionen) mit eindeutigen IDs wie hier aus:
Ich benutze dies:
quelle
Wir haben eine Bibliothek geschrieben, die drei Möglichkeiten zur Auswahl einer Option enthält:
Ein zusätzliches Merkmal dieser Funktionen ist, dass sie darauf warten, dass das Element angezeigt wird, bevor eine Aktion auf dem ausgeführt
select
wird.Sie finden es auf npm @ hetznercloud / Winkelmesser-Test-Helfer . Es werden auch Typisierungen für TypeScript bereitgestellt.
quelle
Vielleicht nicht super elegant, aber effizient:
Dies sendet nur den Schlüssel auf die gewünschte Auswahl. In unserem Fall verwenden wir modelSelector, aber Sie können natürlich jeden anderen Selektor verwenden.
Dann in meinem Seitenobjektmodell:
Und aus dem Test:
quelle
Das Problem ist, dass Lösungen, die mit regulären Winkelauswahlfeldern funktionieren, nicht mit Winkelmesser md-select und md-option unter Verwendung eines Winkelmessers funktionieren. Dieser wurde von einem anderen gepostet, aber er hat bei mir funktioniert und ich kann seinen Beitrag noch nicht kommentieren (nur 23 Wiederholungspunkte). Außerdem habe ich es ein wenig aufgeräumt, anstatt browser.sleep, habe ich browser.waitForAngular () verwendet;
quelle
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(); } );
Es gibt ein Problem bei der Auswahl von Optionen in Firefox, das Droogans 'Hack- Korrekturen behoben haben , die ich hier explizit erwähnen möchte, in der Hoffnung, dass dadurch jemandem Probleme erspart werden : https://github.com/angular/protractor/issues/480 .
Selbst wenn Ihre Tests lokal mit Firefox bestanden werden, stellen Sie möglicherweise fest, dass sie unter CircleCI oder TravisCI oder was auch immer Sie für CI und Bereitstellung verwenden, fehlschlagen. Von Anfang an über dieses Problem informiert zu sein, hätte mir viel Zeit gespart :)
quelle
Hilfsprogramm zum Festlegen eines Optionselements:
quelle
Wenn unten das angegebene Dropdown-
Dann kann der Winkelmesser-Code
Quelle: https://github.com/angular/protractor/issues/600
quelle
Option nach Index auswählen:
quelle
Ich habe die von PaulL geschriebene Lösung etwas verbessert. Zuerst habe ich den Code so korrigiert, dass er mit der letzten Winkelmesser-API kompatibel ist. Und dann deklariere ich die Funktion im Abschnitt 'onPrepare' einer Protractor-Konfigurationsdatei als Mitglied der Browserinstanz , damit auf sie von jeder e2e-Spezifikation verwiesen werden kann.
quelle
Ich habe im Internet nach einer Antwort gesucht, wie eine Option in einem Modell-Dropdown-Menü ausgewählt werden kann, und ich habe diese Kombination verwendet, die mir bei Angular-Material geholfen hat.
Es scheint, dass beim Werfen des Codes in einer Zeile das Element in der Dropdown-Liste gefunden werden kann.
Ich habe viel Zeit für diese Lösung gebraucht. Ich hoffe, dass dies jemandem hilft.
quelle
Wir wollten die elegante Lösung dort oben mit AngularJS-Material verwenden, aber es hat nicht funktioniert, da es im DOM tatsächlich keine Option / MD-Option-Tags gibt, bis auf die MD-Auswahl geklickt wurde. Der "elegante" Weg hat also bei uns nicht funktioniert (beachten Sie das eckige Material!). Hier ist, was wir stattdessen dafür getan haben. Ich weiß nicht, ob es der beste Weg ist, aber es funktioniert jetzt definitiv
Wir mussten 4 Auswahlen auswählen, und während die Auswahl geöffnet ist, gibt es eine Überlagerung bei der Auswahl der nächsten Auswahl. Deshalb müssen wir 500 ms warten, um sicherzustellen, dass wir keine Probleme mit den Materialeffekten bekommen, die noch in Aktion sind.
quelle
Eine andere Möglichkeit, ein Optionselement festzulegen:
quelle
quelle
Sie können Dropdown-Optionen nach Wert auswählen:
$('#locregion').$('[value="1"]').click();
quelle
Hier erfahren Sie, wie Sie dies entweder nach Optionswert oder nach Index tun . Dieses Beispiel ist etwas grob, zeigt aber, wie Sie das tun, was Sie wollen:
html:
ts:
quelle
quelle
Wir können hierfür eine benutzerdefinierte DropDown-Klasse erstellen und eine Methode hinzufügen als:
Um zu überprüfen, welcher Wert aktuell ausgewählt ist, können wir außerdem Folgendes haben:
quelle
Das folgende Beispiel ist der einfachste Weg. Ich habe die Winkelmesser-Version getestet und bestanden
5.4.2
Vollständiger Code
quelle
Dies ist eine einfache einzeilige Antwort, bei der Angular über einen speziellen Locator verfügt, mit dessen Hilfe Sie aus der Liste auswählen und indizieren können.
quelle
Wählen Sie die Option nach CSS-Eigenschaft aus
oder
Wobei locregion (id), organisation.parent_id (Modellname) die Attribute des ausgewählten Elements sind.
quelle