Dramatiker für die Testautomatisierung: Der ultimative Leitfaden + Framework

1. Kursübersicht: Hallo und willkommen bei Playwright for Test Automation, dem ultimativen Leitfaden Ich bin Vasil und freue mich, Ihnen zeigen zu können, wie Sie mithilfe von Playwright erstellen robuste Frameworks für die Testautomatisierung In diesem Kurs lernst du alles, von der Einrichtung deiner Dramatikerumgebung bis hin zum Aufbau skalierbarer Test-Frameworks mit modernen Techniken wie Page Object Model Wir werden auch lernen, wie Sie effektiv schreiben, ausführen und Bugs testen können viele praktische Projekte zur Verfügung, um Ihr Lernen zu vertiefen Unser Kurs ist in klare Abschnitte gegliedert. Wir beginnen mit der Einrichtung Umgebung und der Projektstruktur. Dann werden wir mit dem Schreiben von Tests und der Verwendung von Debugging-Tools von Dramatikern fortfahren Tests und der Verwendung von Debugging-Tools von Dramatikern Außerdem lernen Sie, wie Sie mit Webelementen interagieren , Assertionen schreiben und schließlich mithilfe des Seitenobjektmodells Ihr eigenes skalierbares Automatisierungsframework erstellen mithilfe Dieser Kurs richtet sich QA-Techniker, Softwaretester, Entwickler und sogar manuelle Tester, Übergang zur Automatisierung Wenn Sie die Automatisierung aller Webtests beherrschen und bewährte Methoden für die Erstellung zahlreicher Frameworks erlernen möchten, sind Sie hier genau richtig Am Ende dieses Kurses werden Sie in der Lage sein, Playwright einzurichten und zu konfigurieren, saubere und effiziente Tests zu schreiben, skalierbare Automatisierungs-Frameworks mit dem Baje Object-Modell zu erstellen und Ihren Test skalierbare Automatisierungs-Frameworks mit dem Baje Object-Modell zu erstellen mit dem Baje Object-Modell effektiv zu starten. Diese Fähigkeiten werden Sie in die Lage versetzen, zuverlässige und wartungsfreundliche Testsuiten zu erstellen zuverlässige und wartungsfreundliche Einer der besten Aspekte dieses Kurses ist sein praktischer Ansatz . Im Laufe der Lektionen werden Sie mit praktischen Herausforderungen konfrontiert sein, bei denen Sie das Video pausieren, Ihre Lösung implementieren und sie dann mit meiner Arbeitsgruppe vergleichen können. Diese Methode hilft dir, Selbstvertrauen aufzubauen und das Material wirklich zu beherrschen Jetzt, da Sie wissen, was Sie erwartet, ist es an der Zeit, loszulegen. Ich freue mich sehr, dass Sie mich auf dieser Reise zum Master Dramatiker für Testautomatisierung begleiten dieser Reise zum Master Dramatiker für Testautomatisierung Lassen Sie uns eintauchen und gemeinsam mit dem Aufbau robuster Frameworks für die Testautomatisierung beginnen gemeinsam mit dem Aufbau robuster Frameworks für die Testautomatisierung Wir sehen uns in der ersten Lektion. 2. Einführung und Einrichtung: Hallo zusammen und willkommen zu diesem Dramatiker-Kurs. Ich freue mich sehr, Sie durch dieses erstaunliche Tool zu führen und Ihnen zu helfen, zu verstehen, wie Sie es für Webtests verwenden können Und diese Lektion beginnt mit einer einfachen Einführung in Dramatiker, richtet unsere Umgebung und führt unseren ersten Test Beginnen wir also mit der Beantwortung der offensichtlichsten Frage. Was ist Dramatiker? Playwright ist eine Open-Source-Testbibliothek von Microsoft Es ermöglicht uns, Browser wie Chrome, Firefox und Age zu automatisieren , was es perfekt zum Testen von Webanwendungen macht es perfekt zum Testen von Webanwendungen Mit Playwright können Sie echte Benutzerinteraktionen wie das Klicken auf Schaltflächen, das Tippen in Formularen und das Navigieren zwischen Seiten simulieren echte Benutzerinteraktionen wie das Klicken auf Schaltflächen, Tippen in Formularen und das Navigieren zwischen Einer der besten Aspekte von Playwright ist, dass es auf mehreren Plattformen und Browsern funktioniert Egal, ob Sie Windows, MacOS oder Linux testen, Playwright hat alles für Sie Nun, da wir wissen, was Dramatiker ist, lassen Sie uns darüber sprechen, warum Sie es verwenden möchten den Hauptvorteilen gehören die Cross-Browsing-Unterstützung, mit der Sie auf verschiedenen Browsern mit demselben Skript testen können verschiedenen Browsern mit demselben Skript , sowie die schnelle Ausführung. Das bedeutet, dass Playwright effizient konzipiert ist Ihnen viel Zeit spart Außerdem stehen N-to-N-Testfunktionen zur Verfügung, und eine wichtige Sache ist das automatische Warten Lassen Sie uns nun unsere Umgebung für den Einsatz von Playwright vorbereiten. Als Erstes müssen wir Nod Jz installieren. Öffnen Sie dazu Ihren Browser und geben Sie Node Nod Jess Klicken Sie auf den ersten Link Und hier hast du den Download-Button. Laden Sie immer die LTC-Version herunter. Nachdem Sie es heruntergeladen haben, installieren Sie es einfach. Der nächste Schritt zum Einrichten unserer Umgebung ist das Herunterladen unseres Code-Editors, bei dem es sich um Visual Studio-Code handeln wird. Geben Sie also Visual Studio-Code ein und öffnen Sie den ersten Link von code.visualstudio.com Und hier haben Sie einen Download-Button. Wenn Sie Windows verwenden, haben Sie Download für Windows, ich bin auf Maquest und Download für Maquest Nachdem Sie es heruntergeladen haben, installieren Sie einfach die Anwendung. Lassen Sie uns unseren Visual Studio-Code öffnen , den wir gerade installiert haben, und hier sollten Sie eine Willkommensnachricht oder ein leeres Fenster sehen . Ich sehe ein leeres Fenster, weil ich es schon einmal geöffnet habe. Klicken wir also auf diesen Explorer-Ordner und erstellen wir einen Ordner. Wo bleibt unser Spiel richtig? Also gehe ich zum Desktop und erstelle einen neuen Ordner. Lass es uns richtig machen. Wo ich teste und erstelle, und lass uns öffnen. Jetzt versuche ich es mit den Autoren. Jetzt bin ich also in meinem Ordner. Lassen Sie uns das Terminal über das Terminalmenü öffnen. Klicken wir auf Neues Terminal. Und hier im Terminal sollten wir NPM eingeben Du brauchst einen Dramatiker. Und die neueste, welche ist die Version Klicken Sie auf Enter und der Dramatiker wird installiert. Okay, um fortzufahren. Gut. Und was die Sprache angeht, verwenden wir Typoskript, aber das ist für uns nicht wirklich wichtig Wir können Typoskript oder Javascript wählen. Für unseren Kurs wird es genauso sein. Also hier der Test. Lassen Sie uns AddThubFLLS vorerst testen, Playwriter-Browser. Stimmt und jetzt müssen wir nur noch warten, bis alles fertig Also hier können wir das beobachten. Wir laden viele Bibliotheken herunter und installieren sie. Warten wir, bis der Vorgang abgeschlossen ist. Die Installation wurde abgeschlossen. Lassen Sie uns nun überprüfen, ob alles richtig eingerichtet ist. Versuchen wir dazu, einen MP-Play-Right-Skripttest auszuführen. Also, wenn wir das Ding richtig installiert haben , sollten wir hier ein paar Tests durchführen müssen, was bedeutet, dass wir alles korrekt installiert haben. Wir haben also sechs Tests, was bedeutet, dass unsere Installation erfolgreich war. Herzlichen Glückwunsch zum Abschluss deiner ersten Lektion. Wir haben Dramatiker eingeführt, unsere Umgebung eingerichtet und überprüft, ob alles korrekt eingerichtet Dies sind die grundlegenden Schritte für alles, was wir in Zukunft tun werden. Wir sehen uns also in den nächsten Lektionen. 3. Dramatiker-Tests: Hallo. In dieser Lektion lernen wir, wie man einen Test in Dramatiker durchführt Nach der Installation von Playwright wurde eine Ordnerstruktur in unserem Playwriter-Testordner erstellt in unserem Playwriter-Testordner Also hier im Testordner werden unsere Testsuiten in zukünftigen Lektionen aufbewahrt Wenn wir also alles ausführen wollen, was sich in diesem Testordner befindet, sollten wir den Befehl in das Terminal eingeben Wir können das Terminal über das Terminalmenü und das neue Terminal öffnen . NPx NPXPlayWRT-Test. Playwright sucht also allen Tests, die sich in diesem Testordner befinden Und jetzt können wir hier beobachten , dass wir die besten sechs Tests haben. Aber wenn wir einen Blick in diese SPEC-Datei werfen, haben wir nur zwei Tests Warum haben wir hier sechs? Das liegt daran, dass wir in der Konfigurationsdatei die automatisch erstellt wurde, , die automatisch erstellt wurde, hier drei Projekte haben: Chromium, Firefox und Safari. Und standardmäßig führt Playwright unseren Test in all diesen Projekten durch, in all diesen Browsern laufen sie in Rom, in Firefox und in Safari Wenn Sie speziell für Home oder Firefox ausführen möchten, können wir dies angeben Dafür können wir MP playwright eingeben. Tests und Projekt sind gleich und sagen wir, lassen wir Romeo laufen. Jetzt werden wir sehen, dass nur zwei Tests und zwei Tests bestanden wurden. Aber standardmäßig lässt Cypress alles kopflos laufen. Wir sehen nichts. Wenn wir also unsere Tests ausführen wollen, um den tatsächlichen Browser zu sehen, sollten wir MPs Dramatiker und den Strich mit der Überschrift eingeben Mit diesem Befehl wird der Dramatiker angewiesen, die Browser anzuzeigen Also lass uns auf Enter klicken. Wir haben also einen Fehler , weil wir vor dem Start auch einen Test hinzufügen sollten . Testen. Ja. Jetzt sollten wir also den eigentlichen Browser sehen. Also wurde es in einem anderen Fenster geöffnet. Ja, also lass mich noch einmal versuchen zu rennen. Versuchen wir es also hier, wir können sehr schnell beobachten. Öffnet. Wir können diesen Titel auch mit dem Projekt kombinieren. Versuchen wir es also mit Headed und auch mit dem Projektnamen. Projekt, wir sollten davor einen Gedankenstrich hinzufügen. Dash Project Equal Romo Im Moment haben wir nur zwei Tests Lassen Sie mich das minimieren, um die Ergebnisse zu sehen. Ja, also wir müssen römisch werden, es ging sehr, sehr schnell. Außerdem können wir einen bestimmten Test mit Test NA durchführen. Also hier haben wir einen Test mit Titel. Wenn Sie also nur diesen Test nach dem Testnamen ausführen möchten, können wir NB Dramatiker G schreiben und der Name unseres Tests hat den Titel Klicken wir auf Enter. Ich habe vergessen, hier den Test hinzuzufügen. Ja. Im Moment führen wir drei Tests durch, weil wir hier drei Projekte haben. Eine andere Möglichkeit, den Playwriter-Test durchzuführen, ist die Verwendung des UI-Displays Um die UI-Anzeige zu öffnen, sollten wir also NP playwright test and UI eingeben Dadurch wird ein UI-Fenster geöffnet. Lassen Sie mich das minimieren und hierher bringen. Hier sehen wir also alle Testsuiten, also Testdateien aus unserem Testordner. Hier haben wir also unsere Dateispezifikation, Beispielspezifikation und diese beiden Tests Wenn Sie also einen Test ausführen möchten, können wir auf diese Schaltfläche klicken Und auch hier in diesem Aktionsteil haben wir jeden Test. Hier können wir also beobachten, was bei jedem Test passiert ist. Außerdem können wir den zweiten ausführen und beobachten, was gemacht wurde, welche Aktion an welchem Objekt ausgeführt wurde. Also hier haben wir unten auf „Los geht's los“ geklickt unten auf „Los geht's los Wir werden in den zukünftigen Lektionen über diese Art der Durchführung von Dramatikertests sprechen zukünftigen Lektionen über diese Art der Durchführung von Dramatikertests Und die letzte Methode zur Durchführung eines Dramatikertests, die wir in unserem Kurs verwenden werden , ist die Verwendung der Dramatikererweiterung Dafür sollten wir also zu diesem Dramatiker-Tab zu diesem Erweiterungs-Tab gehen und nach Play Try suchen Das Ergebnis sollte also eine Dramatikererweiterung von Es ist auf meiner Website installiert, aber lassen Sie uns auf Installieren klicken und danach sollten wir hier diesen Test-Tab haben und Sie werden zu Ihrer Datei mit Test gehen Auf der linken Seite sollten Sie diesen Run-Test haben. Jetzt, auch hier in diesem Test-Top, haben Sie alle Projekte. Sie können Chrome, Firefox und alle Projekte aus Ihrer Konfigurationsdatei auswählen . Außerdem können Sie hier wählen, ob Sie Ihren Test kopfüber oder kopflos ausführen möchten Wählen wir also Browser anzeigen. Und jetzt klicken wir auf diese Schaltfläche. Lassen Sie mich das Wort minimieren, um die Browser zu sehen. Lass uns auf den zweiten klicken. Also wird ein Browser geöffnet und der Test wurde erfolgreich ausgeführt. Lassen Sie mich Ihnen nun zeigen, wie ein Dramatikerbericht mit fehlgeschlagenem Test, Skip-Test und Bass-Test aussehen wird Hier haben wir also einen Test, bei dem wir davon ausgehen, dass eine Überschrift Installation sein wird Also Installationstext, lassen Sie mich den Text so ändern , dass etwas fehlgeschlagen ist. Und jetzt sollte dieser Schritt fehlschlagen , weil wir erwarten, dass eine Seite eine Überschrift mit dem Namen der Installation hat. Lassen Sie mich also MPs ausführen, Dramatiker-Test durchführen und dann das Projekt verwenden Romeo. Also lass uns diesen Test machen. Jetzt führen wir zwei Tests durch. Warten wir auf die Ergebnisse. Okay, hier haben wir unseren Bericht. Hier können wir nach allen Tests sortieren, die fehlgeschlagen sind, unregelmäßig sind und übersprungen wurden. Wenn Sie also auf diesen Titel klicken, der bestanden wurde, beobachten wir, was wir für jeden Teil des Tests ausgeführt haben und welches Ergebnis Für den fehlgeschlagenen Test können wir darauf klicken und das Jahr sehen, in dem er passiert ist. Also haben wir darauf gewartet, dass dieser Text sichtbar ist, aber nach den 5 Sekunden war der Test nicht mehr sichtbar, also erstarrte er und ähm Schauen wir uns nun einen übersprungenen Test an. Also lass mich überspringen. So können wir einen Test überspringen. Darauf kommen wir später zurück. Versuchen wir also, dasselbe Skript für einen übersprungenen Test auszuführen. Ja, jetzt haben wir einen übersprungen und einen bestanden und MPC spielt einen Showbericht ab. Wir sollten ihn laufen lassen, wenn wir den Bericht sehen wollen Ich werde es kopieren und einfügen. Und hier können wir beobachten, dass wir hier im übersprungenen Teil einen Test und einen Beitrag haben Lassen Sie uns eine kurze Zusammenfassung dessen machen , was wir in dieser Lektion gelernt haben Wir haben besprochen, wie wir unseren Cypress-Test von der gemeinsamen Zeile aus nach Spezifikationsdatei, nach Namen und mithilfe verschiedener Projekte mit und ohne Kopf ausführen können unseren Cypress-Test von der gemeinsamen Zeile aus nach Spezifikationsdatei, nach Namen und mithilfe verschiedener Projekte mit und ohne Kopf Außerdem haben wir besprochen, wie dieser Test von UY und mit Hilfe der Playwriter-Testerweiterung für den VS-Code verwendet von UY und mit Hilfe der Playwriter-Testerweiterung für den VS-Code Wir sehen uns in den nächsten Lektionen. 4. Debugging von Dramatiker-Tests und Verwendung von Trace Viewer: Hallo, in dieser Lektion lernen wir, wie man den Trace Viewer debuggt und für unseren Test verwendet Die erste Methode besteht also darin den Test von Coline aus auszuführen und den Parameter debt zu verwenden Versuchen wir also, unseren Test durchzuführen. Lassen Sie mich das Terminal löschen und den NBXPlayPlayPlay-Test verwenden Und lassen Sie uns das Projekt Chromium und unseren Parameter verwenden , der der Und bevor ich auf Enter klicke, lass mich das Fenster minimieren. Und wenn ich auf Enter klicke, werden zwei weitere Fenster geöffnet. Also lass mich sie hier hinzufügen. Der erste wird der Dramatikerinspektor sein und der zweite wäre der Browser selbst Hier wird nur unsere Textausführung sein. Aber in diesem Dramatik-Inspektor haben Sie den Code Ihres Tests und Sie haben zwei Schaltflächen, die Ihnen helfen können, den Test zu manipulieren Die erste ist die Zonentaste. Wenn Sie darauf klicken, läuft der Test normal. Wenn Sie jedoch auf diesen klicken und einen Schritt weitermachen, wird der Test Zeile für Zeile ausgeführt. Versuchen wir es jetzt, unser Test wurde in der ersten Zeile gestoppt. Klicken wir auf diesen Schritt weiter. Und hier können Sie all diese Protokolle beobachten. Hier haben Sie alles, was für den Dramatiker unter der Haube passiert ist Jetzt haben wir die erste Reihe ausgeführt und jetzt haben wir bei der zweiten aufgehört Und wenn Sie ein anderes Mal auf diesen Schritt klicken, wird die nächste Zeile ausgeführt. Also lass uns klicken. Jetzt wurde der erste Test ausgeführt. Das Gleiche wird mit dem zweiten sein. Lassen Sie mich sie hier hinzufügen. Also sind wir in der ersten Reihe. Wir klicken auf diesen Schritt und wir haben den ersten ausgeführt. Und bei einigen Befehlen wie Aktionen wird das Element hervorgehoben, wird das Element hervorgehoben das in diesem Befehl verwendet wird. Hier klicken wir also auf einen Link mit dem Namen Erste Schritte, und hier können Sie sehen, wie diese Schaltfläche hervorgehoben ist. Außerdem haben wir hier eine Menge nützlicher Informationen darüber, was unter der Haube passiert, wenn Sie den Test durchführen. Jetzt habe ich also noch eine Zeile, aber ich werde nicht auf diesen Schritt Over klicken, ich werde auf den Zoom klicken und alles wird ausgeführt, ohne in dieser Zeile anzuhalten Wenn ich also darauf klicke, haben wir zwei Tests bestanden So können wir den Bug-Parameter verwenden , wenn wir ihn von der Kommandozeile aus ausführen. zweite Methode besteht darin, die Erweiterung mithilfe von Grafiken von Dramatikern zu versehen und der Zeile Breakpoints hinzuzufügen, um die Ausführung zu beenden Lassen Sie mich zeigen, wie Sie das machen können. Nehmen wir an, Sie möchten, dass Ihr Test in dieser Zeile endet, Sie haben etwas, das Sie nicht wirklich verstehen, und Sie möchten den Test hier beenden. Dafür haben Sie auf der linken Seite die Möglichkeit, einen Breakpoint hinzuzufügen Der Breakpoint bedeutet, dass Ihre Ausführung in dieser Zeile beendet wird Lassen Sie mich hier also einen Breakpoint und am Ende auch einen Breakpoint hinzufügen einen Breakpoint und am Ende auch einen Im Visual Studio, der Playwriter-Testing-Erweiterung, klicken Sie hier Und auf dieser Registerkarte können Sie den Fehler auswählen Sie haben hier den Bug-Button. Klicken wir auf den Bugtest für unseren Link Erste Schritte. Also klicke ich auf den Bug und lasse mich die Anzeige im Browser zu dem Zeitpunkt minimieren. Jetzt haben wir also unseren Browser, und hier können Sie beobachten, dass wir viele Optionen haben. Wir können die Neuzone, den Fortgang, den Stepover usw. ausführen, und wir können auch anhalten und Hier wurde unser Test also dort beendet, wo wir den ersten Breakpoint hinzugefügt haben Und auch hier können wir beobachten, dass das Element für die Aktion hervorgehoben ist Und lass uns auf Rezome klicken und unser Test sollte am nächsten Breakpoint aufhören Wenn ich also hier klicke, können wir beobachten dass unser Test beim nächsten Breakpoint gestoppt wurde und auch unsere Installation „Heizung nach Namen“ hervorgehoben wird Also wenn ich auf Weiter klicken werde. Unser Test wurde also erfolgreich ausgeführt. So können wir unseren Test mit dieser Playwriter-Erweiterung debuggen . Sie können Ihren Test also hier über diese Schaltfläche starten Klicken Sie mit der rechten Maustaste, Sie haben Test ausführen, den Bugtest, und Sie können Ihren Test im einfachen Run-Test starten Und dann von hier aus, von hier aus arbeiten. Ein weiteres nützliches Tool für das Banking, unser Test besteht darin, den Trace Viewer zu verwenden. Lassen Sie mich Ihnen also zeigen, wie Sie den Trace-Viewer aus der Playwriter-Erweiterung verwenden können den Trace-Viewer aus der Playwriter-Erweiterung Wenn Sie also zu dieser Playwriter-Testerweiterung zurückkehren , haben Sie hier unter den Projekten Und hier haben Sie zwei sehr interessante Einstellungen. Der erste ist Browser anzeigen. Wenn Sie das aktivieren, wird Ihnen der Browser angezeigt, wenn Sie den Test ausführen. Und der zweite, Show Trace Viewer eine Art Bericht über all Ihre Aktionen und Ihr Aussehen für den Test. Lassen Sie mich also diesen Showtrace-Viewer auswählen und den zweiten Test ausführen Lassen Sie mich das zunächst minimieren. Schließen Sie dieses Terminal und lassen Sie uns diesen Test ausführen. Also führe ich den Test durch. Und hier können Sie beobachten , dass kein einfacher Browser geöffnet war, sondern dass er geöffnet war, als wir versuchten, den Test über den UI-Viewer auszuführen. Nachdem Sie den Test ausgeführt haben, haben Sie hier all diese Aktionen, die ausgeführt wurden. Und auch in diesem Abschnitt können Sie auf eine Aktion klicken und beobachten, was passiert ist. Wenn Sie einen komplizierteren Test haben, ist das sehr hilfreich. Außerdem haben wir hier für jede Aktion einen Locator und wir haben eine Klickaktion ausgeführt Sie haben die Aktion vor und nach dem, was vor und nach Ihrer Aktion passiert ist, ist sehr hilfreich Außerdem haben Sie hier eine Geschichte und können beobachten, was mit der Zeit passiert ist. Es ist sehr nützlich, wenn der Bugging-Test sehr groß und kompliziert ist Das letzte Thema, das ich besprechen möchte, ist, wie wir diesen Trace aktivieren können, wenn wir ihn von einer gemeinsamen Leitung aus ausführen Lassen Sie mich hier die Auswahl aufheben und unseren Test über die Befehlszeile ausführen Also hier habe ich einen B-Pyrit-Test und sagen wir, ein weiterer Parameter-Trace ist Also lass mich es ausführen. Unser Test läuft, und lassen Sie mich den Bericht kopieren und öffnen. Also hier haben wir unseren UO-Bericht zum Test bestanden, aber wenn wir einen Test öffnen, haben Sie hier Ihre Spuren, etwas Neues. Und wenn du darauf klickst, öffnet sich ein Trace-Viewer, und hier hast du alle Informationen über den Test. Sie haben viele Anrufe, viele Protokolle und alles wird angezeigt. Es ist sehr hilfreich, wenn Sie komplizierte Tests debuggen Lassen Sie uns eine kurze Zusammenfassung dessen machen, was wir in der heutigen Lektion gelernt haben Zunächst haben wir besprochen, wie man von der gemeinsamen Leitung aus debuggt, wie man von dieser Playwriter-Erweiterung aus debuggt Danach haben wir besprochen, wie man den Trace-Viewer von der Playwriter-Station aus und den Trace-Viewer von der gemeinsamen Leitung aus verwendet Trace-Viewer von der Playwriter-Station aus und den Trace-Viewer von der gemeinsamen Leitung aus Das war es also für die heutige Lektion. Wir sehen uns in der nächsten. 5. Erste Dramatikertests schreiben und strukturieren: Hallo, und willkommen zurück. In dieser Lektion lernen wir, wie man einen einfachen Basistest in Dramatiker erstellt und die grundlegende Struktur des Dramatikertests verstehen die grundlegende Struktur des Dramatikertests Für diese Lektion verwenden wir also die Source Debo Hier ist eine einfache Website, auf der Sie viele Artikel haben Sie können sie zu Ihrer Karte hinzufügen oder daraus entfernen . Außerdem können Sie hier andere Optionen auswählen, indem zur Kasse gehen oder weiter einkaufen Beginnen wir mit der Erstellung unserer ersten Testdatei. Aus der vorherigen Lektion wissen wir, dass wir unsere Dateien im Testordner speichern werden . Lassen Sie uns eine neue Datei erstellen. Nennen wir es ersten Test. Testen Sie zuerst den Punkt mit der Spezifikation Ts. Dies sind die Erweiterungen unserer Datei. Zu Beginn sollten wir also unsere Testmethode für den Dramatiker importieren Wie wir das in einer leeren Datei am Anfang der Datei machen können , sollten wir Import schreiben und in Carl-Klammern sollten wir test aufrufen und von hier aus wird der Visual Studio-Code eine Liste von Optionen bereitstellen Wir benötigen diese Testmethode aus dem Playwriter-Test. Also lass uns klicken Und jetzt haben wir die Testmethode aus der Playwriter-Anwendung importiert die Testmethode aus der Playwriter-Anwendung importiert Lassen Sie uns nun unseren ersten Test erstellen. Die Teststruktur ist für den Anfang sehr einfach. Also sollten wir zunächst die Testmethode aufrufen. In diese Methode sollten wir den Namen meinen Testnamen eingeben. Dies wird der Name unseres Tests sein. Danach empfängt unser Test Parameter und am Ende haben wir den Hauptteil unseres Tests. Hier werden wir all diese Aktionen platzieren. Und hier können wir beobachten , dass wir diesen Button bereits aus der Playwriter-Erweiterung haben Und um den Test wie im wirklichen Leben zu starten, sollten Sie, wenn Sie zu einer Seite navigieren möchten, eine leere Browserseite geöffnet haben Also Dramatiker Dramatiker, die Geschichte ist dieselbe Wir müssen eine leere Browserseite geöffnet haben. Unser Test erhält also eine Seitenfixierung. Das Spiel ist eines der Spiele der Dramatiker. Wir haben einen Seitenbrowser und einige andere. Stellen Sie sich Page Fixture also als leere Browserseite vor. Am Anfang haben wir eine leere Browserseite, und von dieser Seite aus können wir navigieren. Es ist also so etwas. Sie haben eine leere Seite und von dieser Seite aus können Sie zu Google oder zu anderen Seiten navigieren. Danach können Sie mit dieser Seite Klicks oder andere Methoden ausführen. Unser Test empfängt also die Seitenfixtur, und danach können wir die Seite verwenden, um bestimmte Aktionen auszuführen Die erste Aktion, die wir auf einer leeren Seite ausführen möchten , ist das Navigieren auf unserer Seite Dafür sollten wir unsere Seite Punkt nennen, und wir haben eine spezielle Methode, nämlich go to. Und hier sollten wir die URL übergeben. Also lass mich kopieren. Lassen Sie mich das Logout machen Und lass mich die URL kopieren. Also hier übergebe ich die URL, und hier haben wir die erste Aktion. Und eine wichtige Sache , die Playwright verwendet, verspricht Wenn Sie also navigieren, Mauszeiger über eine Methode bewegen und feststellen, dass der Rückgabetyp dieser Methode ein Versprechen ist, dann sollten Sie dieser Methode eine Gewichtung voranstellen, was bedeutet, dass Sie für jede Methode , die ein Versprechen zurückgibt, eine Gewichtung angeben sollten Und da wir eine Gewichtung verwenden, bedeutet das, dass unser Test mit einer asynchronen Methode funktionieren sollte Also hier sollten wir eine Synchronisation hinzufügen. Ja. Also jetzt ist alles klar. Das ist also die Grundstruktur eines Tests. Lassen Sie uns das überprüfen. Wir haben die Testmethode. Darin haben wir den Namen. Danach verwenden wir eine Senke, weil wir hier im Test viele Waight Await-Parameter für unsere Methoden verwenden , was versprochen Außerdem erhalten wir als Parameter eine leere Fixture-Seite Und wenn wir hier im Testtext sind, können wir diese leere Seite verwenden , um eine Menge Aktionen auszuführen Versuchen wir also, diesen Test durchzuführen. Wir sollten einfach eine leere Seite öffnen und zu unserem Test navigieren. Lassen Sie mich also auf Ausführen klicken und ja, lassen Sie mich minimieren, weil ich zwei Monitore habe. Also lass mich noch einmal laufen. Es läuft. Und hier können wir beobachten , dass wir die Seite öffnen und sie zur Saucen-Demo navigieren. Also lass mich diesen Stopp schließen. Lassen Sie uns auch eine Behauptung hinzufügen, eine Bestätigung, um sicherzugehen, dass wir auf dieser Quell-Demoseite gelandet Also hier können wir das einfach überprüfen. Wir haben diesen Text Swag Love. Lassen Sie mich einfach zuschauen und wir haben einen Kurs, aber lassen Sie uns das per Text erledigen Also werde ich einfach eine Methode verwenden, aber darüber werden wir in der nächsten Lektion sprechen. Um also etwas auf einer Seite zu überprüfen, sollten wir die Methode expect verwenden. Hier haben wir also Expect und von dieser Seite greifen wir das Element nach Text Wir haben eine spezielle Methode, um nach Text zu gelangen, und ich möchte im SWAG-Labor ein Element für Text finden Und ich möchte nur sichergehen, dass das sichtbar ist. Wenn wir also mit der Maus auf diese Methode zeigen, um sichtbar zu sein, müssen wir zuerst diese Erwartung vom Dramatiker importieren Geben Sie hier einfach ein Komma ein und löschen dass wir diese Erwartung vom Dramatiker importiert haben Und wenn wir das jetzt überschreiben, um es sichtbar zu machen, stellen wir fest, dass es ein Versprechen zurückgibt, was bedeutet, dass wir eine Gewichtung vor einem Versprechen verwenden sollten Lassen Sie mich das minimieren und dann unseren Test durchführen. So können wir beobachten , dass unser Test bestanden hat. In einer einzigen Datei können wir so viele Testfälle erstellen, wie wir möchten. Wir können es kopieren und wie viele Verbindungen erstellen. Wir können die Namen eins und zwei ändern. Und so können wir viele Tests durchführen. Wir können aber auch mehrere Arten von Tests in einer Datei haben. Wir können sie nach bestimmten Funktionen gruppieren. Nehmen wir an, wir möchten die Login-Funktionalität testen. Lassen Sie uns dafür diese beiden löschen. Wir können also einfach die Testmethode und die Describe-Methode verwenden. Und hier können wir sie gruppieren, sagen wir, eine Homepage-Testgruppe. Und in dieser Beschreibung können wir nur die Testfälle hinzufügen , die sich auf die Homepage beziehen. Hier können wir also drei Tests hinzufügen, sich alle auf die Homepage beziehen. Außerdem können wir in einer Datei mehrere Beschreibungen haben, sodass wir eine weitere Beschreibung hinzufügen können, indem wir einfach den Namen ändern und so. Wir können sie gruppieren. Wir können separate Tests gruppieren lassen. Lassen Sie mich diesen löschen und lassen Sie mich über die Hooks sprechen. Hooks werden verwendet, wenn Sie nicht dieselbe Logik oder dieselben Aktionen für jeden Test wiederholen möchten. Nehmen wir in dieser Gruppe an, dass die allgemeine Aktion der R-Aktion darin besteht, zu einer Seite zu navigieren Wir haben diesen Code in allen drei Tests. Wenn Sie diesen Code also nicht wiederholen möchten, können Sie ihn vor jedem Test in einen Hook einfügen, und dieser Befehl wird vor jedem Test ausgeführt. Also lass mich zeigen, wie es aussehen wird. Also benutzt du vor jedem Test und außerdem ist es in einer Spüle. Also lass uns hier ein Waschbecken aufstellen. Und darin verwenden wir auch die Seitenfixierung, weil wir eine leere Seite und unseren Körper brauchen Ja. Also vor jedem Test wollen wir uns in der Quell-Demo zurechtfinden. Lassen Sie mich das kopieren und ich werde das Navigate go to aus all diesen Schritten löschen . Wenn ich nun diesen Test ausführe, wird navigate the go to von diesem Hook aus ausgeführt. Lassen Sie mich diesen Test ausführen. Lassen Sie mich das minimieren, weil ich zwei Monitore Sie sehen nicht, was passiert, und löschen das. Lassen Sie mich den zweiten ausführen. Und hier navigiere ich zu dieser Seite. Und wenn Sie die gesamte beschriebene Suite ausführen, lassen Sie mich laufen Sie werden feststellen, dass die Navigation für jeden Test durchgeführt wurde . Also für diese Hooks kannst du auch vor jedem verwenden , also hast du nach allem, nach jedem und vor allem. Es gibt eine Menge Hooks , die vor oder nach dem Test ausgeführt werden können . Sie können auch Ihre Vor- und Nachkommationen vor jedem setzen Wenn Sie also zwei Beschreibungen in einer Datei haben und so, können Sie sie kombinieren. Sie sind sehr vielseitig und sehr hilfreich. Es ist an der Zeit, das, was wir in der heutigen Lektion behandelt haben, zusammenzufassen. Also haben wir zunächst die grundlegende Struktur eines Dramatikertests besprochen die grundlegende Struktur eines Dramatikertests Und wir haben die Testmethode, das Page Fixture, das ist ein Browser mit leeren Seiten, die Struktur, die sich aus der Testfunktion, dem Namen, einer Synchronisation oder Seitenbefestigung und dem Außerdem haben wir besprochen, wie wir unseren Test mit der Describe-Methode gruppieren können und wie wir mehrere Tests innerhalb der Describe-Methode speichern können , indem wir sie, wie in unserem Beispiel, nach Homepage gruppieren wie in unserem Beispiel, Und am Ende haben wir auch etwas über Hooks vor und nach jedem gelernt, wie wir sie verwenden können, um unseren Code nicht zu duplizieren und so weiter Ich hoffe es hat euch gefallen. Wir sehen uns in der nächsten Lektion. 6. CSS-Selektoren verstehen und schreiben: Hallo. In dieser Lektion werden wir uns mit dem CSS-Selektor befassen, einem wichtigen Tool, das Sie verwenden werden, um Elemente auf der Seite zu identifizieren und mit ihnen zu interagieren . Am Ende der Lektion werden Sie sie sicher verwenden Lassen Sie uns zunächst darüber sprechen, was CSS-Selektoren sind. CSS-Selektoren sind Potter, mit denen Elemente auf einer Webseite ausgewählt und gestaltet werden Elemente auf einer Webseite ausgewählt und gestaltet Im Zusammenhang mit Zypern verwenden wir diese Selektoren, um gezielt Elemente für Wenn Sie beispielsweise auf eine Schaltfläche klicken, Text in ein Eingabefeld eingeben oder den Inhalt eines Treffers überprüfen möchten Text in ein Eingabefeld eingeben , müssen Sie den CSS-Selektor verwenden, um auf dieses bestimmte Element abzuzielen Lassen Sie uns nun über die beliebtesten CSS-Selektoren und über die allgemeine Formel sprechen , wie man einen CSS-Selektor findet Die allgemeine Formel für den CSS-Selektor besteht aus einem Tag, dem es sich um Eingabe, Schaltfläche T, Auswahl usw. handeln kann , dem Attribut, das eine Klasse sein kann, einem Text, einem Namen, einer ID und dem Attributnamen, kann Lassen Sie uns über die Suche nach CSS-Selektoren nach Klassen sprechen. Hier haben wir ein Beispiel für ein DIV, das eine Klasse mit dem Namen Klassenname hat Wenn wir dieses Element, dieses DIV, finden wollen, können wir Punkt und Klasse N verwenden. Die Sache mit Punkt funktioniert nur für Klassen - oder CSS-Selektoren pro Klasse Oder wir können die allgemeine Formel verwenden, die in unserem Fall Tag-Name ist, hier ist div, das Attribut in unserem Fall, das Attribut ist Klasse und der Attributname ist in unserem Fall Plus-Name Der nächste sind CSS-Selektoren nach ID. Hier haben wir eine Schaltfläche mit der ID, MID und einem Text zum Senden Um einen CSS-Selektor BID zu finden, können wir diese Formel verwenden Wir können has und den Namen der ID verwenden. Und in unserem Fall ist es Has und MAD. Die Sache mit Has kann nur für den ID-Selektor verwendet werden. Was die CSS-Selektoren betrifft, können wir das für den Klassen-CSS-Selektor verwenden Aber für den ID-Selektor können wir has verwenden, und wir können auch die allgemeine Formel verwenden , um einen CSS-Selektor zu finden Hier können wir den Tag-Namen verwenden, der Button ist. Als Nächstes verwenden wir das Attribut , in unserem Fall die ID, Button-ID und den Attributnamen , der meine ID ist. Und so bekämpfen wir einen CSS-Selektor. Der nächste Kampf ist der Kampf gegen CSS-Selektoren nach Attributen. In diesem Beispiel haben wir eine Eingabe mit dem Typ Text und dem Namen Benutzername Wir verwenden die allgemeine Formel, den Tagnamen. Ich markiere Eingabe, Attribut ist Name und Attributname ist Benutzername. Hier ist Tag, hier ist Attribut und Attributname. Und der letzte, von dem ich sagen kann, dass er am wenigsten beliebt ist , ist der CSS-Selektor nach Tags, wo wir nach Absätzen suchen können In unserem Fall haben wir einen Absatz und wir können einfach alle Absätze auf der Seite finden, und wir können einfach alle Absätze auf der Seite finden wo Wir können alle Flaschen und alle Eingänge finden. Noch etwas, das ich hier hinzufügen muss. Wenn wir diese allgemeine Formel verwenden, können wir sie ohne das Tag verwenden, aber es ist am sichersten, sie mit dem Tag zu verwenden. Lassen Sie uns ein wenig darüber üben , wie man ein Webelement findet. Für diese Übung werden wir also die Cypress-Dokumentation verwenden Ich zum Beispiel Cypress Tao. Und wenn Sie die interne Struktur dieser Seite sehen möchten , sollten Sie mit der rechten Maustaste klicken und sie überprüfen Jetzt sollten Sie zur Registerkarte Element gehen. Wenn Sie die genaue Position eines Webelements ermitteln möchten, können Sie auf diese Auswahlschaltfläche klicken und anschließend auf das Element auf der Seite klicken. Und Ihr Standort wird hervorgehoben. Versuchen wir also, einen CSS-Selektor nach Klasse zu finden. Wenn Sie mit der Suche nach den Elementen auf der Seite beginnen möchten, sollten Sie auf Strg+C klicken . Jetzt erscheint hier eine Suchleiste Versuchen wir also, den CSS-Selektor nach Klasse für diese E-Mail-Eingabe zu finden nach Klasse für diese E-Mail-Eingabe Zuerst klicken wir auf die Schaltfläche Auswählen , danach auf unser Element, und hier können wir beobachten, dass wir eine Klasse zwei Klassen haben Also lasst uns sie kopieren. Und lass uns hier einfügen. In unserem Fall haben wir zwei Klassen. Versuchen wir, die erste mit der Punktmethode zu finden. Wenn wir die Punktmethode verwenden, können wir beobachten, dass wir zehn Elemente derselben Klasse haben . Das heißt, wir sollten auch das zweite verwenden. Lass uns kopieren und wenn du zwei Klassen hast, kannst du sie mit Punkt verketten Im Moment haben wir unsere Elemente eins oder eins, was bedeutet, dass das Element einzigartig ist und dieser CSS-Selektor gut für unsere Tests verwendet werden kann Versuchen wir, auch dasselbe Element zu finden, indem wir die zweite Methode verwenden oder einen CSS-Selektor, die allgemeine Formel, finden In unserem Fall lautet die allgemeine Formel also das Attribut, das Tag, also die E-Eingabe, eckige Klammern, und hier sollten wir den Attributtyp schreiben , der der Klasse entspricht, und das Attribut in unserem Fall ist das Also eines der Form, was bedeutet, dass das Element einzigartig ist und wir es in unseren Tests verwenden können. Fahren wir fort, indem wir einen CSS-Selektor anhand der ID suchen. Ich möchte den Ort für diese Passworteingabe finden. Lassen Sie uns also den Ort dieses Attributs finden. Hier können wir beobachten, dass wir eine Eingabe mit dem ID-Passwort haben . In der Suchleiste können wir also den Hash und den ID-Namen eingeben, das erste Passwort ist. Wir können es beobachten. Es ist eins zu eins, was bedeutet, dass es ein einzigartiges Attribut und in unserem Test verwendet werden kann. Versuchen wir auch, die zweite Methode mithilfe einer allgemeinen Formel zu finden die zweite Methode mithilfe einer allgemeinen Formel Es ist die Eingabe, ID, gleiche Passwort eins, eins von eins, ein eindeutiger CSS-Selektor Versuchen wir außerdem, den Tag-Namen, der die Eingabe ist, zu löschen . Wie wir beobachten können, Wie wir beobachten können ist das Element auch einzigartig und kann ohne den Tag-Namen verwendet werden Als Nächstes versuchen wir anhand verschiedener Attribute herauszufinden, was keine ID oder Klasse ist. Lassen Sie uns den Selektor für diese Senden-Schaltfläche finden. Ich werde auf die Schaltfläche „ Suchen“ in diesem Element klicken. Wir können beobachten, dass es sich um eine Schaltfläche mit den Typen Submit und Class handelt. Lassen Sie uns nach Typ suchen. Also Kontrolle, wir haben unsere Suchleiste und die allgemeine Formel ohne Typ identisch, und der Name war Submit. Geben Sie von hier aus ein und geben Sie den Namen ein und senden Sie es ab. Und wir haben einen von einem, was einen einzigartigen Selektor bedeutet , der in unseren Tests verwendet werden kann Das ist für die heutige Lektion, in der wir lernen, wie man den Selektor benutzt, wie man schreibt, während ich den Selektor festlege und wie man das VD-Element auf der Seite findet Diese Fähigkeiten sind für das Schreiben effektiver Cypress-Tests unerlässlich Schreiben effektiver Cypress-Tests Wir werden diese Fähigkeiten in der nächsten Lektion einsetzen . Wir sehen uns dort. 7. Webelemente mit der locator() Methode finden: Hallo, alle zusammen. In dieser Lektion tauchen wir in einen der wichtigsten Teile des Schreibens eines Dramatikertests Finden und Interagieren mit Elementen auf einer Seite Dies kann mit der Locator-Methode geschehen. Wir werden also diese Swag Lab-Webseite verwenden und mit Hilfe dieser Anmeldeseite versuchen, verschiedene Arten von Locators zu finden Um also den Doom-Teil dieser Webseite zu öffnen, sollten Sie mit der rechten Maustaste klicken und zu Is Inspect gehen Und hier für diese Fenster sollten Sie Elemente auswählen Gehen wir nun zum Visual Studio-Code und erstellen wir eine neue Testdatei für die Locators, Locators Dot Spec Dot Ts Locators Dot Spec Dot Ts Und ich werde diesen Testfall einfach von hier mit dem Import kopieren , geben wir einen Namen für die Suche nach Locators und nur dieser Teil mit Der erste Typ von CSA hat ausgewählt, dass wir seine ID verwenden werden , das D eines Webelements Um also die Position eines bestimmten Elements im Doom zu finden , können wir auf diesen Pickup-Locator klicken, ein Element auswählen, darauf klicken und danach auf das Element klicken, das wir suchen möchten Wenn ich also auf diesen Nutzernamen klicke, wird ein Teil des Doom hervorgehoben Und hier können wir alles beobachten, was dieses Element hat. Wir können also beobachten, dass es sich um eine Eingabe handelt, die eine Klasse, einen Platzhalter hat , und auch hier haben wir eine ID Versuchen wir nun herauszufinden, ob diese ID eindeutig ist. Dazu sollten wir auf Control plus P klicken. Control plus F, und hier erscheint eine Sucheingabe. Wir haben also zwei Methoden, um das D zu schreiben. Die erste benutzt nur has und den Namen unserer ID. Also hier haben wir den Benutzernamen. Also lass uns versuchen, das zu tun. Nach dem Hinzufügen von Has und Benutzernamen haben wir eins von eins, was bedeutet dass dieses Element einzigartig ist. Versuchen wir nun, dieses Element anhand der ID zu finden. Um dieses Element zu lokalisieren, verwende ich den Locator der Specht-Methode Also Page Dot Locator und innerhalb dieser Methode werde ich diese ID übergeben Versuchen wir nun, die laufende Seite über die Benutzeroberfläche zu öffnen laufende Seite über die Benutzeroberfläche Also MPX Play, richtige Test-UI. Das öffnet also eine neue Seite mit all unseren Tests. Und von hier aus können wir den Test durchführen. Ich habe also meinen ersten Test aus vorherigen Lektion und den neuen Spezifikationsdatei-Locator Versuchen wir also, das auszuführen. Ich habe auf diese Schaltfläche geklickt und festgestellt , dass nur G two ausgeführt wurde, nur diese erste Zeile Das ist der Grund, warum wir hier auf unserem Locator keine Aktionen ausgeführt Also werde ich einfach einen Klick benutzen, um etwas zu tun. Ich klicke einfach auf dieses Element. Gehen wir also hier zu A, ich habe aus der Datei AutoSave aktiviert, die automatisch alle meine Änderungen speichert Gehen wir also zurück und versuchen es noch einmal zu laufen. Im Moment können wir hier also beobachten, dass wir die Aktion „Gehe zu“ und auch diese Klickaktion haben. Lass es mich größer machen. Für diesen Abschnitt haben wir also unsere Aktionen und davor und danach. Also nachdem wir gerade auf diese Benutzernameneingabe geklickt haben. Versuchen wir, diese Eingabe zu finden, indem wir die zweite Methode zum Schreiben von XPath Also dafür dieser Schreib-CSS-Selektor. Wir werden den gleichen ID-Benutzernamen verwenden, ihn aber anders schreiben Wir geben den Attributnamen, den Tag-Namen , also ID, und den Namen unseres AD Wir haben dasselbe Element, aber einen anderen Stil. Lassen Sie mich also die zweite IT einsetzen und lassen Sie uns diesen Test ausführen. Hier können wir also beobachten , dass das Element gefunden wurde und die Aktion beim Klick ausgeführt wurde. Versuchen wir nun, die Elemente anhand der CSS-Selektorklasse, dem Klassennamen, zu finden die Elemente anhand der CSS-Selektorklasse, dem Klassennamen, Versuchen wir also, den Klassennamen für diese Anmeldeschaltfläche zu finden für diese Anmeldeschaltfläche Ich werde es löschen und schließen. Also werde ich auf diesen Selektor klicken , danach auf die Anmeldeschaltfläche klicken Und hier können wir beobachten , dass es sich um eine Eingabe mit einer Klasse handelt, die sich aus zwei Klassen zusammensetzt: Submit-Button und Button-Action Wenn ich jetzt auf Strg F klicke, wird diese Suche angezeigt. Versuchen wir nun, die kürzere Version von Fighting by Class zu finden . also den Punkt und danach den Namen unseres Plus hinzufügen, können wir sie mit Hilfe von Punkten verketten, falls wir zwei Klassen haben können wir sie mit Hilfe von Punkten verketten, falls wir Im Moment haben wir also ein Element gefunden, das anhand des Klassennamens des CSS-Selektors gefunden wird Gehen wir also zu unserem Test und versuchen wir einen Click Await Page Dot Locator und unseren Locator, der nach Klassennamen der vollständige Klassenname ist, zwei Klauseln auszuführen und unseren Locator, der nach Klassennamen der vollständige Klassenname ist, Klassennamen der vollständige Klassenname Und lassen Sie uns einen Klick ausführen. Lassen Sie uns den Test durchführen. Und hier stellen wir fest , dass wir das Element gefunden haben und nach dem Klicken auf den Login wird eine Fehlermeldung angezeigt, weil das Passwort und der Benutzername erforderlich sind, aber leer sind. Eine andere Art, Webelemente zu bekämpfen besteht darin, nach ihren Attributen zu kämpfen. Versuchen wir also, diese Passworteingabe außer ihren Attributen zu finden . Hier haben wir den Namen der Attribute. Wir haben Datentest und Platzhalter. Lassen Sie uns versuchen, anhand des Namens zu suchen. Dazu klicken wir auf Control F und der Name lautet Passwort. Und lassen Sie uns versuchen, den Namen und das Passwort unserer Klammern einzugeben. Wir haben also eins von eins, was bedeutet, dass unser Element einzigartig ist Versuchen wir nun, es in unseren Tests zu verwenden. Suchen Sie also unser Webelement nach Attributen und lassen Sie uns die Klick-Aktion ausführen Also lass mich speichern und lass uns zu unserem Läufer gehen. Lassen Sie uns den Test durchführen und die neue Aktion beobachten. Hier können wir also beobachten, dass wir mithilfe des Attributnamens und des Kennworts eine Passworteingabe gefunden haben , und dann die Aktion „Klick“ ausführen. Die nächste sehr häufig verwendete Methode Elemente zu finden, ist anhand ihres Textes. Versuchen wir also, dieses Element zu finden und klicken Sie einfach auf dieses Element. Also, wenn du dieses Element im Doom findest, lass es mich noch einmal machen Also ist es ein Alter von vier Jahren und ein Passwort für alle Benutzer. Versuchen wir es einfach per Text zu finden. Wenn wir gehen, lass mich die zählen. Und wenn du dorthin gehst, warte auf den Ziffernfinder und drinnen auf Text, der gleich ist und unser Text Und danach mache ich einfach einen Klick. Also lass mich den Autosave speichern und lass uns den Test ausführen. So können wir beobachten , dass wir unser Element per Text gefunden haben, und einen Klick ausführen In Playwright können Sie auch Webelemente von XPath finden, aber das wird vom Dramatiker selbst nicht empfohlen, und darüber werden wir nicht sprechen, aber ich empfehle auch nicht, es und darüber werden wir nicht sprechen, aber ich empfehle auch nicht, in täglichen Projekten zu verwenden Playwright ist sehr mächtig, wenn es darum geht, Elemente anhand von Selektoren zu finden In dieser Lektion haben wir nur darüber gesprochen, wie Webelemente mithilfe von Locator-Methoden gefunden werden können, aber wir werden in den nächsten Lektionen auf den Rest der Methode eingehen . Wir sehen uns dort 8. Benutzerorientierte Locatoren in Playwright: Hallo, alle zusammen. Und in dieser Lektion werden wir uns mit den von Dramatikern empfohlenen integrierten Locators befassen in dieser Lektion werden wir uns mit den von Dramatikern empfohlenen integrierten Locators um Elemente anhand von Benutzerattributen zu finden Diese Locators machen Tests zuverlässiger und passen sich an die Art und Weise an, wie Benutzer mit der Playwriter-Anwendung interagieren Playwright bietet viele Methoden, intuitive Methoden, mit denen Sie Ihre Webelement-Selektoren besser und einfacher finden Diese Methode „Get by Roll“ hilft dabei die Elemente anhand ihrer Rollen wie Schaltflächen, Links, Überschriften usw. hier zu finden Links, Überschriften usw. hier zu In der Dokumentation zum Dramatiker haben wir eine sehr lange Liste all dieser Rollen Du kannst einen Blick darauf werfen, wenn du willst. Wir werden über einige Arten von Rollen sprechen. Kommen wir also zum Visual Studio-Code. Also hier habe ich einen neuen Test erstellt. Ich kopiere einfach diesen und hier haben wir nur die Go-to-Methode. Um nun die G-by-Roll-Methode zu verwenden, sollten wir zuerst unseren Seitenhalter verwenden. Also ein Punkt mit dem Gewicht pro Seite, und hier haben wir G B G von Rog Und wir sollten unsere Rolle übernehmen. Gehen wir jetzt zu unserer Swag-Anmeldeseite und versuchen wir, etwas per Rolle zu finden Hier haben wir diese Schaltfläche, und die Rolle dieser Schaltfläche ist eine Schaltfläche Versuchen wir nun, diese Schaltfläche nach Rolle und nach dem, was wir sehen, was angezeigt wird, zu finden . Wir sehen den Namen einloggen. Gehen wir also zu unserem Visual Studio-Wartebereich und geben wir den Namen ein. Wenn Sie also anfangen zu tippen, haben Sie hier all diese Rollen. Es ist eine sehr lange Liste. Aber lassen Sie uns Roll-Button und den Namen dieser Schaltfläche eingeben, was wir angezeigt sehen. Es ist der Name und der Name ist Login. Und lass uns versuchen, einen Klick zu machen. Also lass mich speichern und lass uns das UY öffnen. Lassen Sie mich also minimieren. Und vom Terminal aus spielen die Abgeordneten richtig, testen die Benutzeroberfläche. Also sollten wir diesen UI-Runner öffnen und hier habe ich den UserPS-Locator. Lass uns rennen. Also hier können wir das anhand der Rolltaste und anhand des Namens beobachten. Wir haben hier unseren Login-Namen. Wir haben dieses Element gefunden und darauf geklickt. Danach wurde es angezeigt. Versuchen wir nun, etwas in einer anderen Zeile zu finden. Schauen wir uns das mal an. Schauen wir uns diesen Text an. Also lasst uns versuchen, es zu finden. Es ist also eine Stunde, was bedeutet, dass die Rolle eine Überschrift ist und der Text für alle Benutzer bestimmt ist Lassen Sie uns nun versuchen , diese Zeile zu kopieren und versuchen wir, nach Zeile zu suchen Hier werde ich auch Seite weglegen, dass G B Rolle und die Rollen eine Heizung mit auch einem Nickerchen. Der Name, den ich kopiere, ist das Passwort für alle Benutzer. Versuchen wir also, einen Klick auszuführen. Lassen Sie uns also den Test durchführen und die Ergebnisse beobachten. Okay, hier stellen wir fest, dass wir das Ergebnis anhand des angezeigten Namens gefunden haben, und wir haben die Aktion „Klick“ ausgeführt Versuchen wir nun, die Elemente anhand ihres Textes zu finden, aber nicht so, wie wir es in der vorherigen Lektion mit Hilfe der eingebauten Dramatikermethode gemacht haben mit Hilfe der eingebauten Dramatikermethode Also werde ich diesen Kommentar kommentieren und auch auf die Seite warten. Wir haben die spezielle Methode „Per Text abrufen“. Und hier drinnen solltest du deinen Text angeben. Versuchen wir also, Text auf unserer Seite zu finden. Also hier haben wir viel Heizung. Versuchen wir also, nach diesem Standardbenutzer zu suchen. Suchen Sie nach Text als Standardbenutzer, versuchen wir, einen Klick auszuführen. Ich werde speichern und lassen Sie uns unseren Test ausführen. Hier können wir also beobachten, dass es auf den gesamten Teil geklickt hat , weil sich dieser Text innerhalb dieses Elementblocks Versuchen wir nun, einen anderen Text zu finden, dem nur dieser Text hervorgeht Also hier haben wir nur Beutelabore. Es ist nur dieser Test, Text. Also lass mich das Beutelabor wechseln. Lass es uns ausführen Okay, hier stellen wir fest, dass es nur auf diesen Text geklickt hat Die nächste Methode ist G mit Platzhaltern. Und du hast eine Menge Web-On-Formularen, also lass mich das löschen Sie haben diesen Platzhalter, Benutzernamen und das Passwort zur Benutzerführung. Sie können diese Eingaben also anhand dieses Platzhalters finden. Lassen Sie uns versuchen, das kommentieren zu lassen , versuchen wir, einen Weg zu finden, eine Seite, die nach Platzhaltern sucht und einen Platzhalter setzt Also war es der Benutzername. Lass uns klicken und versuchen wir auch herauszufinden, ob es das zweite Passwort war. Passwort. Klicken Sie außerdem auf. Also lassen Sie uns diesen Test durchführen. Also hier entdecken wir den ersten und den zweiten, indem wir die Methode Platzhalter verwenden. Und die letzte Methode , über die wir heute sprechen werden, ist Get by Test ID. Es wird sehr oft in echten Word-Anwendungen verwendet. Wenn das QA-Team zusammen mit dem Entwicklungsteam ein Datentest-ID-Attribut einrichtet, das für jedes Element auf der Seite verwendet wird . Hier haben wir das also basierend auf der Datentest-ID, aber es können auch andere Attribute konfiguriert werden. Gehen wir also zum Visual Studio-Code. Lassen Sie mich es also loben. Und du hast so etwas wie eine Wight-Seite und bekommst meine Test-ID Sie werden also über diese Methode schweben. Hier haben wir also, dass standardmäßig so etwas wie eine Datentest-ID erwartet wird Aber in unserer Webanwendung haben wir so etwas wie Datentest, keine Datentest-ID. Aber wie wir hier beobachten , können auch andere Attribute konfiguriert werden. Und wenn Sie dieses Attribut konfigurieren möchten, sollten Sie in Ihre Konfigurationsdatei gehen und die Testattributdaten ändern. Sie können diesen Code also kopieren und zu Ihrem vom Dramatiker konfigurierten Ort gehen Und innerhalb der Anwendung sollten Sie Ihre Testattributdaten hinzufügen Davor war es also nichts, aber ich werde mein Testattribut hinzufügen, das ist Datentest. Datentest wie in meiner Anwendung hier, wir haben viele Datentests nach Benutzernamen und Datentestdatentests nach Passwort. Lassen Sie mich jetzt hier ein Komma setzen, weil wir einen Fehler haben Ich werde versuchen, diese Test-ID zum Abrufen von Daten zu verwenden. Hier geben wir Insight nur den Wert dieses Attributs an. Versuchen wir also herauszufinden, was wir an Daten für den Datentest haben. Wir haben also sieben Elemente. Versuchen wir nun zu sehen, dass wir einen Datentest haben und die Anmeldeschaltfläche der Wert ist. Jetzt geben wir nur diesen Wert für die Anmeldeschaltfläche in den Awight-Datentest 80 ein, nur den Wert, und wir verwenden den Klick Versuchen wir also, das auszuführen. Ja, also haben wir das durch einen Datentest herausgefunden und wir führen die Klick-Aktion durch. Diese Test-ID zum Abrufen von Daten ist in einer echten Word-Anwendung sehr nützlich. Wenn Sie, zusammen mit Ihrem Entwicklungsteam, auch das QA-Team diese benutzerdefinierte Datentest-ID hinzufügen können, die im Laufe der Zeit nicht geändert wird und Ihr Test dadurch stabiler und zuverlässiger wird. Fassen wir es also zusammen. In der heutigen Lektion lernen wir, wie Dramatiker Methoden eingebaut haben, die helfen, saubere, wartbare und zuverlässige Tests zu schreiben wartbare Diese Methoden sind bereits integriert und konzentrieren sich auf Attribute, die sich bei Aktualisierungen der Benutzeroberfläche mit geringerer Wahrscheinlichkeit ändern werden geringerer Wahrscheinlichkeit ändern Und jeder dieser Locators orientiert sich eng an der Art und Weise, wie Benutzer die Anwendung wahrnehmen und mit ihr interagieren, wodurch sichergestellt wird, dass Ihre Tests sowohl effektiv als auch aussagekräftig sind sowohl effektiv als auch aussagekräftig Hoffe es hat dir gefallen. Wir sehen uns in der nächsten Lektion. 9. Komplexe Lokalisatoren und Filtertechniken in Dramatiker: Willkommen zurück. Und in dieser Lektion werden wir fortgeschrittene Locator-Techniken in Dramatiker untersuchen Sie lernen, wie Sie mit leistungsstarken Locator-Methoden wie first, last und Element nach Index durch komplexe Elemente navigieren und gezielt auf Elemente abzielen leistungsstarken Locator-Methoden wie first, und Außerdem werden wir uns damit befassen, wie man untergeordnete Elemente findet. Also lass uns anfangen. Für unseren Test verwenden wir die Hauptproduktseite unserer SWAG Lab-Website Lassen Sie uns dafür einen neuen Test erstellen. Ich werde diesen einfach kopieren. Ja, also lass mich das ändern und das löschen. Und um zu dieser Produktseite zu gelangen, sollten wir uns anmelden. Lassen Sie mich also den Login machen. Schnell. Also hier haben wir unseren Datentest. Benutzername für diesen, wir haben die Anmeldeschaltfläche für den Datentest. Und soweit wir uns erinnern, haben wir unsere Datentest-ID auf Datentest gesetzt in der vorherigen Lektion unsere Datentest-ID auf Datentest gesetzt. Versuchen wir also, uns anzumelden. Awgpage dot, sagen wir, get by data test ID, und die erste ist der Benutzername. Um das auszufüllen, verwenden wir die Methode In der nächsten Lektion werden wir über diese Methode sprechen. Aber jetzt nur für die Anmeldung. Jetzt lass mich kopieren. Und der zweite 1-sekündige Datentest-ID-Datentest ist Passwort. Verwenden wir also ein Passwort, und unser Passwort ist geheime Soße. Okay, geheime Quelle. Und lassen Sie uns auch den letzten für unseren Button kopieren. Also habe ich versehentlich geklickt, lass uns raus. Und hier der Datentest, es ist der Login-Button. Lassen Sie mich ihn hier kopieren und einfügen und wir klicken auf diesen Login-Button. Also lass uns testen. Lassen Sie uns unser Login minimieren und testen, ob es richtig funktioniert. Lassen Sie mich das ausführen und das Ergebnis hier beobachten. Passwort. Ja, es ist also ein Fehler. Also lass es mich von hier kopieren. Passwort. Ja, es ist ein Tippfehler. Ja, es sollte ein Passwort sein. Okay, also lass uns den Lauf absagen und ihn erneut ausführen. Okay, danach landeten wir auf unserer Produktseite. Hier führen wir unsere Filterung durch. Fangen wir also mit der ersten Art der Filterung an. Filterung nach dem ersten Element, letzten und dem Element nach dem Index. Hier auf dieser Produktseite haben wir also viele Schaltflächen mit der Auto-Karte. Versuchen wir also, den CSS-Selektor nach Rolle für diese Schaltfläche zu finden nach Rolle für diese Schaltfläche Also hier haben wir die Schaltfläche und den Text der automatischen Karte, den Namen. Lassen Sie uns also versuchen, anhand der Rolle eine Gewichtsseite zu finden, nach Rolle zu suchen und die Rolle ist die Schaltfläche. Ja. Und der Name dieser Schaltfläche ist Hinzufügen also sollte es eine Zeichenfolge sein, zur Karte hinzufügen. Versuchen wir nun, einen Klick auszuführen, damit ich auf dieses Element klicke. Also werde ich speichern. Also lass uns das ausführen. Nun, hier haben wir einen Fehler. Lassen Sie mich das maximieren. Und hier oben auf der Fehlerseite können wir beobachten, dass der Name zur Karte hinzukommt und sechs Elemente auflöst. Hier können wir also die hervorgehobenen sechs Elemente beobachten. In realen Anwendungen kann es also vorkommen , dass Sie für denselben Locator mehr als ein Element haben also in diesen Fällen keinen besseren Pfad, Wenn wir also in diesen Fällen keinen besseren Pfad, einen eindeutigen Zellleser finden können, können wir die spezielle Methode curt verwenden Und diese Methode führt die Aktion für das erste Element Also lass mich rennen und beobachten, was passiert ist. Es läuft also auf der Quelle, und hier können wir beobachten, dass wir auf die erste Schaltfläche A zu Karte A zu Karte geklickt haben auf die erste Schaltfläche A zu Karte A zu Karte Also haben wir auf den ersten geklickt und der Button wurde entfernt Jetzt, dieselbe Situation, wir können die letzte anwenden Und hier klickt der Dramatiker auf das letzte Element. Versuchen wir also zu rennen und zu beobachten, was passiert ist. Also ja, hier können wir beobachten, dass wir auf die letzte Schaltfläche „In den Warenkorb“ geklickt haben letzte Schaltfläche „In den Warenkorb“ Okay, aber in Situationen denen wir, sagen wir, auf den dritten klicken wollen , was können wir so etwas erreichen Anstatt also zuerst und zuletzt zu verwenden, können wir die Elemente anhand ihres Index anklicken. Dramatiker hat also eine spezielle Methode , mit der nach ihrem Index geklickt werden kann, und der Index basiert auf Null, und der Index basiert auf Null, was bedeutet, dass das erste Element einen Index von Null hat, das zweite Element das eine und das dritte zwei Hier gebe ich also zwei an, was bedeutet, dass wir auf das dritte Element klicken Lassen Sie mich das überprüfen und beobachten, was passieren wird. Wir können also beobachten, dass wir auf das dritte Element geklickt haben und nun das untere Element entfernt wurde Versuchen wir, unsere Elemente nach ihrem Text zu filtern. Hier können wir also beobachten, dass jedes Element seine eigene Klasse und seinen Datentest, den Inventargegenstand, hat. Versuchen wir nun, diesen Datentest zu finden. Lassen Sie mich nur diese Zeile kommentieren und mit dem Datentest auf Seite G warten. Und dieser Datentest wird ein Inventarelement sein. Versuchen wir, einen Klick durchzuführen. Das sollte also nicht funktionieren, weil wir ein Jahr oder 46 Elemente haben sollten. Und auch hier zeigt uns der Dramatiker , wie wir das nach dem Text filtern können Also lass uns so etwas machen. Also hier hat jeder Block von Webelementen seinen eigenen Namen. Lassen Sie uns also versuchen, die Sauce Labs zu filtern und auf AO Z zu klicken Lassen Sie mich diesen Text kopieren. Dieser? Okay. Lass es mich kopieren. Und danach können wir die Filtermethode verketten. Und innerhalb dieser Filtermethode können wir den Text oder das Webelement angeben , das wir filtern möchten. Versuchen wir also, zunächst nach Text zu filtern. Text hat keinen Text und hat auch keinen. Wir haben vier verschiedene Arten der Filterung. Lassen Sie uns also nach einem Text filtern. Und hier erwarten wir diesen Text, und lassen Sie uns den Klick ausführen. Jetzt sollte der Dramatiker all diese Webelemente nach Inventargegenständen suchen all diese Webelemente nach Inventargegenständen Danach sollten wir sie nach diesem Text filtern und den Klick ausführen Lassen Sie uns das also ausführen und beobachten, wie es nach filtert. Hier erwarten wir also, dass wir nur diesen nach ihrem Text gefiltert und angeklickt haben. Schauen wir uns nun an, wie wir diesen Filter nicht anhand von Text, sondern anhand eines anderen Locators innerhalb dieses Elementblocks durchführen können diesen Filter nicht anhand von Text, sondern anhand eines anderen Locators innerhalb dieses Elementblocks Schauen wir uns das an. Nehmen wir an, wir möchten auf diesen klicken, aber nicht per Text, sondern über einen anderen Locator Also hier ist ein Block, es ist ein Div mit Inventargegenständen. Und hier haben wir diesen Text, der ein Link ist. Wenn du darauf klickst, öffnen wir diese Seite. Von hier aus können wir also einen weiteren Locator pro Rolle extrahieren, die Rolle des Links und der Name diesem Namen entspricht Also lass mich kopieren. Und hier können wir Filter verwenden. Und innerhalb des Filters verwenden wir die Filterung durch einen anderen Locator Was Locator und has not angeht, so ist das auch für Locator, aber Negationsphase, ordnen wir nach Rolle, und wir stellen fest, dass unsere Rolle ein Link ist und dass dieser Link den Namen hat ist das auch für Locator, aber Negationsphase, ordnen wir nach Rolle, und wir stellen fest, dass unsere Rolle ein Link ist und dass dieser Link den Lassen Sie mich also den Namen eingeben, den wir kopiert haben, und dann klicken wir . Lassen Sie mich also speichern und die Ergebnisse beobachten. Ja. Hier können wir also beobachten, dass wir nur auf dieses geklickt haben, weil wir nach einem anderen Webelement gefiltert haben Playwright-Dokumentation enthält eine sehr lange Liste von Beispielen, nützliche Beispiele dafür, wie Sie diese Filteroptionen verwenden können diese Filteroptionen verwenden Das war es also für die heutige Lektion. Wir haben zuletzt gelernt, wie wir Durst nutzen und die Elemente anhand ihres Index finden können. Außerdem haben wir herausgefunden, wie wir nach Text oder einem anderen Webelement filtern können . Wir sehen uns in der nächsten Lektion. 10. Werte und Text aus Webelementen extrahieren: Willkommen zurück. In dieser Lektion erfahren Sie, wie Sie Werte aus Locatoren wie Textinhalten oder Attributen extrahieren Locatoren wie Textinhalten oder und effizient mit mehreren Elementen arbeiten Darüber hinaus werden wir besprechen , wie Locators zur besseren Codeverwendung und Wartbarkeit in Konstanten gespeichert besseren Codeverwendung und Wartbarkeit in Konstanten werden können. Lass uns anfangen erste Methode, die wir besprechen möchten, ist Textinhalt, wie wir den Text aus einem Webelement extrahieren können. Nehmen wir an, wir sind auf dieser SwaglaGPduct-Seite gelandet und nachdem wir auf die Schaltfläche „Auf Karte hinzufügen“ geklickt haben, wollen wir bestätigen, dass der Text nach dem wird wir also zu einem Visual Studio-Code über, wie wir das machen können einem Visual Studio-Code über, wie wir das machen Ich werde unseren Test kopieren. Lassen Sie uns den Namen in etwas wie das Extrahieren von Werten ändern etwas wie das Extrahieren von Werten Und hier werde ich nur teilweise dieses Protokoll behalten nur teilweise dieses Protokoll , weil wir auf dieser Produktseite sein müssen Lassen Sie uns jetzt also zuerst auf dieses erste Webelement klicken. Versuchen wir also, dieses Element zu finden. Es ist eine ATO-Karte. Okay, also warte ich auf eine Seite, die wir machen indem wir alle durch Roth kommen und die Rolle ist Knopf. Und der Name ist In den Einkaufswagen legen. Name. Zur Karte hinzufügen. Wir kennen also die Schaltfläche A zur Karte, wir haben etwa sechs, und wir klicken nur auf das erste Element. Okay, also lass uns den UI-Runner öffnen. Lassen Sie uns dafür Bx Play Write Test schreiben, es gibt eine Benutzeroberfläche, und lassen Sie mich minimieren Lassen Sie uns auf Enter klicken. Ja, jetzt haben wir hier die Extrahierung von Werten. Also lass es mich ausführen. Wir führen die Anmeldung durch und am Ende klicken wir auf diese Schaltfläche, und diese Schaltfläche wird zu SRMove. Okay, jetzt ist es an der Zeit zu überprüfen ob aus dieser Schaltfläche die Schaltfläche „Text entfernen“ wurde Versuchen wir also, einen Selektor zum Entfernen für diese Schaltfläche zum Entfernen zu finden einen Selektor zum Entfernen für diese Schaltfläche zum Entfernen Hier können wir also beobachten, dass wir einen Datentest haben und dass wir auch eine ID haben Nehmen wir es per Datentest an. Also kopiere ich diesen Datentest und lass uns zu unserem Visual Studio-Code übergehen. Hier warte ich also auf Seite G nach Test-ID, und hier gebe ich meine Test-ID und unseren Methodentextinhalt an. Diese Methode gibt also ein Versprechen mit einer Zeichenfolge zurück. Wir werden den Text aus unserem Webelement extrahieren . Wir werden es uns geben. Also lasst uns diesen Textinhalt in einer Variablen speichern. Also hole ich mir eine Konstante und nenne sie Button-Text, ungefähr so Okay. Danach werde ich ein Konsolenprotokoll erstellen, um den Wert dieser Schaltfläche in der Konsole zu sehen. Also lass es mich ausführen. Und hier haben wir die Konsole. Also hier haben wir unseren Text entfernt. Und danach können wir auch eine Behauptung hinzufügen, um unsere Ergebnisse zu überprüfen Erwarten Sie also, dass die Schaltfläche, der Text und unser Sensor aktiviert und entfernt werden Okay, lassen wir es laufen und so den Pass raus und der Text wird entfernt. Mit Hilfe von Text mit dieser Methode können wir also den Text aus einem Webelement extrahieren. Manchmal möchten wir den Wert eines bestimmten Attributs überprüfen . In unserem Fall haben wir hier also einen Platzhalter für den Benutzernamen und für das Passwort für eine bessere Benutzerführung Nehmen wir aber an, ich möchte überprüfen, ob diese Attribute korrekt sind Lassen Sie mich also die Elemente untersuchen und nach diesem Passwort suchen. Also hier habe ich Passwort und Platzhalterpasswort eingegeben. Ich möchte überprüfen, ob unser Platzhalter korrekt ist. Lassen Sie mich dieses Element anhand der ID finden. Okay. Holen wir es uns per Ausweis. Okay, hier haben wir unseren Text. Ich komme einfach in diesen Login-Teil und wir werden ihn löschen. Ich warte auf Page Dot Locator und hole mir das mit Hash und unserer ID Und unsere spezielle Methode, Get Attribute. Und hier sollten wir das Attribut übergeben , für das wir den Wert dieses Attributs erhalten möchten . Unser Attribut ist also Platzhalter, aber wir wollen den Wert überprüfen Lassen Sie mich hier einen Platzhalter hinzufügen. Und lassen Sie uns das auch in einem Wert als Platzhalterwert speichern einem Wert als Platzhalterwert Okay, hier sind unsere Nachteile Wir sollten den Wert unseres Platzhalters aus dem Passwort-Locator speichern unseres Platzhalters aus dem Passwort-Locator Lassen Sie uns also einen Csalog erstellen, um diesen Wert zu beobachten. Außerdem fügen wir eine Assertion und für unseren Expect-Platzhalterwert ist es, und wir erwarten und wir Ja, wir erwarten. Ja, hier, Pass. Wort. Okay, lassen Sie uns den Test durchführen. Und bei der Beratung sollten wir ein Passwort haben und wir stellen fest, dass unser Test bestanden hat. Also haben wir hier mit Hilfe von get attribute den Wert des Platzhalterattributs extrahiert Auf diese Weise können Sie den Wert für alle Attribute extrahieren. Nehmen wir an, wenn Sie den Wert aus dem Datentest extrahieren möchten , Sie hier anstelle des Platzhalters einfach Daten hinzu , ja, und hier haben Sie den Datentestwert nächste Methode, die wir besprechen möchten, ist der Eingabewert , der den Wert aus einem Textbereich oder aus einer Eingabe extrahiert aus einem Textbereich oder aus einer Eingabe Und wenn Sie etwas eingeben und danach überprüfen möchten, ob Ihr Text korrekt angezeigt wird, können Sie diesen Text extrahieren und überprüfen. Gehen wir also zum Visual Studio-Code und versuchen , so etwas auszuführen. Wir sind also bei dieser Quell-Demo, okay, und danach möchte ich etwas in dieses Benutzernamenfeld eingeben. Lassen Sie mich also diese Felder löschen, auch dieses, und lassen Sie uns den CSS-Selektor für unseren Benutzernamen finden Also hier können wir es nach ID nehmen und die ID ohne Hash schreiben, aber etwas, das der ID entspricht, und den ID-Wert Hier haben wir also einen von f. Gehen wir nun zu unserem Visual Studio-Code, und hier werde ich versuchen, den CSS-Selektor zu verwenden Also werde ich eine Gebühr mit dem Eingabefeld für den Benutzernamen erstellen. Und in diesen Kosten werde ich den Locate Locator mit dem Seitenpunkt und unseren Locator speichern In diesem Eingabefeld für den Benutzernamen haben wir jetzt unser Element Jetzt, nachdem wir zu dieser Quell-Demo gegangen sind, möchte ich etwas in dieses Benutzernamenfeld eingeben. Sie uns dazu Lassen Sie uns dazu ein Eingabefeld für den Benutzernamen mit Gewicht erstellen und mit Hilfe der Metallfüllung einen Text eingeben. Lassen Sie mich hier also auch einen weiteren Const-Text erstellen. Für den Benutzernamen. Okay, wir speichern den Text hier und lassen uns den Benutzernamen-Text testen. Okay. Also hier habe ich meinen Text, und ich möchte ihn in unseren Benutzernamen eingeben. Okay. Lassen Sie uns nach der Eingabe speichern und uns die Ergebnisse ansehen. Okay, also ja. Also hier hat unsere Benutzernameneingabe Benutzernamentext, Text, Text, zweimal sollte Text Text sein. Okay. Wenn ich nun bestätigen möchte, dass unsere Eingabe den richtigen Wert enthält, kann ich den Wert extrahieren. Also, wie kann ich das mit Hilfe des Methodeneingabewerts machen. Es ist also ein Gewicht Auch wenn ich diese Kosten wiederverwende, schreibe ich nicht zweimal dasselbe Element. Ich verwende nur die Kosten wieder. Also Benutzername, Eingabefeld, Punkt und Eingabewert Und hier gibt diese Methode die Zeichenfolge aus unserer Eingabe zurück. Lass mich das in einer anderen Konstante speichern. Also const und lass uns den Text aus der Eingabe des Benutzernamens sehen aus der Eingabe des Benutzernamens Okay, jetzt haben wir in dieser Konstante den Text aus der Benutzernameneingabe gespeichert Und lassen Sie uns auch ein Konsolenprotokoll erstellen. Ich möchte diesen Text in der Konsole sehen und eine Behauptung hinzufügen Erwarte unseren Text von der Eingabe des Benutzernamens. Entspricht unserem Text von hier aus, Nutzername. Also lass es uns so ausdrücken. Lass uns speichern und lass uns laufen. Hier haben wir die Konsole. Wir sollten sehen. Ja, also Nutzername, Text, Test, und unser Test war erfolgreich. Wenn Sie also den Text aus einer Eingabe oder einem Textbereich extrahieren möchten , sollten wir den Eingabewert verwenden. Lassen Sie uns darüber diskutieren, wie wir mit mehreren Webelementen umgehen können . Und die erste Methode, die ich besprechen möchte, ist die Methode, die häufig verwendet wird, um zu zählen, wie viele Elemente wir auf einer Seite haben. Lassen Sie uns also einen weiteren Test erstellen. Ich werde diesen kopieren, hier einfügen, extrahieren und sagen wir mehrere Werte Ich werde das löschen und einfach den Teil mit dem Login behalten. Also was ich in diesem Test nach dem Login machen möchte, möchte zählen, wie viele Artikel ich auf dieser Seite habe. Versuchen wir also, den CSS-Selektor für ein Element zu finden. Hier können wir also beobachten , dass jedes Element diesen Klassen- und Elementnamen hat. Okay. Lass es mich kopieren. Lass uns sehen, ob, ja, wir sechs davon haben. Gehen wir jetzt zu unserem Visual Studio-Code. Und lassen Sie uns einen Punktfinder für die Gewichtsphase erstellen, und wenn wir nach Klassen suchen, verwenden wir die Punktnotation . Um all diese Elemente zu extrahieren, sollten wir die Methode von verwenden Diese Methode gibt ein Versprechen mit einer Reihe von Locators zurück ein Versprechen mit einer Reihe von Lassen Sie uns dieses Array in einer Konstante speichern. Also werde ich eine Reihe von Produkten erstellen und jetzt versuchen wir, eine Konsole zu erstellen, um all diese Elemente in unserer Konsole zu sehen Also alle Produkte. Also lass mich speichern und lass uns versuchen zu rennen. Hier in der Konsole. Also hier haben wir all diese Locators als Array. Wir haben unsere Klammern, eckige Klammern. Versuchen wir nun, eine Behauptung zu , um die Gesamtzahl zu überprüfen Erwarten wir also auch alle Produkte. Und da unsere Methode ein Array zurückgibt, haben wir diesen Längenparameter der die Länge, die Gesamtzahl unseres Arrays und unsere Länge zurückgibt die Gesamtzahl unseres Arrays und unsere , damit es sich hier um den Export handelt, erwarten wir Rylenth, und wir erwarten sechs Elemente Lassen Sie uns jetzt speichern. Lass uns rennen. Und hier stellen wir fest, dass unser Test erfolgreich bestanden wurde. Ein weiteres wichtiges Feature, das ich Ihnen zeigen möchte , ist, wie Sie mit Hilfe des Dramatikers nach den Locators suchen können Hier haben Sie also eine Schaltfläche, die Pickup Locator heißt Wenn Sie auf diese Schaltfläche klicken und danach auf einer Seite auf etwas klicken, nach dem Sie suchen möchten Nehmen wir an, Sie möchten die Anmeldeschaltfläche. Klicken wir auf die Anmeldeschaltfläche. Hier gibt Ihnen der Dramatiker den Locator , der fast jedes Mal korrekt ist Das können Sie jederzeit überprüfen. Aber mit Hilfe dieser Funktionalität können Sie die Locators für viele CSS-Selektoren oder die Locators für viele Webelemente finden viele CSS-Selektoren oder die Locators , die auch nach Rollen oder nach Datentest-ID bereitgestellt werden Die nächste und letzte Methode , die ich heute besprechen möchte, ist eine Methode, die auch den Text aus Webelementen extrahiert, aber sie kann mehrere Elemente verarbeiten Nehmen wir an, wir befinden uns auf dieser Seite und möchten den Namen all dieser Produkte extrahieren . Dafür sollten wir uns also den Artikelnamen nach Klasseninventar suchen. Hier haben wir es also schon aus der vorherigen Übung. Nehmen wir an, wir haben alle Produkte, aber stattdessen verwenden wir alle Textinhalte. Okay, diese Methode gibt also auch ein String-Array zurück, aber es ist ein Array von Strings. Und lassen Sie mich kommentieren, dass diese Behauptung scheitern wird. Aber lassen Sie mich eine Konsole für alle Produkte erstellen und sie alle Produkttexte umbenennen, und sie alle Produkttexte umbenennen weil wir nur den Text extrahieren Okay, also lass es uns ausführen. Und hier auf der Konsole haben wir RA, wir haben die eckigen Klammern mit all diesen Namen. Und nehmen wir an, wir wollen sicherstellen , dass mindestens einer dieser Artikel unser Artikel mit Slab Bite Light Um das zu tun, verwenden wir eine Behauptung, erwarten wir, dass alle Produkte enthalten, hier müssen wir enthalten , und wir werden prüfen, ob mindestens eines dieser Elemente oder unser Element wieder durchkommt Also lasst uns diesen Namen so leicht kopieren. Okay. Lass uns speichern und lass uns rennen. Hier haben wir also unseren Testtest , weil S Slabs by Light der zweite aus unserem Test ist Das ist alles für die heutige Lektion. Wir werden lernen, wie wir Textwerte aus einzelnen Elementen und aus mehreren Elementen extrahieren können Textwerte aus einzelnen Elementen . Wir sehen uns in der nächsten Lektion. 11. Assertionen in Dramatiker schreiben: Willkommen zu dieser Lektion über Behauptungen. Sie sind wichtig, um zu überprüfen sich Ihre Tests erwartungsgemäß verhalten Sie stellen sicher, dass Ihre Anwendung ordnungsgemäß funktioniert, indem tatsächlichen Ergebnisse mit den erwarteten Werten vergleichen Heute werden wir uns mit der Verwendung von Assertion in Dramatiker befassen und verschiedene Assertion-Methoden untersuchen Ate bietet über die Expect-Funktion eine integrierte Assertion . Diese Assertion wird verwendet, um verschiedene Aspekte der Seite wie Element, Sichtbarkeit, Textinhalt oder Attribute zu validieren verschiedene Aspekte der Seite wie Element, Sichtbarkeit, Textinhalt oder Weltweit gibt es also zwei Arten von Zusicherungen: automatische Wiederholung von Zusicherungen und solche, die keinen erneuten Versuch und Lassen Sie uns also damit beginnen diese einfache Behauptung wie diese zu verwenden Gehen wir zum Visual Studio-Code. Und hier lass mich kopieren. Lassen Sie uns hier also einen neuen Test mit Assertionen erstellen. Okay, also diese einfachen Behauptungen, nehmen wir an, wir haben ein konstantes Alter und der Wert ist und der Wert Okay. Nehmen wir nun , wir wollen behaupten , dass dieser Wert 22 ist. Dafür können wir also die spezielle Funktion oder Methode verwenden, erwarten und altern und 22 sein. Hier können wir also beobachten , dass diese Methode, der Rückgabetyp dieser Methode, ungültig ist. Es ist keine Rückgabe eines Versprechens. Und aus diesem Grund verwenden wir hier kein Warten weil eine Gewichtung nur verwendet wird , wenn die Funktion ein Versprechen zurückgibt. Okay. Lassen Sie uns jetzt versuchen, diesen Test durchzuführen. Lass uns richtig spielen, wir testen, da ist der GY, und wir werden haben, also lass mich das auf diese Seite bringen. Okay. Also hier haben wir Behauptungen. Lass uns rennen Okay, hier hat unser Test bestanden, weil wir nur verifizieren, dass wir 22 Jahre alt sind. Okay. Also auch hier haben wir in der Dokumentation des Dramatikers viele verschiedene Arten von Behauptungen, Beispiel nahe dran zu sein , also zu überprüfen, ob diese Zahl ungefähr gleich etwas ist oder größer ist als Null, wahr zu sein und Text zu enthalten, Text zu haben, etwas Ähnliches Die nächste Art von Assertionen sind automatische Wiederholungsversuche. Versuchen wir es also mit der ersten Methode, dem Textelement sucht Für diese Lektion werden wir also diese Benutzeroberfläche verwenden, um playground.com mit Auto Await zu testen Lassen Sie mich diesen kopieren und gehen wir zum Visual Studio-Anruf Lassen Sie uns also hier damit beginnen, zu dieser Seite zu navigieren. Warten Sie auf die Seite, gehen Sie zu und fügen Sie unsere URL Okay. Wir wollen testen, 5 Sekunden warten, mit der rechten Maustaste auf Inspect klicken ob diese Butter den Dex hat, 5 Sekunden warten, mit der rechten Maustaste auf Inspect klicken und nach unseren CSS-Datensätzen suchen. Schnappen wir es uns per AD. 5 Sekunden, und versuchen wir zu sehen, ob es einzigartig ist. Also lass mich kopieren. Taste fünf anwenden. Okay, wir haben also eins von einem. wir auch Has hinzu. Okay, eins von eins. Lassen Sie mich dieses Element also gehen wir zurück zum Visual Studio-Code und lassen Sie uns einen Kostenplan erstellen, in dem wir dieses Element speichern. Also, lass uns 5 Sekunden geben. Button- und Seitenpunkt-Locator, und hier übergeben wir unseren Jetzt wollen wir den Text in dieser Schaltfläche bestätigen. Dafür haben wir also eine spezielle Methode , nämlich Text zu haben. Lassen Sie uns also die spezielle Funktion Expect und die 5-Sekunden-Taste und unsere Methode verwenden , um Text zu haben. Und hier gelten unsere Texte für 5 Sekunden. Wenn wir also den Mauszeiger darüber bewegen, um Text zu haben, stellen wir fest, dass der Rückgabetyp, hier ein Promise ist, was bedeutet, dass wir hier await verwenden sollten weil wir den Rückgabetyp Await Promise haben , wir sollten await verwenden Gehen wir also zu unserem Läufer und versuchen wir zu rennen. Okay, unser Test war erfolgreich, wir sind zu dieser Seite navigiert und haben den Text dieser Schaltfläche überprüft Wir haben diese Art von Behauptung bereits in der vorherigen Lektion verwendet von Behauptung bereits in der vorherigen Die nächste Behauptung werden wir auf ihre Sichtbarkeit überprüfen. Nehmen wir an, Sie befinden sich auf einer Seite und möchten bestätigen, dass eine Schaltfläche sichtbar ist Nachdem Sie etwas abgeschlossen und auf die Schaltfläche „Senden“ geklickt haben, möchten Sie bestätigen, dass eine bestimmte Erfolgsmeldung angezeigt wurde. In diesem Fall können wir also die Methode „sichtbar sein“ verwenden. Also hier haben wir eine Menge Optionen, sichtbar aktiviert, editierbar, und hier haben wir einen Button Wir können auf diesen Button diese Bedingungen anwenden. Nehmen wir an, ich klicke für 3 Sekunden auf „Anwenden und das Zielelement verschwindet für 3 Sekunden. Jetzt haben wir hier schon unsere 5-Sekunden-Schaltfläche, und lassen Sie uns auf diese Schaltfläche klicken. Also warte 5 Sekunden Punkt, klick. Okay. Und lassen Sie mich das kommentieren. Also lasst uns rennen und beobachten, was passieren wird. Okay, lassen Sie mich von hier aus weglaufen , dann habe ich bessere Sicht. Okay, ich hatte in einem anderen Fenster geöffnet. Also lass mich die Zeit minimieren und mehr Zeit nutzen. Also hier, nachdem ich auf diesen Button geklickt habe, wird dieser Button für 5 Sekunden verschwinden. Okay, ich werde so rennen. Im Moment wollen wir also sicherstellen, dass unser Button sichtbar ist. Holen wir uns also den CSS-Selektor für diese Schaltfläche. Okay, hier haben wir die ID und das Ziel. Okay. Steuerung V eins von eins. Okay, unser Ausweis ist Target. Also lass mich das Maximum herausholen. Und lassen Sie uns unsere Button-Zielschaltfläche erstellen. Also Const Target Button und es Page Dot Locator und By AD. Okay. Wenn Sie nun überprüfen möchten, ob dieser Button sichtbar ist, sollten wir die Methode special assertion verwenden, um sichtbar zu sein Okay. Also machen wir einen Button „Warten, erwarten Sie das Ziel“ und „Sichtbar sein“. Okay. Also lass uns sehen , was hier passieren wird. Also werden wir auf dieser Seite navigieren. Danach klicken wir auf diese 5-Sekunden-Schaltfläche und diese Schaltfläche wird für 5 Sekunden verschwinden, aber wir erwarten , dass diese Schaltfläche angezeigt wird. Gehen wir also zu unserem UI Runner und versuchen wir zu starten. Hier erwarten wir also, dass die Schaltfläche sichtbar ist, aber sie ist versteckt. Und es schien, als ob es nach 5 Sekunden angezeigt wurde, aber unsere Behauptung schlug fehl Aber Sie können beobachten, dass, wenn wir laufen, diese Behauptungen eine gewisse Zeit warten Ja, also hier haben wir 5 Sekunden. So funktionieren automatische Wiederholungsversuche bei Assertionen. Sie überprüfen für einen bestimmten Zeitraum immer wieder die Bedingung, an die angehängt werden soll, ob sie sichtbar oder deaktiviert werden soll In unserem Fall kann es also, um sichtbar zu sein, um sichtbar zu sein, auch einen Timeout erhalten. Standardmäßig beträgt dieser Timeout 5 Sekunden Wenn wir also auf diese Schaltfläche klicken, sagen wir 3 Sekunden Lassen Sie mich darauf hinweisen, dass diese Schaltfläche für 3 Sekunden verschwindet. Unsere Methode wird 3 Sekunden warten und danach werden wir die Schaltfläche aktivieren. Wir können aber auch das benutzerdefinierte Timeout angeben. Also können wir Carly-Klammern und Timeout hinzufügen und das Timeout auf 6 Sekunden setzen Hier ist das Timeout in Millisekunden. Und jetzt, ob wir das ausführen. Also lass mich rennen. Wir werden beobachten, dass unser Beitritt wartet, 5 Sekunden. Danach, nach 5 Sekunden, wird der Button sichtbar. Und schließlich ist die Behauptung wahr. Hier haben wir also beobachtet , dass die Schaltfläche angezeigt wurde und unser Test bestanden Die nächste Art von Behauptung , über die wir heute sprechen möchten, ist die Überprüfung, ob ein Element aktiviert oder deaktiviert ist Hier haben wir also die Option, diese Schaltfläche zu aktivieren. Und wenn Sie auf diese angewendete Schaltfläche klicken, wird diese Schaltfläche für 5 Sekunden deaktiviert. Also lass mich noch einmal klicken. Und hier stellen wir fest, dass es sich um etwas Besseres handelt. Wie wir das testen können, gehen wir zu unserem Visual Studio-Code. Hier haben wir also unser Ziel, unsere 5-Sekunden-Schaltfläche, und wir müssen noch einen weiteren Locator hinzufügen Für unser deaktiviertes Kontrollkästchen. Versuchen wir also, diesen zu finden. Also hier haben wir eine Liste mit einer Eingabe. Es ist eine Eingabe. Es ist eine Checkbox mit aktiviertem Namen. Versuchen wir nun, dieses Kontrollkästchen zu deaktivieren. Das ist also eine Gewichtsseite, und lassen Sie uns nach der Rolle suchen Und die Rolle dabei ist eine Checkbox. Wir haben hier also ein Kontrollkästchen mit dem Namen „ Der Name ist aktiviert“. Also mal sehen , woher ich das alles habe. Also hier haben wir ein Scheckbuch, ein Kontrollkästchen, das wir beobachten können, und die Namen, die von hier aus aktiviert sind. Okay, also Name aktiviert. Und lass uns Hm machen. Wir können klicken, wenn wir überprüfen wollen, wir überprüfen. Aber Playwright bietet auch Costa-Methoden an, eine eingebaute Methode, die nicht markiert ist. Diese Methode wird das Häkchen entfernen, wenn wir unsere Checkbox deaktivieren Also lass mich speichern, hier muss ich etwas hinzufügen. Ja. Jetzt ist es richtig. Jetzt werde ich das Häkchen entfernen. Ich werde das Häkchen bei „Aktiviert“ entfernen. Danach werde ich auf diese 5-Sekunden-Schaltfläche klicken. Lassen Sie mich also zu Beginn überprüfen, ob diese Schaltfläche aktiviert ist. Also erwarte ich und hier habe ich die Target-Taste aktiviert. Okay, jetzt werde ich hier einfach alles kommentieren. Also lass uns zu unserem Läufer gehen. Lass uns rennen. Die SRT ist bestanden, weil unsere Schaltfläche aktiviert ist. Lassen Sie uns nun überprüfen, ob dies aktiviert ist, und klicken wir auf diese 5 Sekunden. Danach möchte ich überprüfen, ob unsere Zielschaltfläche deaktiviert wurde. Also müssen wir deaktiviert sein. Es ist eine Negation des ersten. Also lass mich es löschen und lass uns zu unserem Läufer gehen. Danach navigieren wir also und überprüfen, ob diese Schaltfläche aktiviert ist Wir deaktivieren und überprüfen diese aktivierte Option. Danach klicken wir auf diese 5 Sekunden und am Ende wurde unsere Schaltfläche aktiviert und unser Test wurde bestanden Auch hier waren wir früher aktiviert und deaktiviert. sind in der Playwriter-Methode eingebaut, aber Sie können auch fast jede Methode negieren Sie können also so etwas verwenden, Dart, um nicht aktiviert zu werden oder Dart, um nicht deaktiviert zu werden, was nicht sehr beliebt ist, und ich würde nicht wirklich empfehlen, das zu verwenden, weil es manchmal Es ist besser, so etwas wie „deaktiviert werden“ zu verwenden wenn man diese Möglichkeit hat Und die letzte Art von Behauptung für heute sind weiche Behauptungen Wenn wir feststellen, dass eine Assertion fehlgeschlagen ist, wird unser Test normalerweise beendet, und die Ausführung wird ebenfalls beendet. Es ist fertig Mit Hilfe der Soft-Assertion beenden sie die Testausführung jedoch nicht, und Sie können Ihre Aktionen fortsetzen , nachdem diese Assertion fehlgeschlagen ist. Der Test wird jedoch als fehlgeschlagen markiert Versuchen wir also, Soft Assertion zu verwenden . Also haben wir hier, lassen Sie uns nur diesen Zielknopf behalten. Und lassen Sie uns eine Bestätigung des Textwerts durchführen. Wir können also erwarten, dass die Zielschaltfläche und unsere zweite Sitzung Text enthalten Ja. Und der Text, das ist ein Button. Okay, also lass uns zu unserem Test-Runner gehen. Lass uns rennen. Ja, also unser Test wurde bestanden weil diese Behauptung bestanden wurde , weil der Text Butter ist Danach, nachdem unser erwartetes Ziel erreicht ist, können wir auch eine Aktion ausführen Verwenden wir also etwas wie auch hier sollten wir await setzen, weil es ein Versprechen zurückgibt. Okay. Und jetzt benutzen wir await, target, button and click. Also lass uns rennen. Ja, also unsere Behauptung wurde bestanden und wir haben auf diese Schaltfläche geklickt Aber nehmen wir an, wir haben hier so etwas hinzugefügt , wie Sie erwarten, dass die Target-Schaltfläche eine neue Textschaltfläche hat Jetzt sollte unser Test bei dieser Behauptung fehlschlagen. Also hier wartet es 5 Sekunden, weil sie es 5 Sekunden lang versucht haben. Und es ist gescheitert. Und der letzte Schritt wurde nicht ausgeführt, weil diese Behauptung hier fehlgeschlagen ist. Falls Sie diesen Schritt jedoch ausführen möchten, unabhängig davon, ob unsere Assertion fehlgeschlagen ist oder nicht, können wir weiche Assertionen verwenden Also nach Expect einfach Soft hinzufügen. Und wenn diese Behauptung fehlschlägt, werden unsere nächsten Aktionen ausgeführt Also lass es uns ausprobieren. Hier warten wir also 5 Sekunden, bis die Schaltfläche neuen Text hat, und es wird fehlschlagen. Aber danach führen wir die nächsten Aktionen durch. In unserem Fall führen wir einen Klick aus, weil wir Soft-Assertions verwendet haben Lassen Sie uns zusammenfassen, was wir in dieser Lektion besprochen haben. Also haben wir uns mit dieser Behauptung befasst , von der Dramatiker häufig Gebrauch machen , ohne Dramatiker häufig Gebrauch machen , Sie können sich diese Dokumentation zum Dramatiker ansehen. Außerdem haben wir besprochen, wie die Bestätigung erneut versucht wird und wie sie funktionieren und welche Art von Timeout In der nächsten Lektion werden wir uns mit dem Timeout befassen. Und am Ende haben wir besprochen, wie Sie Soft Assertion verwenden können wenn Sie Ihre Testausführung nicht beenden möchten, wenn eine Assertion Sehen Sie sich das in der nächsten Lektion an. 12. Automatisches Warten und Timeouts Bearbeiten: Hallo. In dieser Lektion werden wir uns mit dem automatischen Warten auf Aktionen und Assertions befassen. Außerdem werden wir uns mit Timeouts befassen Lassen Sie uns verstehen, was ein automatisches Warten in Playwright wartet also automatisch dein Vb-Element an den Doom angehängt wird, damit es sichtbar , aktiviert und stabil Hier haben wir also eine Tabelle mit allen Aktionen des Dramatikers und darauf, worauf Im Falle eines Klicks warten wir also darauf, dass das Element sichtbar und stabil ist, Ereignisse empfängt, aktiviert ist, und wir warten nur nicht darauf, dass das Element editierbar ist Außerdem haben wir hier die gesamte Liste. Für die Presse haben wir keine automatische Verfügbarkeit. Und Behauptungen, sie warten auch auf so etwas Beginnen wir also damit, zu verstehen, wie ein Element darauf wartet, sichtbar zu werden Hier haben wir also eine Website, und hier können wir den Mittelwert und die maximale Zeit für den Abschluss einer Aktion festlegen die maximale Zeit für den Abschluss einer Aktion Lassen Sie uns also fünf und fünf setzen. Und wenn wir auf diesen Auslöser klicken, dauert es 5 Sekunden bis die Aktion angezeigt wird. Also klicken wir auf Auslöser. Ich warte 5 Sekunden, und nach 5 Sekunden Schaltfläche Aktion A, sollte die Schaltfläche Aktion A, klicken Sie auf mich erscheinen. Lassen Sie uns jetzt versuchen , das zu automatisieren. Wir wollen die ersten 5 Sekunden einstellen. Danach wollen wir klicken und mit unserer Aktion warten , bis dieser Button sichtbar ist. Gehen wir also zum Visual Studio-Code. Ich habe bereits einen Out-Away-Test erstellt , also lassen Sie mich diese URL kopieren. Das ist also unsere URL. Lassen Sie uns nun ein paar CSS-Selektoren erstellen und untersuchen. Fangen wir also mit diesem Mittel an und hier ist es eine Eingabe. Wir können es per Platzhalter bekommen. Wir haben einen Platzhalter, der Gewicht bedeutet. Also lasst uns kopieren und lasst uns kreieren. Also const bedeutet Eingabe, gleiche Seite abrufen per Platzhalter Wir haben die spezielle Methode eingebaut, und hier ist der Platzhalter. Okay. Jetzt wollen wir Durst. Wir wollen den Wert löschen , der standardmäßig zwei ist. Wir wollen ihn löschen und fünf eingeben. Lassen Sie uns also diesen Abschnitt durchführen. Nehmen wir an, Gewicht bedeutet so viel Input. Das ist eine spezielle Methode , die wir klären werden. Und lassen Sie uns auch warten, bis der Mittelwert gefüllt ist, und füllen wir ihn mit fünf. So verwenden wir also unseren Web-CSS-Selektor. Wir haben eine Konstante erstellt und damit begonnen , und danach verwenden wir sie Versuchen wir nun, diese Schaltfläche auszulösen, klicken Sie auf diese Schaltfläche. Also lasst uns den CSS-Selektor finden. Und hier haben wir eine Schaltfläche mit dem Namen Trigger. Versuchen wir, es per Rolle zu bekommen. Ein Gewicht, eine Seite, eine einzelne Rolle und die Reihe sind also nicht verwundbar. Ein Knopf. Und der Name lautete, es war Trigger. Also Trigger. Und lass uns Click benutzen. Lassen Sie mich das anhand des NP-Dramatikers T Y erklären. Hier haben wir also unseren Läufer aus der Wartezeit, lassen Sie uns laufen und beobachten, was passieren wird Also lass uns sehen, was hier ist. Also löse das Ergebnis auf sechs Elemente aus. Wir haben viele Trigger-Buttons, aber hier müssen wir auf den ersten klicken. Dafür können wir also die spezielle Methode verwenden. Verwenden wir nach Index. Und der Index ist Null, nullbasiert. Also wird Null die erste sein. Wir müssen auf das erste Element klicken. Okay. Also lass uns versuchen zu rennen. Also hier unser Test bestanden, weil wir auf dieses Trigger-Element geklickt haben auf dieses Trigger-Element geklickt Nach dem Klicken sollten wir hier oben auf diesen Button warten. Holen wir uns also den CSS-Selektor für diese Schaltfläche. Okay, wir können es uns auch schnappen. Es ist ein Button mit dem Namen, klick mich. Okay. Gehen wir also zum Visual Studio-Code. Und schauen wir uns die Await-Seite an. Holen Sie sich die Rolle. Die Rolle ist Button und der Name, also sollte es so sein. Der Name ist Click Me. Lassen Sie uns also einen Klick verwenden. Lassen Sie uns nun unseren Test durchführen und beobachten, was passieren wird. Jetzt stellen wir fest, dass Click M wartet. Ich habe in Wader fast 5 Sekunden gewartet , bis ich auf diese Schaltfläche geklickt Also wurde nach 5 Sekunden auf diese Schaltfläche geklickt und der Test ist bestanden Aber nehmen wir an, wir können so etwas wie hier haben, wir können zehn haben und auch, sagen wir, maximal zehn, wenn wir klicken, sollten wir länger als 5 Sekunden warten, aber das Standard-Timeout für unsere Aktion ist 5 Unser Test schlägt also fehl, wenn wir länger als 5 Sekunden warten Aber der Dramatiker gibt uns für jede Aktion eine Auszeit Hier können wir also das Timeout als Parameter für unsere Aktion festlegen das Timeout als Parameter für Lassen Sie mich also versuchen, das Timeout auf 3 Sekunden einzustellen. Es ist in Millisekunden hier. Und jetzt versuchen wir zu rennen und zu beobachten, was passieren wird. Also rennen wir und hier servieren wir es. Es wartet, es wartet, und nach 3 Sekunden schlägt es fehl, weil es bis zu 5 Sekunden dauert, bis unsere Schaltfläche angezeigt wird. Wir können also viele Werte wie zehn bis zehn Sekunden konfigurieren. Also lassen Sie uns laufen und unser Test sollte bestanden sein, weil unsere Schaltfläche 5 Sekunden dauert, aber Click Me wartet 10 Sekunden Lassen Sie uns nun beobachten, wie es funktioniert, aktiviert zu werden. Hier haben wir eine deaktivierte Schaltfläche. Wir können nicht wirklich darauf klicken. Also lass uns sehen. Also hier ist unser Button deaktiviert. Aber nachdem Sie auf diese Auslösetaste geklickt haben, wartet sie 3 Sekunden und danach wird unser Buttle aktiviert Nehmen wir an, wir möchten auf diese Schaltfläche klicken. Jetzt haben wir bereits diese Auslösetaste. Sobald Sie den dritten freigegeben haben, was bedeutet, dass er pro Intex 2 indexiert wird , weil er auf Null basiert, Also klicken wir darauf. Lassen Sie uns nun den CSS-Selektor dafür aktivieren. Es ist eine deaktivierte Schaltfläche. Okay. Also lass uns sehen. Deaktivierte Taste. Es ist auch ein Knopf. Per Rolle. Okay, lass uns versuchen , darauf zu klicken. Also haben wir eine Gewichtsseite, G B Roll. Lassen Sie uns auch sagen, dass es ein Button mit dem Namen ist. Also nur eine Schaltfläche und lassen Sie uns die Klick-Aktion ausführen. Lassen Sie uns also den Test durchführen und beobachten. Hier beobachten wir also , dass wir warten, und nach 5 Sekunden wurde unsere Schaltfläche aktiviert und wir haben den Klick ausgeführt. Versuchen wir nun, die Zeit hier auf 2 Sekunden einzustellen und den Fehler zu beobachten. Also lass uns speichern. Und lass uns rennen. Und jetzt müssen wir bei dem Fehler sein. Ja, jetzt haben wir also die Auszeit für den zweiten großen Samen. Und hier haben wir den Fehler , weil wir darauf gewartet haben, dass das Element sichtbar, aktiviert und stabil ist, aber das Element ist nicht aktiviert Playwright bietet also sehr aussagekräftige Fehlerprotokolle , anhand derer Sie nachvollziehen können, wo das Problem liegt, und es einfacher lösen können Playwright bietet ein leistungsstarkes Wartesystem für unsere Netzwerkanfrage Schauen wir uns also an, wie es passiert. Wenn Sie also hier die Registerkarte Netzwerk öffnen und wir Aktionen ausführen, kann unsere Anfrage viel Zeit in Anspruch nehmen. Hier haben wir also eine Anfrage im Status „Ausgeben“, und das kann bis zu 15 Sekunden dauern. Hier beobachten wir also, wie viel Geld ausgegeben wird, und warten wir, bis die Anfrage abgeschlossen ist. Nach 15 Sekunden ist unsere Anfrage abgeschlossen und diese mit Jacques get request geladenen Daten wurden angezeigt. Nehmen wir also an, wir möchten einen Auslöser auslösen, um auf diese Schaltfläche zu klicken und diesen Text zu validieren. Aber manchmal kann diese Anfrage 15 Sekunden, 25 Sekunden oder 5 Sekunden dauern , und wie können wir warten bis diese Anfrage für all diese Anfragen abgeschlossen ist. Playwright bietet eine spezielle Methode zur Gewichtung des Ladezustands Und mit Hilfe dieser Methode können wir ein solches Warten durchführen Gehen wir also zum Visual Studio-Code und erstellen wir einen neuen Test Lassen Sie mich also ein Netzwerk-Autoawt erstellen. Lassen Sie uns hier alles löschen und die URL kopieren, der wir navigieren möchten Also lasst uns hier die URL einfügen. Und jetzt holen wir uns den Web-Element-Selektor für diese Schaltfläche Also hier haben wir einen Button. Schnappen wir es uns, zahlen wir. Button, die Rolle und der Name. Warte also ab, Seite für Zeile. Und die Zeile, wir haben einen Button mit dem Namen, und das ist der Name. Und jetzt wollen wir auf diesen Button klicken. Und nach dem Klicken möchten wir überprüfen , ob unser Element per Text angezeigt wurde. Nehmen wir also auch den CSS-Selektor für diesen Text. Also hier ist es ein Absatz mit Text, lassen Sie uns ihn für Text erfassen. Und lassen Sie uns ihn erstellen. Speichern wir es in einer Konstante. Const, Seite d, Text und lass uns Seite Dod G B haben wir eine spezielle Methode get by text, bei der wir den Text angeben sollten Wir haben also unseren Text und hier führen wir die Aktion Versuchen wir nun, ein Await auszuführen. Eine Behauptung, keine Behauptung, bei der wir überprüfen werden, ob dieses Element anhand von Text angezeigt wird Wir können also Text zum Laden der Seite verwenden. Und die spezielle Methode, um sichtbar zu sein. Okay. Und standardmäßig dauert es etwa 5 Sekunden, sichtbar zu sein. Versuchen wir nun zu rennen und zu beobachten, was passieren wird. Wir navigieren also, wir klicken und nach dem Klicken warten wir darauf, dass das Element sichtbar ist Und hier haben wir innerhalb von 500 Millisekunden einen Fehler, wenn wir darauf warten, dass der Expect-Locator der Expect-Locator Wir können also einfach das Timeout erhöhen, damit es sichtbar ist. Wir können etwa 25 bis 25 Sekunden angeben. Aber einfacher ist es, zu warten, bis unsere Anfrage — unsere Netzwerkanfrage — abgeschlossen ist. Dafür können wir also eine spezielle Methode verwenden, die in Dramatiker eingebaut Es ist eine Warteseite und es heißt Warte auf Ladestatus. Hier sollten wir sicherstellen, dass wir Dom komprimiert geladen, geladen und vernetzt haben , kiddo Und hier haben wir eine Erklärung für alles, was bedeutet. Für Network Kiddle wollen wir also, dass all diese Anfragen für mindestens eine halbe Sekunde, also 500 Millisekunden, abgeschlossen mindestens eine halbe Sekunde, also 500 Millisekunden, Wählen wir Network Kiddo. Lass uns speichern und schauen, wie es funktionieren wird. Wir navigieren also, wir haben geklickt und jetzt warten wir, bis L State wartet darauf, dass unsere Anfrage abgeschlossen ist dass unsere Anfrage abgeschlossen Wir sehen es also nicht, aber es wartet auf das Netzwerk Nach 15 Sekunden waren alle Anfragen abgeschlossen und wir haben die Aktion ausgeführt , dass dieser Text sichtbar ist. Lassen Sie uns nun sehen, wie wir das Timeout für unseren Test festlegen können. Standardmäßig hat ein Test-Timeout also 30 Sekunden. Aber du kannst damit arbeiten. Sie können es auf globaler Ebene oder bei einem bestimmten Test auf lokaler Ebene erhöhen . Schauen wir uns also an, wie wir das Timeout für unseren Test ändern können. Lassen Sie uns zunächst beobachten , dass unser Test etwa mehr als 50 Sekunden dauert. Aber wir können mit unserer Auszeit arbeiten. Wir können also den Test verwenden und die spezielle Methode Timeout festlegen. Und lassen Sie uns das Timeout auf 5 Sekunden einstellen. Das bedeutet also, dass unser Test in 5 Sekunden bestanden oder fehlschlagen sollte Wenn nein, wird er als fehlgeschlagen markiert. Schauen wir uns also an, wie es funktionieren wird. Lassen Sie uns unseren Test durchführen. Und hier haben wir die Zeitleiste und nach 5 Sekunden haben wir unser Test-Timeout von 5 Sekunden überschritten Auf diese Weise können wir den Timeout erhöhen oder verringern. Standardmäßig sind es 30 Sekunden. Wenn Sie das Timeout für alle Tests festlegen möchten, können Sie das Timeout auch in der Konfigurationsdatei ändern Hier haben wir also die Playwriter-Konfiguration, und innerhalb der definierten Konfiguration können Sie einen neuen Parameter wie Timeout hinzufügen Und sagen wir, lassen Sie uns hier das Timeout auf 3 Sekunden einstellen. Okay, und lass uns alles löschen. Lass es uns kommentieren. Jetzt haben alle unsere Tests das Timeout, das wir in der Konfliktdatei eingerichtet Es sollte 3 Sekunden dauern. Ja, das Timeout wird also um drei Sekunden überschritten. In dieser Konfigurationsdatei können Sie das Timeout für den Roll-Up-Test ändern Standardmäßig 30, lassen Sie uns wie 62nd prüfen, aber im Moment ist 30 okay Wenn Sie das Timeout für unsere Aktionen ändern möchten, können Sie das ändern, sagen wir, für unser Klicken hier ändern wir das Timeout-Timeout für 5 Sekunden oder Sie können das Timeout für alle Aktionen ändern. Auch in der Konfliktdatei in diesem Verwendungsblock. Dafür können Sie das Aktions-Timeout verwenden und Ihr Timeout festlegen, etwa sagen wir zehn, Sie möchten 10 Sekunden Sie können es hier in diesem Nutzungsblock einstellen. Und das Letzte ist das explizite Gewicht. Es ist nicht wirklich empfehlenswert, aber es kann dir beim Abhören helfen. Löschen wir also all diese Timeouts, die wir festgelegt haben. Und lassen Sie uns sehen, wie dieses explizite Warten funktioniert. Lass uns das auch löschen. Und nach der Navigation legen wir ein Timeout von 5 Sekunden fest. Wir können auf die Seite warten, warten, auf das Timeout warten. Okay, also legen wir das Timeout auf 3 Sekunden fest. Lass uns speichern und sehen, wie es funktionieren wird. Jetzt warten wir hier nur 3 Sekunden. Es wird nicht wirklich empfohlen, es in echten Word-Test-Frameworks zu verwenden , aber es kann wirklich beim Programmieren helfen Das war es also für die heutige Lektion. Wir haben darüber gesprochen, wie Auto Avting für unsere Methoden funktioniert, und wir haben auch besprochen, wie wir das Timeout auf Testebene und für unsere Aktionen festlegen können das Timeout auf Testebene und für unsere Wir sehen uns in den nächsten Lektionen. 13. Interaktion mit Eingabefeldern: Hallo. In dieser Lektion lernen wir, wie man mit Eingabefeldern interagiert. Lassen Sie uns also mit einer Aktion beginnen , die mit Eingaben ausgeführt werden kann. Das erste und wichtigste ist also das Tippen. Wir können tippen. Danach sollten wir in der Lage sein, das Eingabefeld zu löschen, und wir werden auch einige Behauptungen besprechen, wie wir feststellen können, welcher Wert in diesem Eingabefeld steht Gehen wir also zum Visual Studio-Code. Hier werde ich eine weitere Spezifikation für unsere Datei erstellen. Nennen wir es UI-Elemente Dot Spec Dots. Lassen Sie mich nur einen Test von hier kopieren. Ich werde nur die Eingaben bekommen. Lassen Sie uns also nur einen Test behalten und den Namen als Eingabefeld angeben. Okay. Für diese Lektion werden wir also Testautomatisierung und practiceblospot.com verwenden Es ist kostenlos und hier haben wir viele Webelemente, mit denen Sie das Schreiben Ihres Tests üben können Also lass uns kopieren. Kopieren wir den Link. Wir werden dorthin navigieren. Und danach suchen wir den CSS-Selektor für dieses Element Also lass mich mit der rechten Maustaste auf Inspec klicken und lass uns suchen. Also hier haben wir es, es ist eine Eingabe mit ID und Platzhalter Holen wir es uns per Platzhalter. Also lass es mich in Enter N Eingabe speichern. Wird der Seitenpunkt durch den Platzhalter und unseren Platzhalter abgerufen. Lassen Sie uns versuchen, etwas in dieses Eingabefeld einzugeben. Dafür werden wir also das spezielle Methodenfeld verwenden . Wir haben es bereits in den vorherigen Lektionen verwendet. Beginnen wir also mit dem Namen eines Gewichtungselements. Eingabe des Elementnamens und als spezielle Methode fügen wir hier den Dramatiker Also lass mich sparen. Lass uns unseren UI-Runner öffnen. Schreiben wir dafür P Playwright Test, UI. Also habe ich zwei Monitore. Ich muss es herbringen. Okay, lassen Sie uns maximieren und unser Testeingabefeld ausführen. Okay, hier haben wir also beobachtet, dass unser Test bestanden hat, weil wir navigiert haben und für diese Aktion haben wir den Textdramatiker hier Versuchen wir nun, den Wert aus diesem Eingabefeld zu extrahieren und eine Aussage zu treffen Dafür können wir also die spezielle Methode verwenden, die uns beim Extrahieren hilft, beim Extrahieren hilft den Wert aus einem Feld zu extrahieren, bei dem es sich um einen Eingabewert handelt Lassen Sie uns versuchen, den Wert des Kostennamens zu extrahieren Wir speichern ihn in Kosten und dafür in der Namenseingabe und unserer Methode als Eingabe in den Wert Ja, diese Methode, also diese Methode gibt ein Versprechen zurück, was bedeutet, dass wir hier eine Gewichtung haben sollten. Ja. Jetzt haben wir den Wert aus unserer Eingabe für den Endernamen extrahiert und ihn in diesem Namenswert gespeichert. Jetzt können wir behaupten, dass unser erwarteter Wert unserem tatsächlichen Namenswert entspricht unserem tatsächlichen Namenswert und dass unser Text Dramatiker ist Lassen Sie uns jetzt speichern. Lassen Sie uns speichern und starten wir , um die Ergebnisse zu sehen. Okay, unser Test war erfolgreich, wir haben den Wert extrahiert und festgestellt dass der Namenswert dem Wert Dramatiker entspricht Es gibt eine andere Methode wir das direkt bestätigen können. Schauen wir uns also an, wie das aussehen kann. Dafür werden wir also auch expect verwenden, also erwarten Sie, dass die Eingabe des eingegebenen Namens und unsere Assertion einen Wert haben müssen Und hier werden wir unseren Weltwert weitergeben. Wir erwarten also eine höhere Spielrate. Also lass uns sparen. Lass uns rennen. Unsere Behauptung ist also bestanden, und unser Test ist auch bestanden Die nächste Methode ist eine klare Methode. Nachdem wir etwas übergeben haben, können wir diese Eingabe auch löschen. Dafür haben wir also die spezielle Methode klar. Verwenden wir also await, geben den Namen input und die spezielle Methode clear ein. uns also nach dem Lassen Sie uns also nach dem Löschen annehmen, dass unsere Eingabe leer ist. Dafür können wir einfach angeben, dass value eine leere Zeichenfolge hat, was bedeutet, dass sie leer ist. Es war klar. Lassen Sie uns nun die Ergebnisse ausführen und beobachten. Also nach dem Clearing, bevor es Dramatiker war, danach ist leer und unsere Behauptung Lassen Sie uns also eine kurze Zusammenfassung dessen machen, was wir heute besprechen werden. Wir haben die Methode besprochen , die mit einer Eingabe ausgeführt werden kann. Die erste ist mit Hilfe gefüllt, wir können etwas in eine Eingabe eingeben. Danach haben wir über den Eingabewert gesprochen , der uns hilft, den Wert aus einer Eingabe zu extrahieren. Die nächste war die direkte Behauptung, einen Wert zu haben. Und die letzte Methode war klar, was uns hilft, ein Eingabefeld zu löschen Wir sehen uns also in der nächsten Lektion. 14. Interaktion mit Checkboxes und Radiobuttons: Hallo. In dieser Lektion lernen wir, wie man mit Optionsfeldern und Kontrollkästchen interagiert . Wir verwenden also den gleichen Pretest zur Testautomatisierung auf blogspol.com, und wir werden mit diesem Mann oder dieser Frau interagieren, und wir werden auch mit den Wochentagen interagieren Gehen wir jetzt zu unserem Visual Studio-Code und erstellen wir weitere Test-Kicks Lassen Sie mich also einen weiteren Test kopieren. Also hier, lass es uns benennen. Optionsfelder und Kontrollkästchen. Okay, hier bleiben wir also nur bei diesem ersten Teil mit der Navigation Versuchen wir nun, den CSS-Selektor für den Mail-Radio-Pod zu finden den CSS-Selektor für den Mail-Radio-Pod Also lass mich hier klicken, und hier können wir es per ID bekommen Wir haben Ausweismail, also holen wir sie uns per AD. Ich werde das Relevante in einer Kostenrechnung speichern und nennen wir es E-Mail-Option Lassen Sie uns den Locator und die ID für die Log-Seite erstellen. Also Hash und ID Mayo. Okay. Um nun diese Option auszuwählen, haben wir die spezielle Methode, überprüfen. Also lass es uns benutzen. Option „Warten Sie auf Nein“. Okay, jetzt sagen wir es und öffnen den UI-Runner, um zu sehen, dass es das auch gibt. Ich werde den UI-Runner öffnen. Also Optionsfelder und Chatbox, lasst uns laufen und lasst uns beobachten. Also navigieren wir und wir klicken. Also lass uns nachher warten. Und wir stellen fest, dass dieses E-Mail-Optionsfeld aktiviert ist. Lassen Sie uns nun sehen, wie wir feststellen können, wie wir überprüfen können, ob diese Option aktiviert wurde. Dafür haben wir also eine spezielle Behauptung. Also ist es einfach Es wird erwartet, dass unsere E-Mail-Option, Webelement und die Assertion überprüft werden Also lasst uns speichern und sehen, wie wir Rock bauen. In diesem Beitrag haben wir überprüft, ob die ausgewählten E-Mails überprüft wurden, und danach haben wir bestätigt, dass unsere Option ausgewählt wurde. Versuchen wir als Nächstes, mit diesen Checkboxen zu arbeiten. Hier haben wir also viele Checkboxen, und versuchen wir, von hier aus die Option Montag auszuwählen Lassen Sie mich also zuerst zum Visual Studio-Code gehen und alles löschen , was wir nicht benötigen Wir behalten nur die G Two. Und jetzt suchen wir einen Selektor für diese Montagsoption. Also hier haben wir ein Label und Montag. Lassen Sie uns versuchen, es nach Etikett zu ordnen. Dafür haben wir eine spezielle Methode, und sagen wir, es kostet Montag, Checkbox. Und das ist BageG von Label. Es ist eine eingebaute Option für Dramatiker. Und unser Label war Montag. Okay, jetzt haben wir dieses Webelement. Nun, um es zu überprüfen, es ist ähnlich wie bei Optionsfeldern Warten Sie einen Montag und überprüfen Sie die Methode. Nun, die Behauptung ist auch ziemlich ähnlich. Wir verwenden also die Checkbox „Warten, erwarten Sie Montag“ und die Bestätigung werden angekreuzt Okay, also lass uns speichern. Lass es uns jetzt ausführen. Also hier navigieren wir, wir überprüfen. Wir können beobachten, dass wir hier den Montagsscheck haben und danach unsere Behauptung, die bestätigt wurde , weil der Montag überprüft wurde Ähnlich wie bei Check haben wir auch eine andere Methode, mit der wir unsere Checkbox ankreuzen können Also ist es einfach überprüfen. Und wenn das nicht markiert ist, überprüfen wir zuerst, ob dieses Kontrollkästchen aktiviert ist, und danach führen wir einfach den Downcheck Also hier haben wir eine Beschreibung. Und wenn unsere Checkbox nicht angekreuzt wäre, würde sie nichts ausführen. Jetzt sind wir deaktiviert, und lassen Sie uns zuerst ausführen Danach werden wir bestätigen, dass die Option deaktiviert war Also hier haben wir es, bevor es aktiviert wurde und danach ist Wenn Sie also überprüfen möchten, ob die Option deaktiviert war, können wir diese Behauptung negieren. Wir können es gebrauchen, nicht überprüft zu werden. Lassen Sie uns also laufen und beobachten , ob unser Test bestanden wird. Wie wir also nach dem Deaktivieren feststellen können, unser erwarteter Wert, nicht geprüft zu werden, erfolgreich bestanden Lassen Sie uns also eine kurze Zusammenfassung machen. Wir haben gelernt, wie wir Optionen aus Optionsfeldern und Kontrollkästchen auswählen können Optionen aus Optionsfeldern und Kontrollkästchen Außerdem haben wir besprochen, wie wir sicherstellen können , dass eine bestimmte Option aktiviert oder deaktiviert ist Wir sehen uns also in der nächsten Lektion. 15. Optionen auswählen: Dropdowns und Listen: Hallo, ich bin willkommen zurück. In dieser Lektion werden wir darüber sprechen, wie wir mit ausgewählten Dropdowntypen und mit einfachen Dropdowns interagieren können ausgewählten Dropdowntypen und mit einfachen Dropdowns In dieser Lektion verwenden wir This Land is.com, Selenium Playground und Carry Dropdown-Such-Demo Selenium Playground und Carry Zunächst möchten wir aus diesem ausgewählten Land auswählen, sagen wir, wir möchten Japan Lassen Sie mich einen Refresh machen und lassen Sie uns das Inspect öffnen. Und hier können wir beobachten, dass unser Dropdown ein Auswahlattribut hat, was bedeutet, dass wir für die ausgewählten Attribute die spezielle Methode verwenden können, die in der Playwriter-Auswahloption eingebaut ist Gehen wir nun zum Visual Studio-Code und lassen Sie mich einen Test kopieren, erstellen und ihm einen Namen geben Wählen Sie aus und klicken Sie auf Dropdownlisten. Fügen wir also die Navigation hinzu, mit der wir zu diesem Lamba-Test navigieren. Okay. Und jetzt suchen wir den Selektor für dieses Dropdown oder das Auswahl-Dropdown Wir haben also ein Land ausgewählt und wir haben ein ID-Land. Also schnappen wir es uns per AD. Sparen wir uns die Kosten, wählen Sie das Land aus. Und lassen Sie uns den Seitenpunkt-Locator und das Hash-Land verwenden. Okay. Hier in dieser Auswahl haben wir viele Optionen, und unser Webpon hat einen Wert und den Text selbst, Australien, Bangladesch, Dänemark, Hongkong und so weiter Nehmen wir an, wir wollen Japan auswählen, dieses. Dafür haben wir also eine spezielle Methode. Also benutzen wir es Await, wählen Sie Land, Punkt und wählen Sie die Option. Diese Methode, die wir aus dieser Dokumentation erhalten können, kann also die Option nach Bezeichnung oder nach ihrem Namen erhalten . In unserem Fall sind hier also der Wert und das Label identisch. Versuchen wir also, die Select-Option zu verwenden und geben wir Ja Path an. Lass uns speichern. Lass mich NB laufen lassen, Dramatiker SDY. Lassen Sie mich das minimieren, weil ich zwei Monitore habe und ich möchte hier den Läufer haben. Also hier haben wir den Läufer und irgendwas stimmt nicht, versuchen wir es noch einmal zu starten. Ja, jetzt ist alles in Ordnung, also versuchen wir zu rennen. Also navigieren wir und wir führen die Aktion aus. Schauen wir nach, wenn wir hier sind, Japan. Also haben wir die Option in Japan ausgewählt. Und die Behauptung ist der Behauptung , die wir bereits verwendet haben, ziemlich ähnlich. Versuchen wir, bereits verwendet eine Behauptung zu verwenden, um einen Wert zu Erwarte ein Land, wähle ein Land aus. Behauptung bedeutet, einen Wert haben zu müssen und unser Wert ist Japan Lassen Sie uns also noch einmal laufen und beobachten, ob unser Test erfolgreich Unser Test wurde also bestanden, weil wir Japan ausgewählt haben. Diese Auswahloption kann auch mehrere Optionen enthalten. Falls wir eine Art Drop-down-Menü haben, in dem wir zwei oder mehr Optionen auswählen können, können wir eine Reihe von Optionen bereitstellen. Und innerhalb dieses Arrays können wir Japan oder sagen wir die USA usw. angeben. Wir können mehrere Optionen anbieten. haben wir oft Wenn wir in echten Anwendungen ein Dropdown haben, kein Auswahlattribut Falls wir also ein Auswahlattribut haben, wie wir es hier hatten, ist es einfacher, weil wir die spezielle Methode „Optionen auswählen“ verwenden können die spezielle Methode „Optionen auswählen“ Aber lassen Sie uns versuchen, unsere Option auszuwählen , ohne die Auswahloptionen zu verwenden. Also behalten wir diese Navigation bei und das ist alles , was wir aus dem alten Test behalten wollen. Die erste Aktion, die wir ausführen möchten, besteht darin, darauf zu klicken , um all diese Optionen zu öffnen. Lassen Sie mich also aktualisieren und den Selektor nur für diese Dropdown-Eingabe finden nur für diese Dropdown-Eingabe Also hier haben wir eine Spanne mit einer Klasse, und was sonst? Also da drinnen ist es, also lasst uns versuchen , es bis zu dieser Klasse zu packen. Okay. Also lass mich die Kontrolle F kopieren und einen Punkt hinzufügen weil es eine Klasse ist und wir mehrere Klassen haben. Lassen Sie uns sie also so verketten dass wir jetzt eine Spanne haben, zwei Spannen Sie sind unterschiedlich. Wir können also die erste Methode verwenden. Okay? Also haben wir zwei und unser Drawdm ist der erste Okay, gehen wir zu einem Visual Studio namens und speichern unseren Selektor interfast als Länderauswahl und Seitengenerator oder geben wir unseren Klassenselektor an, und Also hier speichern wir unser Dropdown. Als Nächstes möchten wir den Selektor für all unsere Elemente finden . Also lasst uns versuchen zu finden In unserem Fall haben wir also eine Liste und unsere Liste hat eine ID, und es ist eine Liste mit vielen Optionen. Versuchen wir also, das anhand der ID zu finden. Also hier haben wir die ID. Wir haben nur eine Liste und jetzt brauchen wir Verbündete mit all diesen Optionen. Wir können also so etwas wie einen Verbündeten schreiben und wir haben 11 Elemente, was wir brauchen. Wir brauchen den Selektor für all diese. Speichern wir nun auch diesen Selektor in unserem visuellen Stereo-Code Lassen Sie uns das Land auswählen, sagen wir, Listenoptionen, weil wir hier alle Optionen und den Seitenpunkt-Locator haben, und lassen Sie uns unseren Locator hinzufügen Wir können unseren Locator so schreiben , wo die zweite Option ist Lassen Sie mich die zweite Option zeigen, wie wir das machen können. Wir können so etwas wie einen Seitenfinder verwenden, und danach können wir einen anderen Locator verketten und Das Ergebnis wird dasselbe sein, nur dass ich dieses bevorzuge, weil es etwas kürzer ist Also bleiben wir bei der ersten Option. Lassen Sie uns nun auf dieses Element klicken , weil wir das Dropdown öffnen möchten. Warten Sie also auf den Country Select Dot Clip. Okay. Also, nachdem wir darauf geklickt haben, haben wir alle diese Optionen angezeigt. Und in unserem Selektor mit all diesen Optionen möchten wir nur die gewünschten Optionen filtern, und wir können nach Text filtern Gehen wir also zum Visual Studio-Code und wir können so etwas machen Wartelistenoptionen, und wir können den speziellen Methodenfilter verwenden. Und darin können wir Text haben. Aus all diesen Optionen möchten wir also nur die Option Japan filtern. Und für diese Option möchten wir einen Klick ausführen. Versuchen wir also zu rennen und zu beobachten, was passieren wird. Das Problem ist also Japan, aber wir sollten Japan haben Wir haben also eine Auszeit im Jahr, weil ja, versuchen wir, Japan zu finden, nicht Japan Japan. Speichern wir und versuchen wir es noch einmal. Ja, wir navigieren also. Ja, ein einstündiger Test ist bestanden. Ja, lass uns sehen. Hier haben wir Japan. Wir haben die richtige Option ausgewählt, und die Behauptung wird dieselbe sein Lassen Sie uns also eine kurze Zusammenfassung durchführen. Wir haben zwei Arten von Selektoren. Der erste ist ein Selektor oder ein Drop-down-Menü mit einem Auswahlattribut, das mit Hilfe der speziellen Methode ausgewählt werden kann , einer eingebauten Auswahloption für Dramatiker, und das zweite, das Sie häufig in echten Projekten finden, in denen Sie keine Art von Auswahl haben, aber Sie müssen irgendwie den Selektor für all diese Optionen finden den Selektor für Danach führen Sie einfach einen Filter durch, markieren Ihren Namen und führen einen Klick aus. Das war es also für die heutige Lektion. Wir sehen uns in der nächsten. 16. Browser-Warnungen und Popups: Hallo. In dieser Lektion werden wir den Umgang mit Browserwarnungen in Playwright besprechen Umgang mit Browserwarnungen in Playwright unserem Browser gibt es also in der Regel drei Arten von Benachrichtigungen eine einfache Warnung, bei der Sie einfach auf Okay klicken können, Bestätigungsmeldung, bei der Sie den Vorgang abgebrochen haben , und eine Warnmeldung, bei der Sie etwas eingeben und dann auf Abbrechen oder Okay klicken können Standardmäßig klickt der Dramatiker also bei all diesen Benachrichtigungen auf Abbrechen Hier haben wir also die Dokumentation zum Dramatiker. Sie können jedoch einen Listener erstellen, um die Popups unterschiedlich zu handhaben Mal sehen, wie es funktionieren wird und warum der Dramatiker all diesen Popups einfach auf Abbrechen klickt Wenn Sie auf etwas klicken und ein Popup angezeigt wird, ist alles auf der Seite eingefroren und Sie können keine Aktion ausführen Deshalb klickt der Dramatiker, wenn er ein Pop-up beobachtet , auf Okay, das Wort ist standardmäßig deaktiviert Lassen Sie uns nun versuchen, zu automatisieren, wie wir mit dieser Art von Popups arbeiten können Also habe ich hier einen Testfall erstellt, in dem ich zu dieser Praxis zur Automatisierung von Browsertests navigiere, doblospot.com Versuchen wir also, diesen einfachen Alert-Webselektor zu nutzen. Schauen wir uns also an, dass wir eine Schaltfläche haben und wir können sie mit einem einfachen Alert benennen Lassen Sie mich das kopieren und lassen Sie uns einfach bleiben. Also lass uns einfach alert benutzen und es ist Seite DGG nach Rolle. Die Rolle ist die Schaltfläche, lassen Sie uns den Namen verwenden, also eine einfache Warnung Okay. Mit dieser Warnung können wir jetzt einen Klick ausführen. Also lass mich hier etwas Gewicht beilegen. Lassen Sie uns speichern und in Wort minimieren , um zu beobachten, wie Dramatiker mit dieser Art von Benachrichtigungen umgehen werden Lassen Sie mich also einmal rennen. Also hier wird es sehr schnell gehen. Wir beobachten es also sehr schnell und Dramatiker hat standardmäßig auf Okay geklickt Also lass mich noch einmal rennen. Normalerweise können Sie bei dieser Art von Benachrichtigungen also nichts tun, weil der Dramatiker standardmäßig klickt Okay. Aber wenn du gekündigt hast oder okay bist, kannst du mit beidem arbeiten. Versuchen wir also, diese Bestätigung für die Bestätigungswarnung zu automatisieren . Lassen Sie mich also schließen und lassen Sie uns den Selektor für diese Bestätigungswarnung aufrufen Es ist eine Schaltfläche, und wir können sie nach Namen suchen, Bestätigungswarnung Lassen Sie uns einfach die Namen ändern und auf diese Bestätigungswarnung klicken. Aber in meinem Fall möchte ich auf Okay klicken. Für diese Bestätigungswarnung, wenn ich auf Okay klicke, habe ich hier einen Text, dass Sie auf Okay drücken. Um das zu tun, sollten wir einen Listener erstellen, der auf alle Abschnitte wartet , die in unserem Browser erscheinen Ein solches Ereignis wird also in unserem Browser auftreten, der Dramatiker wird wissen, wie er damit umgehen muss Versuchen wir also, diese Art von Zuhörer zu erstellen. Also für diese Seite Punkt auf und hier sollten wir angeben, über welche Art von Veranstaltung Wir haben also diese Veranstaltung, bei der es sich um einen Dialog handelt. Und es ist synchron. Und für diesen Dialog wollen wir sagen, was wir tun wollen. also für unseren Dialog Dialog, Verwenden wir also für unseren Dialog Dialog, Punkt, und ich möchte das akzeptieren. Nun, nach einer sehr wichtigen Sache, sollten Sie diesen Listener vor der eigentlichen Aktion hinzufügen, denn wenn Sie diesen Listener nach dem Klicken platzieren, wird er funktionieren wollen Lassen Sie uns das überprüfen. Lassen Sie uns diesen Text bestätigen. Also hier haben wir eine ID-Demo. Okay, lassen Sie uns versuchen, diese Art von Selektor-Cs-Text zu erstellen , und lassen Sie uns Bige Dot Locator verwenden, und hier verwenden wir Has und hier verwenden wir Has Okay. Also nach dem Klicken möchte ich erwarten, dass unser Text und hier Text enthalten müssen. Wir erwarten also, dass hier unser Text auf Okay gedrückt wird. Also lass es uns gleich hier hinzufügen. Und da der Have-Text ein Versprechen zurückgibt, sollten wir etwas Gewicht hinzufügen. Lassen Sie mich einfach speichern, wir klicken und minimieren, und lassen Sie uns unseren Text ausführen. Also hier wird es sehr schnell erscheinen. Und danach haben wir hier auf Okay geklickt. Und lass es uns schließen, damit unser Test bestanden ist. Lassen Sie uns für den Fall dieses Missgeschick verwenden. Also hier klicken wir auf Abbrechen. Unser Test sollte fehlschlagen , weil wir einen anderen Textschreiber haben werden. Also lass uns rennen. Und hier müssen wir auf Abbrechen drücken. Der Test ist also fehlgeschlagen, weil er darauf gewartet hat, dass Sie Okay drücken, aber Sie haben auf Abbrechen geklickt. Versuchen wir also, mit der letzten Art von Assertion zu arbeiten. Wir haben eine sofortige Warnung. In dieser Sofortwarnung können Sie also auf eine Warnung klicken und danach eine Eingabe hinzufügen. Nehmen wir an, Sie möchten einen Dramatiker, nachdem Sie auf Okay geklickt Hier haben Sie Hallo, Dramatiker Wie geht's dir heute? Versuchen wir also, den Selektor für diese Eingabeaufforderung zu finden. Es handelt sich also auch um eine Namensaufforderungswarnung für eine Schaltfläche . Also hier, lassen Sie uns einfach umbenennen und den Namen in Prompt Alert ändern. Danach habe ich den Text, und ich möchte ihn akzeptieren, aber meinen Namen angeben. Also werde ich hier Dramatiker verwenden. Okay. Also, wenn wir Dramatiker benutzen, schauen wir mal, was passieren wird Ich werde Dramatiker hier angeben. Okay. Die Nachricht lautet also Hallo , Dramatiker Also lass uns das sehen. Die Nachricht erscheint also dort, wo wir die ID-Demo haben Ich werde die Nachricht einfach kopieren. Lass es uns hier einfügen. Versuchen wir nun zu akzeptieren, dass der Text Hallo Dramatiker sein wird Wie geht's dir heute? Also lass mich minimieren, lass uns den Code ausführen und mal sehen, was passieren wird. Also hier haben wir den Text Hallo Dramatiker. Wie geht es dir heute und unser Test hat bestanden? Lassen Sie uns eine kurze Zusammenfassung dessen machen was wir in dieser Lektion gelernt haben. Also haben wir über die Art von Dialogen, Browserwarnungen und wie man damit umgeht, gesprochen Browserwarnungen und wie man damit umgeht, Wir haben also grundsätzlich drei Typen: eine einfache Warnung, eine Bestätigungswarnung und eine sofortige Warnung Und jeder von ihnen kann mithilfe eines Listeners behandelt werden . Danach können wir Aktionen bereitstellen, die wir mit dieser Browserwarnung ausführen möchten mit dieser Browserwarnung ausführen Wir können sie akzeptieren, wo wir bei ihnen auf Abbrechen klicken können. Das war es also für die heutige Lektion. Wir sehen uns in der nächsten. 17. Drag and Drop-Aktionen implementierenDrag and Drop-Aktionen implementieren: Willkommen zurück. Und in dieser Lektion werden wir besprechen, wie man die Option „Ziehen und Ziehen“ ausführt. Dafür hat der Dramatiker eine spezielle Methode eingebaut. Gehen wir also zum Visual Studio-Code und erstellen wir einen neuen Test Also lass mich es benennen. Ein Ziehen und Unentschieden. Wir werden auch diese Website verwenden. Und dafür benötigen wir den Selektor für das Element, das wir ziehen möchten , und für das Element, in das wir zeichnen möchten Also lass mich Inspect benutzen und mal sehen, was wir hier haben. Also hier haben wir ein Element und mit ID kann es gezogen werden. Also lasst uns dieses Element erstellen. Speichern wir es im Cost Const Drag-Element. Und Page Dot Locator, und wir werden Has von AD verwenden Und außerdem lassen wir das Element dort stehen, wo wir unser Element ablegen wollen unser Element ablegen wollen Hier haben wir also einen Drop-Drop und wir haben auch eine Acht, die man absetzen kann. Okay, lassen Sie uns hier auch die Kosten für den CSS-Selektor erstellen. Also lösche das Element. Es heißt Page Locator, hat auch unseren Cator Um nun ein Element abzulegen, können wir unserem Element, das wir ziehen wollen, eine Gewichtung zuweisen und wir haben eine Methode, die spezielle Drag-Two-Methode Und hier sollten wir angeben , wo wir unser Element ablegen möchten. Also wollen wir hier vorbeischauen. Lassen Sie mich das minimieren und versuchen wir zu laufen und zu beobachten, was passieren wird. Also werde ich den Runner MVPLarites UIs UI öffnen. Und hier haben wir das Drag-and-Drop. Lass uns laufen lassen, lass mich maximieren damit unser Test bestanden hat und danach können wir sehen, dass der Text hier geändert wurde. Lassen Sie uns also versuchen, dafür eine Behauptung durchzuführen. Also nach dem Ziehen oder hier wird der Text gelöscht. Also lasst uns diesen Text kopieren. Gehen wir zum Visual Studio-Code. Lassen Sie mich das schließen. Und hier fügen wir eine Sitzung hinzu. Warten Sie, erwarten Sie, dass unser Drop-Element und unsere Assertion Text enthalten, und der Text wird gelöscht Okay. Lass mich minimieren. Lass uns noch einmal öffnen. Der UI-Runner. Und lass uns rennen und sehen, was passieren wird. So einfach ist es, ein Element in Playwright per Drag-and-Drop zu ziehen, indem Sie den Befehl „Ziehen zum Einbauen“ verwenden Wir sehen uns also in der nächsten Lektion. 18. Übung 1: Hallo und willkommen zurück. In dieser Lektion werden wir das Gelernte in die Praxis umsetzen. Ich führe Sie Schritt für Schritt durch das Szenario , das automatisiert werden muss Danach pausieren Sie das Video und versuchen, es mithilfe von Dramatiker selbst zu implementieren Und wenn Sie fertig sind, setzen Sie die Lektion fort, um zu sehen, wie ich sie implementiert habe , und vergleichen Sie Ihre Ergebnisse mit meinen. Lass uns anfangen. Für das Training verwenden wir diese Quell-Demo-Anwendung und beginnen mit der Anmeldung. Wir müssen uns also mit dem Standardbenutzer anmelden. Dies wird die erste Aktion sein, die Anmeldung. Das zweite, wir wollen überprüfen, ob das erste Element den Namen Source Lab Backpack hat. Also das erste Produkt. Als Nächstes möchte ich den Text unseres letzten Elements in einer Konstante speichern . In unserem Fall sollten wir diesen Text also in einer Konstante speichern . Danach möchte ich filtern, um die Filterung von Z auf A zu ändern die Filterung von Z auf A zu Danach möchte ich überprüfen, ob das erste Element, das letzte Element, jetzt das erste ist. Ich möchte also den Text, den wir im vorherigen Schritt extrahiert haben, konvertieren , um zu überprüfen, ob diese ersten Elemente jetzt den Text des letzten Elements enthalten , das zuvor war. Danach möchte ich dieses erste Element hinzufügen, wie das erste Element zur Karte. Und nach dem Hinzufügen zur Karte möchte ich überprüfen, ob hier auf dem eingeritzten Strich, den ich angezeigt habe , die Anzahl der Elemente in unserem Fall eins sein sollte. Das ist also der erste Schritt. Lassen Sie mich jetzt einfach zum Visual Studio-Code gehen. Also hier habe ich all diese Tests hinzugefügt. Lassen Sie uns das tun, wir müssen zuerst den Text für das erste Element einloggen, den Text aus diesem Element extrahieren, Z nach A filtern. Überprüfen Sie, ob der letzte Artikel jetzt der erste ist, fügen Sie das erste Element zur Karte hinzu und bestätigen Sie die Einkaufswagen-Seite. Jetzt ist also der Moment , in dem Sie die Lektion pausieren und versuchen können , sie selbst umzusetzen. Lassen Sie mich Ihnen nun zeigen, wie ich das umsetzen würde. Zu Beginn muss ich also den Test aus dem Dramatiker-Test importieren Lassen Sie uns also den Import-Test von verwenden, und hier haben wir den Playwriter-Test. Und danach erstellen wir unseren ersten Test. Also testen wir es, lassen Sie es uns üben. Es ist eine Synchronisation und hier als Parameter haben wir die Seitenfixture Und drinnen werden wir unseren Test machen. Also am Anfang mache ich die Seite, gehe, gehe zu. Also werden wir es besuchen. Lassen Sie mich die Demo-Quelle für die Abmeldung machen. Um danach zu navigieren, benötige ich die Locators Also lass mich laufen, den TX öffnen, richtig spielen, TestUy Also werde ich dir zeigen, wie du den Locator schneller auswählst. Also minimiere ich es, weil ich zwei Monitore habe. Lassen Sie mich also das Maximum herausholen. Also hier habe ich die erste Übung. Also lass mich laufen und hier haben wir nur die Navigation, aber ich möchte dir zeigen, wie man den Locator auswählt Sie können also hier auf diesen Pick Locator klicken und danach lassen Sie uns auf diesen Benutzernamen klicken Und hier müssen wir eine Test-ID kaufen. Lassen Sie mich Ihnen noch einmal zeigen, warum wir das getan haben. Also hier bei diesem Element haben wir einen Datentest durchgeführt. Und wir in unserem Dramatiker hier im Ordner in unserer Konfigurationsdatei haben dieses Test-ID-Attribut als Datentest eingerichtet Also hier ist es standardmäßig die Datentest-ID, aber wir haben es so geändert, dass es nur ein Datentest Also die Dramatiker geben uns die Locators. Also in unserem Fall können wir einfach so etwas wie Gewicht pro Gewicht pro Seitenpunkt verwenden wie Gewicht pro Gewicht pro , und wir können mit Test acht fertig werden Und hier können wir das Feld verwenden und den Standardbenutzer übergeben. Lassen Sie mich also den Standardbenutzer übergeben und lassen Sie uns die Ergebnisse überprüfen. Also werden wir weglaufen. Also haben wir, nachdem wir hier Standardbenutzer haben. Machen wir dasselbe für das Passwortfeld. Also hier klicken wir auf das Passwort, hier haben wir den ID-Selektor für das Passwort, lassen Sie uns kopieren und lassen Sie uns eine Gewichtungsseite verwenden , die auf dem basiert, was wir kopiert haben Und lassen Sie uns das Passwort eingeben, das ist geheime Soße Okay. Und lass uns auch den Selektor nehmen. Also lass uns rennen Also jetzt, also im Folgenden, geben wir das Passwort ein, aber lassen Sie uns den Selektor dafür also darauf und auf den Button klicken, müssen wir nach Test-ID und Login-Button suchen Also lass mich kopieren und lass uns das deaktivieren. Lassen Sie uns also Await Page Dot verwenden und wir werden den Klick ausführen. Also lasst uns hier den Login haben. Lass mich sparen. Lass uns laufen und schauen , was wir haben werden. Also hier, nach dem Anklicken, sind wir auf der Produktseite. Nun der nächste Schritt, schauen wir nach dem Login, wir sollten überprüfen, ob es sich bei dem ersten Artikel um SLS Left Backpack handelt Also lasst uns auch hier den Login durchführen, lasst uns klicken und lasst uns versuchen, das erste Element zu erwischen Hier stellen wir also fest, dass wir einen Namen für das Klasseninventar und die Daten haben , die wir nach Klassen suchen. Und füge eine.in unserer Klasse hinzu. Also haben wir diese Klasse für jeden Namen. Lassen Sie uns also den Locator genau hier erstellen. Also konstanter Produktname. Und hier ist eine Seite Punkt für Punkt und unser Locator. Jetzt müssen wir den Text des ersten Elements überprüfen. Lassen Sie uns also await expect product name verwenden, und wir werden die erste Methode verwenden, weil wir nur die erste überprüfen wollen und die Methode, um Text und unseren Text zu haben , holen wir uns den Text. Es ist also die Quelle. Also, es ist ein Rucksack. Dieser sollte es sein. Also lass uns okay kopieren. Lass uns speichern und lass uns das Ergebnis überprüfen. Also unser Test ist bestanden. Okay, die nächste Aktion besteht darin , den Text aus dem ersten Element zu extrahieren. Schauen wir uns die Kosten an. Text des letzten Elements. Hier können wir also so etwas wie anderen Produktnamen verwenden und last verwenden, weil wir den letzten wollen. Und in Word den Text nachverfolgen, wir können die Methode text Conte verwenden, die mit der Zeichenfolge ****** verspricht Also hier haben wir den Text für das letzte Element. Jetzt wollen wir nach Z bis A filtern Lassen Sie uns also versuchen, zu überprüfen, was wir hier haben. Lassen Sie mich diese Klasse löschen. Hier haben wir also einen Auswahltyp und darin haben wir all diese Optionen, was bedeutet, dass wir, wenn wir eine Auswahl haben, die spezielle Methodenauswahloption verwenden können. Nehmen wir also an, wir haben einen Datentest. Lassen Sie uns nach der Datentest-ID suchen. Lassen Sie mich also kopieren. Und lassen Sie uns das Dropdown-Dropdown für Const und Filter, Test-ID für Seite G, erstellen Test-ID für Seite G Und hier haben wir unsere Test-ID. Um nun auszuwählen, können wir die spezielle Methode aus diesem Auswahlfilter verwenden. Wählen Sie also die Option aus, und wir wollen diese von Zwa. Also werde ich kopieren Lass es uns hier einfügen. Okay. Also lass mich speichern und lass uns laufen, um zu beobachten, ob alles gefiltert wird. Hier können wir also beobachten, dass das letzte T-Shirt jetzt der erste Start ist. Okay. Also nach dem Filtern, nach dem Filtern, müssen wir überprüfen , ob das letzte Element jetzt das erste ist. Lassen Sie uns nun eine Behauptung hinzufügen, warten Sie, erwarten Sie. Also hier haben wir den Produktnamen, den ersten. Und wir wollen Text haben , und der Text sollte das letzte Element sein das wir in der dritten Diktion extrahiert haben Um also Text zu haben, letztes Element. Und wir brauchen das Vorzeichen, ob unser Reaktor Null oder Zeichenfolge ist. Okay, wir haben also die Behauptung. Und der letzte Schritt bestand nicht das erste Element zu kardieren und zu behaupten Abwerfen von Carbae die Anzahl der hinzugefügten Elemente hat Okay. Lassen Sie uns jetzt versuchen, den Datentest für die Add-to-Karte zu starten. Hier ist es eine Schaltfläche und wir können sie per Text hinzufügen. Okay. Versuchen wir also, eine Gewichtsseite hinzuzufügen, die wir per Rolle erhalten, und die Rolle ist ein Button mit dem Namen Zur Karte hinzufügen. Und wir wollen den ersten. Also der erste und lassen Sie uns die Klick-Aktion ausführen. Also lass uns speichern. Lass uns rennen und uns die Ergebnisse ansehen. Nachdem wir hier sind, haben wir den ersten hinzugefügt. Jetzt ist der letzte Schritt Asset-Einkaufswagen-Seite hat die Anzahl der Elemente. Okay, was das angeht, lass uns sehen. Hier haben wir einen Spin mit einer Klasse und Daten, also schauen wir uns das für jede Klasse an Lass uns kopieren und den Punkt überprüfen. Hier ist einer von einem. Das ist es, was wir brauchen. Und lassen Sie uns die letzte Behauptung durchführen Warte, erwarte den Page Dot Locator. Unser Locator ist klassengebunden und muss Text und eins haben, und muss weil wir nur ein Element hinzugefügt Okay, also lass uns das letzte Mal laufen und sehen, ob unser Test bestanden wird Unser Test wurde also bestanden und wir haben ein Element hinzugefügt. Lassen Sie uns nun eine kurze Zusammenfassung machen. Also hier haben wir den Login durchgeführt. Danach haben wir den Locator für den Namen des Produkts erstellt den Locator für den Namen des Produkts Wir behaupten, dass wir die erste Elementquelle Lab Bec Tech haben , die den Text mit Hilfe von Textinhalten aus dem letzten Element extrahiert mit Hilfe von Textinhalten aus dem letzten Element Danach haben wir den Locator für das Dropdown-Select-Dropdown erstellt den Locator für das Dropdown-Select-Dropdown Wir haben die Filteroption Z bis A ausgewählt. Wir haben festgestellt, dass das erste Element nach dem Filtern das letzte Element wurde nach dem Filtern das letzte Element und wir haben auf die Oddo-Karte geklickt und danach bestätigt, dass die Kartenseite eins Jetzt können Sie mein Ergebnis, meine Implementierung, mit Ihrer Implementierung vergleichen meine Hoffe es hat dir gefallen. Wir sehen uns in der nächsten Lektion. 19. Übung 2: Hallo und willkommen zur zweiten Lektion unserer Praxis. Also werde ich dir Schritt für Schritt zeigen, was wir automatisieren müssen. Danach werden Sie das Video einstellen, die Lektion verfassen und versuchen, es selbst umzusetzen. Und nachdem Sie es implementiert haben, setzen Sie die Lektion fort und vergleichen Sie unseren Implementierungsansatz. Also müssen wir uns zuerst mit dem Standardbenutzer und dem geheimen Sci anmelden Danach mache ich den Login. Wir ermitteln den Namen und extrahieren den Namen in die Kosten des ersten Elements. Wir fügen der Karte das erste Element hinzu, nur dieses. Danach gehen wir zu unserer Karte. Also lass mich diesen entfernen. Wir gehen zu unserer Karte und nachdem wir zu der Karte navigiert haben, sollten wir bestätigen, dass dieser Artikel zu unserer Karte hinzugefügt wurde Das ist also unser einfaches Szenario. Lassen Sie mich nun all diese Schritte visuell zur CD hinzufügen. Hier haben wir die Schritte , die wir automatisieren wollen. Jetzt kannst du die Lektion pausieren und versuchen, sie von selbst umzusetzen. Lasst uns mit der Implementierung beginnen. Lassen Sie uns einen Test erstellen und ihm einen Namen geben, Übung zwei. Und hier haben wir einen Sync , der das Seitenlayout und unsere Implementierung empfängt und unsere Implementierung Also am Anfang müssen wir auch gehen und wir verwenden auch die Sauce. Lass mich das rausmachen. Lass uns kopieren. Also navigieren wir Danach haben wir den Login. Also werde ich das Login aus der ersten Übung kopieren. Also im Grunde haben wir hier die Eingabe für den Benutzernamen, Passwort und das Klicken auf den Login-Button. Und danach wollen wir nach dem Login extrahieren. Wir wollen den Text aus diesem ersten Element extrahieren. Schauen wir uns also an , was wir hier haben. Hier können wir also einen Datentest für jede Klasse zusammenstellen. Also lasst es uns nach Klassen suchen. Lass uns sehen, ob es eins ist , wir haben sechs, wir brauchen schon den ersten. Lass es mich kopieren. Und lassen Sie uns einen Dodd-Locator für Textseiten erstellen , Locator handelt, der eine Klasse ist Und hier wollen wir uns den ersten holen, und um den Text zu extrahieren, mischen wir den Textinhalt mischen wir Und diese Methode extrahiert das T aus unserem Element. Beim nächsten wollen wir also dieses Element zur Karte hinzufügen. Also lasst uns schnappen. Mal sehen, was wir für diesen Button haben. Wir können es uns schnappen, indem wir es zur Karte hinzufügen Ähm, warten wir auf Seite G von Rf. Wir haben einen Knopf. Button mit dem Namen auf der Karte, wir brauchen den ersten. Wir müssen auf den ersten klicken. Nach dem Hinzufügen zur Karte sollten wir zu dieser Karte navigieren. Schnappen wir uns den Selektor. Hier haben wir einen Datentisch und wir haben auch eine Klasse. Schauen wir uns das auch nach Klassen an. Lassen Sie uns kopieren und warten wir auf den Page Dot Locator und lassen Sie uns einen Klick ausführen Lassen Sie mich also den Cypress Runner von NP, Playwright Test, UI minimieren und öffnen den Cypress Runner von NP, Playwright Test, UI Okay, lassen Sie uns den zweiten ausführen. Übung zwei. Also hier haben wir ein Hier. Warte bis zum Laden. Schauen wir uns also an, wo der Fehler liegt. Hier sollten wir also eine Wartezeit hinzufügen , weil Go to ein Versprechen zurückgibt. Ja, lass uns ein Gewicht hinzufügen und lass uns noch einmal laufen. Also der Test läuft und wir sind im Einkaufswagen gelandet. Lassen Sie mich hier dasselbe tun und auf den Einkaufswagen klicken. Und lassen Sie uns sehen, dass wir das anhand von Text bestätigen können, weil wir extrahiert haben. Hier haben den Text extrahiert und wir können das Element für Text erfassen. Ich glaube also an eine Behauptung, ein Warten, eine Erwartung und ein Alter, das sich aus dem Text ergibt Und ich werde diesen extrahierten Test zur Verfügung stellen. Also kommen wir auch per Text. Und nehmen wir an, wir wollen sichtbar sein. Hier haben wir also das Jahr, weil Textinhalt ein Versprechen einlöst, und hier müssen wir etwas Gewicht hinzufügen. Jetzt ist also alles klar. Lass uns speichern und lass uns zu unserem Runner gehen und nachschauen. Also lass mich rennen. Ja, also unser Test ist bestanden, wir überprüfen, ob dieser Text sichtbar ist. Also lass uns eine Zusammenfassung machen. Also haben wir den Login-Teil gemacht. Nach der Navigation haben wir dann den Text mit Hilfe von Textinhalten extrahiert den Text mit Hilfe von Textinhalten haben wir auf die erste Schaltfläche „ Zur Karte hinzufügen“ geklickt und danach auf den Link zum Einkaufswagen geklickt Und am Ende haben wir behauptet, dass unser Element zur Karte hinzugefügt wurde Ich hoffe, Ihnen hat diese Lektion gefallen. Wir sehen uns in der nächsten. 20. Refaktoring und Verbesserungen: Hallo und willkommen zurück. In dieser Lektion möchte ich unsere beiden Praxistests ein wenig umgestalten unsere beiden Praxistests Als Erstes möchte ich also die Aktionen heraussuchen, die wir gemeinsam haben Unsere erste Aktion ist der Anmeldeteil und der Navigationsteil. Ich möchte es vor jedem Hook extrahieren. Um das zu tun, sollten wir also vor jedem Hook eine erstellen. Lassen Sie uns den Test verwenden und wir haben vor jedem vor jedem. Und es ist auch eine Senke, die eine Seitenbefestigung erhalten wird Und darin haben wir den Körper unseres Hakens. Also hier möchte ich hinzufügen, einfach gehen zu und den Login-Teil. Also lass mich das kopieren und lass es uns hier posten. Und jetzt können wir dieses Login aus unserem Test löschen. Lass mich beide löschen Okay. Jetzt sehen unsere Tests etwas klarer aus, weil wir nur den Logging-Teil entfernen. Versuchen wir also, den Test auszuführen und zu sehen, ob er erfolgreich ist. Also führen wir den ersten aus, wir haben einen Before-Hook, also der Test ist bestanden, und lassen Sie uns versuchen , den zweiten vor dem Hook auszuführen. Die Tests werden also mit dem vor jedem Hook bestanden. Die zweite Verbesserung , die ich hier implementieren möchte , ist der Testschritt , um unsere Aktionen für alle klarer und lesbarer zu machen. Versuchen wir also, vor jedem Hook einen weiteren Schritt hinzuzufügen. Wir warten also auf den Testpunktschritt, dann können wir unserem Schritt einen Namen geben. Lassen Sie uns als Erstes zu unserer Website navigieren. Okay, hier ist es auch eine Synchronisation und wir können auch den Hauptteil unseres Schritts angeben. Also lass mich das rausschneiden. Also hier haben wir einen Schritt, in dem wir zu unserer Website navigieren. Lassen Sie uns also die Demo-Website als Quelle verwenden. Jetzt können wir etwas erstellen, ein weiterer Schritt für den Login. Wir können also so etwas wie Login sagen. Loggen Sie sich mit einem Standardbenutzer ein. Und hier können wir diese Schritte der Anmeldung nicht durchführen. Also lass mich diesen Kommentar löschen. Okay, jetzt haben wir vor jeweils zwei Schritten. Navigieren Sie zunächst zur Quell-Demo-Website und melden Sie sich mit dem Standardbenutzer an. Lassen Sie mich die Schritte für unseren Test implementieren und vergleichen, wie der Test aussehen wird und wie klar sie sein werden und wie einfacher es wäre, zu verstehen was wir in unseren Tests haben. Ich habe die Schritte für unseren Test hinzugefügt. Hier haben wir also all diese Schritte, um zu überprüfen, ob der erste Produktname korrekt ist. Die Produkte fügen der Karte also das erste Produkt hinzu, um die Kartenanzahl zu überprüfen, und dasselbe gilt auch für den zweiten Test. Wir haben den Warenkorb hinzugefügt und navigieren zu ihm und überprüfen den Produktnamen. Versuchen wir nun, den ersten Test durchzuführen. Und hier haben wir all diese Schritte angezeigt. Und wenn ein Schritt fehlschlägt, können Sie den fehlgeschlagenen Schritt überprüfen, und es ist einfacher zu überprüfen was die Hauptursache für einen Fehler ist. Lassen Sie uns also den zweiten ausführen und auch hier haben wir die Before-Hooks. Und hier haben wir all diese Schritte, und wir haben auch Schritte innerhalb des Capture-First-Produkts, und nach Hooks haben wir nichts mehr. Lassen Sie uns also zusammenfassen, was für feuerfestes Material wir verwendet haben. erste Implementierung bestand also darin, die gemeinsamen Aktionen herauszufiltern Also haben wir den Navigationsteil und den Logging-Teil vor jedem Hook extrahiert . Danach haben wir Testschritte mit Namen hinzugefügt, was uns hilft, unseren Test klarer und verständlicher zu gestalten und in Zukunft Änderungen vorzunehmen. Ich hoffe es hat euch gefallen. Wir sehen uns in der nächsten Lektion. 21. Framework-Setup und Aufbau des Login-Page-Objekts: Willkommen zu diesem Kapitel, in dem wir ein Framework für die Testautomatisierung mithilfe von Playwright und dem Bij Object-Modell erstellen ein Framework für die Testautomatisierung mithilfe von Playwright und dem Bij Object-Modell Am Ende dieses Kapitels verfügen Sie über ein strukturiertes, skalierbares Framework , das Sie für Tests mit echten Wörtern verwenden können Warum brauchen wir also ein Framework? Stellen Sie sich vor, Sie schreiben alle Ihre Testfälle in einer einzigen Datei. Es wird chaotisch, schwer zu pflegen und fehleranfällig An dieser Stelle kommt das Wort Pom für das Seitenobjektmodell ins Spiel. Seitenobjektmodell hilft uns dabei, die Logik der Interaktion mit UY von den eigentlichen Testfällen zu trennen , wodurch unser Test lesbarer und wartbarer Hier ist ein kurzer Überblick darüber, was wir entwickeln werden. Wir beginnen mit der Einrichtung eines Projekts, erstellen dann Biji-Objekte, definieren Locators und Aktionen, integrieren sie in die Spielpläne von Dramatikern schreiben und führen schließlich unseren Test Lassen Sie uns also anfangen. Hier habe ich einen leeren Ordner Framework Playwright in Visual Studio Code geöffnet einen leeren Ordner Framework Playwright in Visual Studio Code und lass uns Playwright installieren Öffnen wir dazu das Terminalmenü vom neuen Terminal aus Und hier sollten wir NPM hineinschreiben, Play Writ, und lassen Sie uns Latest verwenden Jetzt werden wir hier gefragt. Wir werden standardmäßig alles verwenden. Javascript von Discript ist nicht wirklich wichtig. Wir werden Typescript verwenden, weil Playwright ursprünglich für Discript entworfen wurde und alles andere als Standard beibehalten wird Lassen Sie uns jetzt warten. Nachdem wir alles installiert haben, haben wir diese Teststruktur. Also ein Textbeispiel, das wir löschen können weil wir es nicht benötigen, und wir können auch löschen, was wir in diesen Tests haben. In diesem Testordner werden wir also unseren Test behalten. Lassen Sie uns nun einen weiteren Ordner erstellen , in dem wir unser Seitenobjekt behalten werden. Nennen wir es also Seiten. Außerdem können wir einen Ordner erstellen, in dem wir unsere Geräte und Dienstprogramme aufbewahren. Lassen Sie mich also einen weiteren Ordner erstellen und ihn so etwas wie Fixtures nennen. Okay. Da wir unsere Projektstruktur haben, lassen Sie uns über Seitenobjekte sprechen. Ein Seitenobjekt ist eine Klasse, die unsere Webseite repräsentiert. Anstatt Locators und Interaktionen direkt in den Test zu schreiben , definieren wir sie in separaten Klassen, um unseren Code wiederverwendbarer und wartbarer zu machen Fangen wir also mit der Erstellung der ersten Seite an. Also werden wir diese Wag-Webanwendung verwenden und die erste Seite , die wir automatisieren werden , ist die Anmeldeseite also in diesem Seitenordner Lassen Sie uns also in diesem Seitenordner eine neue Datei erstellen und sie Anmeldeseite nennen und nicht die Erweiterung von TIScript Und hier beginnen wir damit , eine Klasse zu erstellen, eine Klasse exportieren und ihr den Namen Anmeldeseite zu geben Als Nächstes müssen wir unsere Variablen hinzufügen , die wir verwenden werden. Lassen Sie mich also eine private Variable für unsere Seiteneinrichtung erstellen. Also private Seite und wir werden auch die Eingabe verwenden. Wir werden eine Seite haben. Also ist es Seite und lassen Sie uns diese Seite importieren. Fügen wir also einen Import hinzu. Importieren. Und verwenden wir eine Seite von und hier sollten wir Dramatiker haben Ja. Also hier haben wir Dramatiker Wir werden eine Variable für die Seite haben. Außerdem benötigen wir von dieser Seite eine Variable für diesen Benutzernamen, die Eingabe, die Passworteingabe und für den Login-Bereich. Also fügen wir sie hinzu Unsere Felder sind privat, was bedeutet, dass sie innerhalb dieser Klasse instanziiert werden müssen innerhalb dieser Klasse instanziiert Lassen Sie uns also einen Konstruktor für diese Klasse erstellen. Wo wir unsere Felder instanziieren. Constructor, und unser Konstruktor erhält Und drinnen werden wir diese Seite haben. Gehe zur Seite. Wir werden diese Seite instanziieren Außerdem sollten wir all diese unsere Felder instanziieren. Dieses Benutzernamenfeld entspricht also dem Seitenpunkt-Locator, und hier sollten wir unseren Locator angeben Also lasst uns den Locator dafür finden. Also hier haben wir einen Datentest und wir haben eine ID. Also holen wir es uns per AD. Fügen wir also Hash und diese ID hinzu. Lassen Sie uns auch dieses Passwortfeld instanziieren. Wenn wir nun ein Objekt dieser Klasse erstellen, das wir zusammen mit dieser Klasse instanziiert haben, haben wir die Seite und all diese haben wir die Seite und Aber jetzt ist es an der Zeit, Methoden oder Aktionen hinzuzufügen , die mit diesen Locators ausgeführt werden können Wir haben zwei Methoden zum Tippen für das Benutzernamenfeld für das Passwort und eine Aktion zum Klicken auf die Anmeldeschaltfläche Lassen Sie mich also die erste Aktion für die Eingabe des Benutzernamens erstellen . Also haben wir einen Sync und nennen ihn Enter user name. Und unsere Methode erhält einen Benutzernamen. Fügen wir eine Art von Zeichenfolge hinzu. Okay. Und innerhalb dieser Methode führen wir eine Gewichtung dieses Benutzernamen-Feldes mit Punktfüllung und unserem Benutzernamen durch. Lassen Sie mich also schnell dieselbe Methode für das Passwort verwenden. Hier habe ich eine andere Methode zur Eingabe des Passworts und eine andere Methode zum Klicken auf die Anmeldeschaltfläche erstellt des Passworts und eine andere Methode . Und jetzt können wir in unserem Fall all diese drei Methoden in einer einzigen Methode kombinieren , die als Login bezeichnet wird. Wir können also so etwas erstellen, eine Synchronisation, eine Anmeldung, und unsere Methode erhält einen Benutzernamen und ein Passwort. Also Benutzername als Zeichenkettenpasswort. Auch als Zeichenfolge und innerhalb werden wir unsere erstellten Methoden verwenden. Warten Sie also, geben Sie den Benutzernamen ein und wir erhalten einen Benutzernamen Und das Gleiche gilt für Enter password, wir erhalten unser Passwort und das letzte klickt Also das, klicken Sie auf den Login-Button. Lassen Sie uns nun einen Test erstellen, einen Anmeldetest mit dieser Seitenobjektklasse. In diesem Test erstellen wir also eine neue Datei, nennen wir sie Login-Tests dotSPCDTTS und verwenden Import Wir müssen den Test von Playwright importieren. Also hier ist der erste Dramatiker. Und lassen Sie uns unseren Test erstellen. Lassen Sie uns also den Test erstellen und ihn erfolgreiche Anmeldung nennen. Es ist also eine Senke und wir erhalten die Seitenbefestigung als Parameter Und hier haben wir die Leiche. Also hier ist ein Waschbecken. Also hier haben wir die Leiche. Lassen Sie uns also zuerst eine Konstante erstellen und unsere Anmeldeseite instanziieren Also wird unsere Klasse exportiert. So können wir eine konstante Anmeldeseite erstellen, die einer neuen Anmeldeseite entspricht. Hier haben wir also, dass unser Konstruktor eine Seite vom Typ Page vom Dramatiker erhält, also sollten wir unsere Seitenfixtur angeben Jetzt stehen uns also alle unsere Methoden auf dieser Anmeldeseite zur Verfügung Außerdem können wir hier eine Methode für den Besuch der Quell-Demo-Anmeldeseite erstellen . Also lass es mich erstellen. Lassen Sie uns eine Synchronisierung durchführen, besuchen Sie die Anmeldeseite. Und wir warten auf this.page.g2 und wir wissen, dass unsere SOS-Demo-URL dieselbe sein wird Also lass es mich sagen. Und jetzt können wir den Besuch auch von dieser Anmeldeseite aus machen. Wir haben also einen Punkt auf der Anmeldeseite und wir haben die Anmeldeseite besuchen. Nun der nächste Schritt nach dem Besuch, sollten wir uns anmelden können. Wir können also die Word-Anmeldeseite mit dem Punkt-Ender-Benutzernamen verwenden. Lassen Sie mich versuchen, den ersten so zu machen, Standardbenutzer. Login-Seite, Passwort. Also das Passwort als Geheimrezept , und danach müssen wir auf die Anmeldeseite klicken und dann auf Anmeldemuster klicken. Also lass uns versuchen zu aktualisieren, also lass mich den Playwright Runner öffnen Also spiele nicht richtig als Gast. Da ist Y. Lassen Sie mich minimieren, weil ich zwei Monitore haben muss Drücken Sie die Eingabetaste und lassen Sie uns warten Hier haben wir also unseren Runner und lassen Sie uns diese erste erfolgreiche Anmeldung ausführen und beobachten Also hier haben wir einen Fehler. Ja, bis dahin müssen wir nicht warten , denn lassen Sie mich hier etwas Gewicht hinzufügen. Also lass es uns jetzt versuchen. So können wir beobachten, dass wir den Login durchführen und danach sind wir auf dieser Produktseite gelandet. Außerdem können wir die Anmeldung mit dieser Anmeldemethode durchführen. Wir können also await login page dot verwenden, und wir haben die Login-Methode, die den Standardbenutzer als Benutzernamen und das Passwort als geheime Quelle empfängt . Lassen Sie mich das kommentieren und hier hinzufügen und warten. Okay, also lasst uns danach streben, das auszuführen. Unser Test hat also bestanden und wir sind auf dieser Produktseite gelandet. Eine weitere kleine Verbesserung, die wir vornehmen können, besteht darin, den Rückgabetyp unserer Methode hinzuzufügen. Lassen Sie uns also ein Gewichtsversprechen hinzufügen. Und wenn wir dieses Promise-Gewicht hinzufügen, wissen wir, dass wir, wenn unsere Methode ein Versprechen zurückgibt, ein Gewicht verwenden sollten. Das war es also für die heutige Lektion. Wir haben ein einfaches Seitenobjekt, page, erstellt , unser gesamtes Objekt instanziiert und diese Seite verwendet, um einen einfachen, erfolgreichen Protokollierungstest zu erstellen Wir sehen uns also in der nächsten Lektion. 22. Produktseitenobjektmodell erstellen: Hallo. In dieser Lektion werden wir unser Framework weiter ausbauen. Um genauer zu sein, fügen wir zweites Seitenobjekt für die Produktseite hinzu. Deshalb möchten wir einige Tests für diese Produktseite hinzufügen , auf der wir nach der Logie landen werden . Beginnen wir also damit, eine weitere Produktseitenklasse zu erstellen. Lassen Sie mich also eine neue Datei erstellen und nennen wir sie products page dot gs. Und hier im Inneren erstellen wir unsere Produktseite für die Klasse Export Class. Und lassen Sie uns damit beginnen, unser Feld hinzuzufügen. Also brauchen wir eine Seite vom Typ Seite, und wir importieren sie von Playwright, Import Seite und hier haben wir die erste, Dramatiker. Schauen wir uns auch an, was wir sonst noch brauchen. Wir benötigen also einen Locator für dieses Feld. Also lassen Sie uns das untersuchen. Wir haben einen Titel, also nennen wir ihn privaten Seitentitel. Wir werden einen Assertion-Locator erstellen. Es ist auch ein Locator von Dramatiker. Fügen wir dem Import ce hinzu. Als Nächstes fügen wir das zur Kartenschaltfläche hinzu. Ein Rucksack mit zwei Karten. Also lass es uns privat hinzufügen. Und lassen Sie uns nach dem Klicken auch diesen Einkaufswagenbeutel hinzufügen . Also lass es uns benennen. Privat Als Nächstes sollten wir den Konstruktor erstellen, mit dessen Hilfe wir unsere Klasse instanziieren, wie wir es hier auf unserer Anmeldeseite getan haben Lassen Sie uns also unseren Konstruktor erstellen. Sotrctor erhält unsere Seitenbefestigung als Parameter. Und im Inneren instanziieren wir unsere Seite so, dass sie der Seite entspricht, die Und lassen Sie mich Locators für all diese Felder hinzufügen. Also habe ich hier all diese Locators für all unsere Elemente hinzugefügt, und der nächste Schritt besteht darin, Aktionen zu erstellen , die wir mit diesem Element ausführen werden Für den Seitentitel benötigen wir also den Text Wir möchten den Text aus diesem Locator extrahieren. Lassen Sie mich also eine Aktion erstellen , die den Seitentiteltext erhält. Lassen Sie uns also auch einen Rückgabetyp zu unserer Methode hinzufügen. Also wollen wir ein Versprechen einer Zeichenfolge zurückgeben. Also wollen wir den Text , der eine Zeichenfolge sein wird. Lassen Sie uns nun darin einen konstanten Titeltext erstellen. Und lassen Sie uns diesen Seitentitel und den Textinhalt der speziellen Methode weggeben , die entweder eine Zeichenfolge oder Null zurückgeben Geben wir also diesen Titeltext zurück, und er kann eine Null sein. Fügen wir also dieses Zeichen hinzu. Also hier haben wir den Seitentiteltext erstellt. diese Weise sollten wir auch Text für die Warenkorb-Seite erstellen. Ich werde es einfach kopieren und einfach umbenennen Also hier haben wir eine Methode hinzugefügt , die den Text zurückgibt. Außerdem müssen wir eine Methode erstellen, um auf diese Schaltfläche „In den Warenkorb“ zu klicken. Klicken Sie also auf „Zum Carve Back hinzufügen“. Lassen Sie uns also auch das Versprechen void zurückgeben nur um zu wissen, dass wir await hinzufügen müssen, bevor wir diese Methode verwenden können Warten Sie also auf die Schaltfläche „Zu Carbac hinzufügen“, also klicken Sie. Also lasst uns das fortsetzen, was wir haben. Wir haben all diese Locators erstellt, all diese Variablen. Danach haben wir sie in dieser Struktur instanziiert und die Methoden erstellt mit deren Hilfe wir Aktionen mit diesen Elementen ausführen, weil sie Aktionen mit diesen Elementen ausführen hier Jetzt ist es an der Zeit, die Testspezifikation für die zweite Produktseite zu erstellen die zweite Produktseite Lassen Sie uns also eine neue Datei erstellen und sie Product Test Dot Spec Dot Dot nennen Und lassen Sie mich diesen Test kopieren , weil wir ihn benötigen werden, und lassen Sie uns unseren Test in etwas wie Zur Karte hinzufügen umbenennen und wir erhalten hier auch eine Seite Und für den Anfang müssen wir den Login durchführen. Also kopieren wir das Login aus dem Login-Test. Aber nachdem wir den Login durchgeführt haben, müssen wir überprüfen, ob wir auf der Produktseite gelandet sind. Also hier möchte ich bestätigen, dass wir nach dem Login den Texttitel dieses Produkts angezeigt haben. Lassen Sie mich also den zweiten Preis mit unserer Produktseite erstellen. Also gleich die Produktseite, gleich neu, verwenden wir die Produktseite, und wir erhalten auch eine Seitenfixierung Wenn wir nun die Kosten für die Produktseite verwenden, haben wir alle unsere Methoden Lassen Sie uns also mit der Behauptung beginnen , dass wir den Produkttext haben Lassen Sie uns also expect und inside verwenden, wir haben eine Produktseite, die wir erstellt haben, und hier haben wir Get page title text, unsere Methode, und lassen Sie uns unsere Assertion verwenden B, lass uns das mit B machen, erwarte. Also müssen wir auch diese Erwartung vom Dramatiker importieren diese Erwartung vom Dramatiker Okay. Lassen Sie uns jetzt zwei B und das Textprodukt verwenden. Okay, lass mich speichern und lass uns das neue Terminal öffnen und lass uns öffnen, also lass mich löschen und Pegs spielen lassen , schreiben, testen, du was? Lassen Sie mich das minimieren, lassen Sie uns das ausführen. Also hier haben wir die zweite Spezifikationsdatei. Lassen Sie uns sie ausführen und beobachten, was wir haben. Hier haben wir also den Scheck, dass wir auf dieser Produktseite mit den Titelprodukten gelandet sind. Als Nächstes möchten wir auf diese Schaltfläche für automatische Karten klicken. Dafür können wir einfach die Seite mit den Produkten abwarten, und wir haben unsere Methode. Klicken Sie auf die AutoCard-Rucksack-Schaltfläche. Nachdem wir geklickt haben, sollten wir bestätigen, dass unsere Kartenseite zu einer geworden ist und den Wert eins hat Wir können also erwarten und hier unsere Seite mit den Gewichtsprodukten verwenden . Wir haben die Methode, Seitenkartenseitentext, wir an, dass es eins zu B ist, und wir haben den Wert Eins Also lass mich speichern und lass uns noch einmal einen Test machen. Unser Test wurde also bestanden, denn hier ist der Wert eins. In diesem Beispiel für einen Produkttest können wir die Vorteile der Seitenobjekte erkennen, können wir die Vorteile der Seitenobjekte erkennen da wir hier die Anmeldeseite wiederverwenden , die wir in der vorherigen Lektion erstellt haben, und hier einfach all diese Methoden und all diese Parameter wiederverwenden . Ich hoffe es hat euch gefallen. Wir sehen uns im nächsten. 23. Login-Fixture für die Authentifizierung hinzufügen: In dieser Lektion werden wir unser Framework für Dramatiker verbessern, indem Anmeldefunktion als Fixture hinzufügen diese Weise können wir die Anmeldefunktion für mehrere Tests wiederverwenden , ohne den Anmeldevorgang in jedem Test wiederholen Stellen Sie sich ein Gerät als wiederverwendbares Setup für unseren Test vor. In unserem Fall müssen wir also den Login durchführen, um einen Test zu schreiben müssen wir also den Login durchführen, um einen Test zu Unser Setup ist also der Login. Lassen Sie uns ein Fixture erstellen um uns bei der Login-Funktionalität zu helfen hier im Fixtures-Ordner Lassen Sie mich hier im Fixtures-Ordner eine neue Datei hinzufügen, wir Fixtures Dot S nennen . Die Syntax für ein Fixture ist also Wir haben es beschrieben. Hier haben wir also ein Fixture erstellt, und ich habe die Syntax aus dieser Dramatikerdokumentation übernommen Zuerst müssen wir den Test und einen Basistest vom Dramatiker importieren den Test und einen Basistest vom Als Nächstes exportieren wir diesen neuen Kostentest, dem Basistest entspricht und erweitert Also hier sollten wir unsere neue Methode hinzufügen. Nennen wir es also authentifizierte Seite und es ist eine Anmeldeseite. Lassen Sie mich nun auch diese Anmeldeseite importieren, und hier wurde sie importiert Als Nächstes möchten wir diese authentifizierte Seite erstellen Lassen Sie uns also dieses Setup erstellen. Es ist also eine Synchronisierungsfunktion, die als Parameter die Seitenbefestigung haben wird Und hier haben wir einen Parameter verwendet, der uns zeigt was wir nach der Verwendung dieses Geräts zurückgeben möchten. Lassen Sie mich damit beginnen, diese Anmeldeseite zu erstellen, eine neue Anmeldeseite, um Zugriff auf all das zu haben Und hier, lassen Sie mich das Protokoll durchführen Ich habe all diese Schritte hinzugefügt, um die Anmeldung durchzuführen, das gesamte Passwort und den Benutzernamen aufzurufen und einzugeben und zu klicken. Und danach sollten wir diese Verwendungsoption verwenden , die uns zeigt, was wir zurückgeben sollen. Wir geben also eine Anmeldeseite mit der Authentifizierung der Anmeldeseite zurück der Authentifizierung der Anmeldeseite Versuchen wir nun, dieses Feature zur Authentifizierung der Seite in unserem Test zu implementieren und zu verwenden dieses Feature zur Authentifizierung der Seite in Hier führen wir also den Login durch, bevor wir auf diese Auto-Car-Schaltfläche klicken Lassen Sie mich also alles kopieren , was mit dem Login zu tun hat, und versuchen wir, unser Gerät zu verwenden. Wir müssen unsere Test-Cons importieren , die hier erweitert wurden Lassen Sie mich also versuchen, den Testtest von zu importieren. Und lassen Sie uns zeigen, dass wir unsere Geräte und Einrichtungen haben. Jetzt können wir diesen Test aus dem Dramatiker löschen , weil wir den Test von hier aus erweitert haben den Testtest als Basistest des Dramatikers erweitert Und jetzt können wir zusammen mit diesem Gerät unsere erstellte Bias-Auticade-Seite verwenden Also lass mich das kopieren. Wir können es hier hinzufügen. Und falls wir wissen, dass wir uns einloggen sollten, bevor wir die Assertion machen oder auf die Backpack-Schaltfläche klicken , lassen Sie mich das löschen Und hier können wir einfach diese authentifizierte Seite hinzufügen. Lassen Sie mich die Bilder überprüfen, indem Y schreibe, um Ihnen zu zeigen, wie das funktionieren wird Also hier, lass es mich ausführen. Und lassen Sie uns verlängern. Wir haben also beobachtet, dass wir hier die vom Gerät authentifizierte Seite ausgeführt Und hier führen wir all diese Aktionen für den Login durch. Und für den Fall, lassen Sie mich das maximieren, wir werden viele Tests für die Produktseite durchführen. Das ist ein sehr mögliches Szenario, und wir müssen den Login durchführen. Bei all diesen Tests wird es sehr chaotisch aussehen Aber mit Hilfe dieses Geräts, in dem wir den Login durchführen, sieht es sehr übersichtlich aus und ist einfacher zu verstehen Außerdem können wir hier bei Bedarf viele andere Geräte hinzufügen Bedarf viele andere Geräte Auch für den Fall, dass wir viele Tests haben, können wir dieses Gerät hinzufügen, indem wir uns vor jedem Hakensägentest anmelden jedem Hakensägentest Und hier haben wir eine Sync-Funktion als Parameter, wir erhalten eine authentifizierte Also lass es mich hier weitergeben. Und im Körper wird es nur diese authentifizierte Seite geben. Jetzt können wir das aus all diesen Tests löschen Wir haben also festgestellt, dass alle unsere Tests bestanden weil der Login hier vor jedem Hook vom Fixture aus ausgeführt wurde hier vor jedem Hook vom Fixture Fixture sind extrem nützlich, wenn wir ein Setup für einen bestimmten Test durchführen müssen In unserem Fall verwenden wir dieses Gerät also für die Einrichtung der Anmeldefunktion Hoffe es hat dir gefallen. Wir sehen uns im nächsten. 24. Framework-Zusammenfassung: Willkommen zurück. Jetzt haben wir ein strukturiertes Framework für Dramatiker erstellt. Nehmen wir uns einen Moment Zeit, um zu überprüfen, was wir implementiert haben und warum es wichtig ist Bei diesem Ansatz geht es nicht nur darum, Tests zu schreiben, auch darum, eine wartbare und skalierbare Automatisierungssuite zu erstellen und skalierbare Deshalb haben wir zwei Seitenobjektdateien hinzugefügt , in denen wir Locators und Aktionen, die mit ihnen ausgeführt werden können, speichern Locators und Aktionen, die mit ihnen ausgeführt werden können, In unserem Fall haben wir also die Anmeldeseite und die Produktseite. In jeder dieser Klassen deklarieren wir die privaten Variablen für unsere Locators Wir haben sie instanziiert und danach Methoden erstellt, mit denen Aktionen mit diesen Webelementen ausgeführt werden können Das Gleiche wurde hier für die Produktseite hinzugefügt. Außerdem haben wir für jede Funktionalität oder Webseite separate Testdateien erstellt. Mit diesem Ansatz wurde unser Framework modular, lesbar und einfacher zu skalieren. In unserem Beispiel haben wir also den Login-Test, und hier können wir nur Tests hinzufügen, die sich auf den Login beziehen. Wir können eine erfolgreiche Anmeldung oder eine Anmeldung mit falschen Anmeldeinformationen usw. hinzufügen . Und das Gleiche gilt für diesen Produkttest. Hier können wir nur Tests hinzufügen , die sich auf die Produktseite beziehen. Und am Ende haben wir hier in unserem Fixtures-Ordner ein Fixture hinzugefügt , das als Setup für unseren Test dient Der Login erfolgt wie vor jedem Hook, aber in kürzerer Form Wenn diese Struktur vorhanden ist, können Sie Ihr Framework jetzt erweitern, indem Sie weitere Seiten, Dienstprogramme und Testszenarien Zum Beispiel verwenden wir die Souls Demo und hier können Sie versuchen, ein weiteres Seitenobjekt für die Kartenseite hinzuzufügen und hier einige neue Tests zu implementieren, auch einer Datei für Kartenseite im CRP-Seitentest Sie können den Anmeldeteil, den Produktteil und die neuen Schritte für die Arbeit mit der Kartenseite verwenden und die neuen Schritte für die Arbeit mit der Kartenseite Ich hoffe, dir hat die Lektion gefallen, sehen uns in der nächsten