Close
HOME
/
Clicking a button guide for dummies

Clicking a button guide for dummies

26 August 2020, last update 26 August 2020 4 min read

Stellen Sie sich vor, Sie möchten auf einer Website auf einen Button klicken. Wie würden Sie es machen? Intuitiv weiß jeder, wie das geht. Was aber, wenn Sie möchten, dass der Button programmgesteuert angeklickt wird, um beispielsweise zu testen, ob die App ordnungsgemäß funktioniert? In diesem Fall sind gründlichere Schritte zum Klicken auf einen Button erforderlich. Hier ist ein simpler Algorithmus (im Pseudocode), um diese Aufgabe zu erfüllen: 
Schermafbeelding 2020-08-03 om 15.56.12
Obwohl dieser Algorithmus für die meisten simplen Fälle zu funktionieren scheint, ist er für den Einsatz unter realen Bedingungen bei Weitem nicht robust genug. Schauen wir uns einige Situationen an, in denen dieser Algorithmus scheitert.


1. Der Buttonbefindet sich außerhalb des Ansichtsfensters
Dies ist ein sehr häufiges Szenario, das jedoch leicht zu übersehen ist. Zu Beginn des Tests / der Entwicklung sind häufig nur sehr wenige Daten vorhanden, sodass beim Anzeigen einer Listenansicht oder eines Vorlagenrasters alles genau auf einen Bildschirm passt. Wenn jedoch weitere Daten hinzugefügt werden, bewegen sich Elemente teils aus dem Ansichtsfenster. In diesem Fall muss ein Benutzer zum Button scrollen, bevor er daraufklickt. Das Scrollen kann mit Selenium nachgeahmt werden, es liegt jedoch häufig in der Verantwortung des Entwicklers, sicherzustellen, dass Elemente in die Ansicht gescrollt werden.


2. Button ist noch nicht gerendert
Mendix ist bekanntlich eine Einzelseiten-Anwendung. Das bedeutet, dass verschiedene Seiten in einer Mendix-App keine wirklich unterschiedlichen HTML-Dokumente sind, die geladen werden müssen. Stattdessen wird die gesamte Benutzeroberfläche dynamisch mit Javascript verwaltet. Dies bedeutet, dass das Warten auf das Laden des Dokuments, eine Standardpraxis bei Selenium, nicht funktioniert, da später ein neues Element hinzugefügt werden kann. Wenn Sie auf einen Button klicken, müssen Sie daher warten, bis dieser zum DOM hinzugefügt wird. Eine erweiterte Version würde auch prüfen, ob der Button für den Benutzer sichtbar ist, indem sie auf display: none prüft. 

 

3. Der Button wird gerendert, aber deaktiviert

Wenn in einer Mendix-App auf einen Button geklickt wird, sind normalerweise andere Buttons für die Dauer der Aktion deaktiviert. Wenn ein Button deaktiviert ist, können Sie die Maus weiterhin darüber bewegen und die Maustaste drücken, aber das eigentliche Klickereignis wird nicht ausgelöst. Damit die Klickfunktion ordnungsgemäß funktioniert, muss erkannt werden, ob ein Button deaktiviert ist. Wenn ja, warten Sie, bis er aktiviert ist, bevor Sie daraufklicken. 
Schermafbeelding 2020-08-03 om 15-59-54-png
4. Die Schaltfläche wird durch andere Elemente verdeckt
Bisher war es nicht wichtig, wohin die Maus bewegt wurde, solange sie sich innerhalb des Buttons befindet. Standardmäßig bewegt sich Selenium in die Mitte des Buttons, außer wenn dies nicht der Fall ist. Dies schafft ein Problem, weil manchmal z. B. In Navigationsmenüs wird ein Teil des Buttons hinter anderen Elementen eingeblendet. In diesem Fall ist es wichtig, auf den sichtbaren Teil des Buttons zu klicken, da das Klicken auf einen überlagerten Teil möglicherweise einen Klick auf einen völlig anderen Button auslöst (siehe Screenshot). 
 UntitledDies ist ein ziemlich kniffliges Problem. Für das Navigationsmenü besteht ein Ansatz darin, das Symbol anstelle des gesamten Buttons anzuvisieren. Man muss vorsichtig sein, da nicht alle Buttons Symbole haben. 
 Ein ähnliches Problem besteht bei Kontrollkästchen und Optionsfeldern, bei denen sich die Mitte des Div (im Screenshot mit einem roten x markiert) zufällig zwischen den anklickbaren Teilen befindet. (Sehr interessanter Fehler zur Behebung, da er nur bei Beschriftungen mit einer bestimmten Breite auftritt.) 
Untitled-2
5. Änderungen der Schaltflächen-HTML-Struktur
Beim Erstellen einer App mit Mendix müssen sich Entwickler nicht um HTML kümmern. Dafür sorgt die Mendix-Plattform. Was viele Entwickler jedoch übersehen, ist, dass sich dieser HTML-Code häufig ändert, wenn neue Mendix-Versionen veröffentlicht werden. Dies hat Auswirkungen auf das Testen, insbesondere auf den Selektor, mit dem Elemente identifiziert werden. 

Um nur ein aktuelles Beispiel zu nennen: Für einige Zeit hatten alle Widgets das folgende Attribut data-button-id = "10.Testpp.Page.actionButton2" - beachten Sie den letzten Teil, der dem Widget-Namen in Studio entspricht. Leider wurde dieses Attribut nach der Version Mx8.8 geändert und zeigt jetzt nur noch data-button-id = "10_191" an, was für die Identifizierung von Widgets nicht mehr so ​​nützlich ist. 

Solche Änderungen treten ständig auf. Wenn Sie sich also jemals für ein Upgrade der Mendix-Version der App entscheiden, funktionieren viele Ihrer Tests nicht mehr ordnungsgemäß. Dies ist besonders problematisch, da Sie beim Upgrade auf eine neue Mendix-Version testen möchten, ob die App funktional gleichbleibt. Dies ist möglicherweise schwierig, wenn Ihre Tests nicht funktionieren. 

Endgültiger Algorithmus 

Basierend auf allen oben genannten Punkten kann der Algorithmus wie folgt aktualisiert werden: 
image001-5
Diese Version des Algorithmus ist zwar viel besser, aber noch lange nicht perfekt, und es gibt andere Sonderfälle, die angegangen werden müssen. Um nur einen zu nennen: Was passiert, wenn sich der Button außerhalb des Ansichtsfensters befindet, aber wenn Sie dorthin scrollen, bleibt er hinter einer fixierten Kopf- / Fußzeile verborgen. Intuitiv würde ein Benutzer etwas mehr scrollen, bis der Button sichtbar ist. Selenium versucht jedoch, das Scrollen zu minimieren, sodass es nie mehr als nötig scrollen wird. Das Ergebnis ist, dass der Klick nicht registriert wird oder noch schlimmer, ein anderes Element aus der Kopf- / Fußzeile wird versehentlich angeklickt (ein weiterer spannender Fehler zur Behebung). 

Es stellt sich heraus, dass das einfache Klicken auf einen Button nicht so einfach ist. Bei Mansystems hatten wir täglich mit vielen der oben genannten Probleme zu kämpfen. Aus diesem Grund haben wir die Application Test Suite entwickelt, ein Testwerkzeug, das die Komplexität von Selenium abstrahiert und es Ihnen ermöglicht, sich auf die tatsächlichen Funktionstests für Ihre Mendix-Anwendung zu konzentrieren. 

Wie kann ATS Ihnen helfen, auf einen Button zu klicken? 
Eine der in ATS integrierten Funktionen ist das Klick-Widget. Es implementiert den obigen Algorithmus, enthält jedoch auch ein spezielles Handling für viele andere Sonderfälle sowie Browser- und Selenium-Inkonsistenzen. Darüber hinaus enthalten alle ATS-Funktionen eine sogenannte Magic-Wait-Routine. Dieses intelligente Warten versteht die Mendix-Runtime und stellt sicher, dass keine Klicks versucht werden, wenn Mendix mit dem Öffnen einer Seite, dem Ausführen einer Schaltflächenaktion, dem Aktualisieren mit bedingter Sichtbarkeit und vielen anderen Szenarien beschäftigt ist. 
 

Neben dem Klick-Widget stehen in ATS über 200 weitere Funktionen zur Verfügung, die speziell für Mendix-Widgets entwickelt wurden. Für jede Funktion garantieren wir die Kompatibilität zwischen Mendix-, Selenium- und Browserversionen. Wenn Sie Mendix-Anwendungen testen, Ihren Verstand wertschätzen und lieber Ihre Zeit damit verbringen, Testfälle zu erstellen, als mit dem Innenleben und Versionsinkonsistenzen in der Selenium- und Mendix-HTML-Struktur zu kämpfen, probieren Sie ATS aus. 

Vielen Dank für das Lesen dieses Blogs und viel Spaß beim Testen! 

START TODAY

Ready to accelerate your digital transition?

Get in touch Get in touch
Andrej Gajduk Andrej Gajduk is a consultant at Mansystems with over 7 years of experience in software development. Currently, he is a lead developer for Application Test Suite.

Related articles

Lesen Sie die neuesten Nachrichten, Artikel und Updates von CLEVR auf LinkedIn
Erhalten Sie persönliche Nachrichten und Updates in Ihrem Posteingang