[FIXED] Wie erkenne ich, ob der Angular Toggle-Switch Toggle angeklickt wird?

Ausgabe

Ich versuche zu definieren, ob auf den Kippschalter von Angular geklickt wird oder nicht, indem ich Selenium- und Python-Tools verwende. Beim Öffnen eines neuen Formulars hat meine Eingabe-ID die Klasse ng-untouched ng-pristine ng-valid.

Nach dem Anklicken ändert es sich in ng-valid ng-dirty ng-touched. Aber nach einem dritten Klick ändert sich nichts. Nachdem ich darauf geklickt und das Formular gespeichert habe, bleibt die Klasse immer ng-valid ng-dirty ng-touchedund bleibt nach jeder Änderung gleich (auch nach dem Deaktivieren des Umschaltens und Speicherns). Dies ist kein Fehler, da Änderungen serverseitig gespeichert werden.

Welche CSS-Eigenschaft sollte ich mir ansehen, um zu definieren, was geändert wird? Hier ist ein HTML-Codebeispiel:

<div _ngcontent-c26="" class="form-group">
    <label _ngcontent-c26="" for="checked">Checked</label>
    <div _ngcontent-c26="" class="toggle-switch">
        <input _ngcontent-c26="" id="opened" name="checked" type="checkbox" class="ng-valid ng-dirty ng-touched">
            <label _ngcontent-c26="" for="checked"></label>
        </div>
        <span _ngcontent-c26="" class="form-control-helper"></span>
    </div>

Lösung

Nachdem ich ein paar Optionen ausprobiert und mehr recherchiert hatte, fand ich zwei Lösungen zum Testen, wenn ein Umschalter / Kontrollkästchen aktiviert ist.
Erstens , indem Sie die Selenium-Methode von .is_selected() verwenden:

driver.find_element_by_css_selector("input[type=checkbox]").is_selected()

Es gibt True zurück, wenn ein Schalter eingeschaltet ist, und False, wenn er ausgeschaltet ist.

Zweitens habe ich mir die CSS-Einstellungen genau angesehen und festgestellt, dass, wenn ein Schalter aktiviert ist, :checked hinzugefügt wird. Sie können also einen booleschen Ausdruck für diesen Locator verwenden. In den DevTools von Chrome befindet sich dieses Attribut auf der Registerkarte Eigenschaften, der Name lautet checked. Weitere Einzelheiten sind hier :

Der Locator für aktiviertes Umschalten sieht folgendermaßen aus:

input[type=checkbox]:checked

Für ungeprüft:

input[type=checkbox]

Außerdem gibt es eine dritte Option, die in vielen Fällen funktioniert. Ändert beispielsweise ein Toggle seine Farbe, ändert sich auch seine Eigenschaft. Sie können also verwenden:

driver.find_element_by_css_selector("input[type=checkbox]").value_of_css_property("background-color") == "some color"

Platzieren Sie beispielsweise "#fff"(weiß), wenn Sie erwarten, dass diese CSS-Eigenschaft weiß ist.


Beantwortet von –
vitaliis


Antwort geprüft von –
Gilberto Lyons (FixError Admin)

0 Shares:
Leave a Reply

Your email address will not be published. Required fields are marked *

You May Also Like