Formulare ausfüllen

Wir haben ja auf unserer Webseite ein Formular und dieses Formular muss ich ausfüllen, sonst kann ich es nicht absenden. Also hier muss dann irgendetwas drin stehen, ich muss die AGB akzeptieren und dann bekomme ich hier die Meldung. Schauen wir mal, wie wir solche Formulare mit Playwright ausfüllen können. Dazu gehe ich hier in den Ordner tests und dann hier auf form.spec.js. Da testen wir das Formular. Schauen wir mal, was das Ganze macht. Und bevor wir uns den Quellcode anschauen, führen wir das einfach mal aus: "npx playwright test" und dann muss ich diese Datei angeben, "form.spec.js --debug", und dann kann ich mich einzeln hier durchklicken. So, im Hintergrund habe ich den Browser und ich gehe auf die Seite index.html, jawohl, das hat funktioniert. Und jetzt sage ich hier einfach nur page.fill() und dann hole ich mir ein input-Feld mit dem Namen "name" und hier soll dann das Wort "Tom Rose" eingetragen werden. Jetzt scrolle ich hier mal ein bisschen runter und Sie sehen, das hat er hier noch und dann hole ich mir hier den Inspector wieder. Und wenn ich jetzt hier draufklicke, dann sehen Sie, wird hier das Feld ausgefüllt und jetzt hole ich mir von der Seite ein Element mit dem Label "Ich akzeptiere die AGB". Das hat er hier richtig erkannt, deswegen hat er hier den roten Punkt hingesetzt und das hake ich an mit Check, jawohl. Und dann sage ich, jawohl, ich möchte auf einen Button vom Typ submit klicken, den hat er hier unten erkannt. Er ist da richtig gelandet. Und wenn ich jetzt hier auf Weiter klicke, dann wird dieser Button auch tatsächlich geklickt und der Test ist durchgeführt. Schauen wir uns mal den Quelltext noch mal genauer an. Also hier oben, das ist immer das Gleiche. Ich hole mir test und expect. Das sind ja die beiden Dinge, die ich brauche. Hier habe ich den Test, der bekommt einen Namen und dann hier den einzelnen Body. Ich gehe auf die Seite, um die es geht. Und mit page.fill() gebe ich hier an, welches Element ich ausfüllen möchte und als Zweites, womit ich das Ganze ausfüllen möchte. Und das funktioniert natürlich nicht nur für input und textarea-Felder, sondern auch für Checkboxen. Da muss ich so ein Element finden. Ich kann das entweder mit dem Label finden oder auch mit diesem Locator hier oben und dann sage ich .check() oder .click(), um einen Button zu klicken, und dann geht es los. So, was ich in diesem Falle, diesem speziellen Falle, noch mache, ist Folgendes: Ich warte darauf, dass die Seite komplett geladen ist, dass hier unten alles in Ordnung ist, dass die Seite komplett da ist. Bei einer lokalen Seite geht es immer relativ schnell und dann schaue ich, ob der Request, ob dieses Formular tatsächlich abgesendet wurde. Denn dieses Formular in dem speziellen Fall jetzt hier, wenn Sie mal auf script.js gehen, da sehen Sie, dieses Formular wird mit AJAX abgesendet. D.h., in dem Moment, in dem hier das Formular geladen wurde und abgesendet werden soll – das ist jetzt ganz speziell für diesen Bereich hier so –, da hole ich mir die Daten aus dem Formular und schicke das Ganze mit der fetch API von JavaScript und mit dem POST-Befehl an eine Seite. Die heißt in dem Falle thankyou.html. Die gibt es gar nicht, aber es wird trotzdem dorthin gesendet und ich überprüfe die Antwort gar nicht. Das ist ja nur eine Beispielwebseite. Und dann gebe ich hier einfach diesen Alert aus, dass alles funktioniert hat. D.h., in diesem speziellen Fall schaue ich einfach nach, ob die Seite auch tatsächlich einen POST-Befehl abgesendet hat. Und wenn dieser Postbefehl abgesendet wurde, dann setze ich diese Variable requestSent = true und mache einfach ganz normal weiter. Und wenn diese Variable allerdings hier nicht verändert wird, dann bleibt sie bei false und dann würde der Test auch fehlschlagen. Schauen wir mal rein, ich gehe jetzt hier z.B. auf dieses script.js und jetzt mache ich hier einen Fehler. Also, ich schreibe hier einfach ein Return bspw. rein oder ich schreibe hier irgendwas rein, was da gar nicht reingehört. D.h., dieses Formular wird nicht abgesendet, weil dieses JavaScript fehlerhaft ist. Und jetzt führen wir diesen Test noch mal aus. Und Sie sehen, der Test ist fehlgeschlagen. Warum? Weil eben dieses Formular nicht abgesendet werden konnte, hier in dem Falle, weil es eben diesen Fehler gibt. Und genau so etwas sollte der Test auch erkennen. Und wenn ich jetzt hier diesen Fehler behebe, dann wird der Test wieder durchlaufen.