Übung: Verwenden von Playwright in Visual Studio Code
Im vorherigen Abschnitt haben wir uns mit kernen Konzepten im Zusammenhang mit der Playwright Test Configuration and Playwright Test Specification vertraut, aber wir haben die Playwright Commandline (CLI) zum Ausführen unserer Tests und zum Anzeigen von Berichten verwendet.
Was wäre, wenn wir dies in unserer Visual Studio Code-Umgebung tun könnten und einen visuelleren Interaktionsprozess zum Erstellen, Ausführen und Debuggen unserer Tests haben könnten?
Mit der Playwright Test for Visual Studio Code Extension erhalten Sie eine überlegene Entwicklerumgebung und einige einzigartige Toolfunktionen , die es zu Ihrer bevorzugten Methode für die Interaktion mit dem Playwright Test runner machen könnten. Beginnen wir mit einer Tour.
Erste Schritte
Die Playwright-Dokumentation enthält ein umfassendes Lernprogramm mit der exemplarischen Vorgehensweise, die Sie in Ihrer eigenen Zeit ansehen sollten. In dieser Lektion versuchen wir, eine Teilmenge dieser Übungen durchzugehen, um Sie mit der Nutzung vertraut zu machen.
]
Installieren der Playwright-Erweiterung
Installieren Sie die Erweiterung aus dem Visual Studio Code Marketplace. Nach der Installation sollten Sie ein Beakersymbol auf der linken Seite des Visual Studio Code-Fensters erkennen, wie im Screenshot gezeigt. Beachten Sie, dass die Erweiterung automatisch die Testspezifikationen in Ihrem Projekt erkennt und erfasst.
Test ausführen (kopflos)
Um Tests ohne Kopf (kein Browserfenster) auszuführen, stellen Sie sicher, dass die Optionen " Browser anzeigen " und "Ablaufverfolgungsanzeige anzeigen " deaktiviert sind. Wählen Sie in Zeile 3 der example.spec.ts Datei die grüne Wiedergabeschaltfläche aus, um den ersten Test auszuführen. Sie können auch die grauen Wiedergabeschaltflächen in der Randleiste des Test-Explorers auswählen, um alle Tests in der Datei auszuführen oder einen bestimmten Test auszuführen.
Nachdem Sie Ihre Tests ausgeführt haben, öffnet die Registerkarte " Testergebnisse " ein Fenster, in dem Sie den gesamten Verlauf der Testausführungen sehen können. Sie können auch einen Drilldown zu einem Test ausführen und "Test ausführen " auswählen, um diesen bestimmten Test erneut auszuführen.
Browser anzeigen (Überschrift)
Wenn Sie im Spitzenmodus ausgeführt werden möchten, was bedeutet, dass Ihre Tests mit einem geöffneten Browserfenster ausgeführt werden, können Sie das Kontrollkästchen "Browser anzeigen " aktivieren, bevor Sie die Tests ausführen.
Playwright ist ein sehr schneller Benutzer, der es schwierig machen kann, nachzuverfolgen, was im Test bei verwendung des Show-Browsers passiert. Für das Debuggen empfehlen wir die Verwendung der Option "Ablaufverfolgungsanzeige anzeigen ".
Ablaufverfolgungsanzeige anzeigen (Überschrift)
Aktivieren Sie das Kontrollkästchen "Ablaufverfolgungsanzeige anzeigen ", und aktivieren Sie die grüne Wiedergabeschaltfläche für den zweiten Test. Dadurch wird das Überwachungsanzeigefenster gestartet, in dem eine visuelle Darstellung der Testausführung angezeigt wird.
Oben sehen Sie eine Zeitachse des Tests, auf die Sie zeigen können, um den Status des Browsers anzuzeigen. Wenn Sie einen bestimmten Zeitbereich auswählen möchten, auf den sie sich konzentrieren soll, wählen Sie die Zeitachse aus, und ziehen Sie sie.
In der linken Randleiste können Sie die Aktionen sehen, die während der Testausführung erfolgt sind. Wenn Sie die Aktion locator.click auswählen, wird in der DOM-Momentaufnahme ein roter Punkt auf der Schaltfläche " Erste Schritte " angezeigt.
Wählen Sie als Nächstes die assertion "expect.toBeVisible " aus, und Sie sehen unsere DOM-Momentaufnahme geändert, um die Installationsseite mit einer Hervorhebung auf der Überschrift anzuzeigen, die wir bestätigen. Über der DOM-Momentaufnahme können Sie die Schaltflächen "Before " und "After " auswählen, um den Status des DOM vor und nach der Ausführung der Aktion anzuzeigen.
Sie können die DOM-Momentaufnahme in ein separates Fenster einblenden, indem Sie das Popupsymbol in der oberen rechten Ecke auswählen. Das kann hilfreich sein, wenn Sie das DOM beim Debuggen des Tests untersuchen möchten.
Vor dem Debuggen können Sie auch einen Locator aus der DOM-Momentaufnahme auswählen, indem Sie die Schaltfläche " Locator auswählen " im unteren Bereich auswählen. Zeigen Sie dann auf Elemente in der DOM-Momentaufnahme, um den Locator für dieses Element anzuzeigen. Wenn Sie ein Element auswählen, wird es dem Locator-Feld am unteren Rand des Ablaufverfolgungs-Viewers hinzugefügt, in dem Sie es bearbeiten können, bevor Sie es in die Zwischenablage kopieren.
Sie können die restlichen Features der Ablaufverfolgungsanzeige, z. B. die Registerkarten "Anruf", "Konsole", "Netzwerk" und " Quelle " selbst erkunden.
Debugtests
Für das Debuggen empfehlen wir, Ihre Tests mit der Option "Ablaufverfolgungsanzeige anzeigen" auszuführen und die Ablaufverfolgung Ihres Tests zu verwenden, um besser zu verstehen, was passiert.
Mit der Visual Studio Code-Erweiterung können Sie Ihre Tests jedoch auch direkt in Visual Studio Code debuggen, Fehlermeldungen anzeigen, Haltepunkte erstellen und Ihre Tests live debuggen. Erfahren Sie mehr aus der Dokumentation , oder schauen Sie sich das folgende Video an, um einen Eindruck von der Debuggingunterstützung zu erhalten.
Generieren von Tests
CodeGen generiert Ihre Tests für Sie, während Sie Aktionen im Browser ausführen, sodass sie die einfachste Möglichkeit zum Erstellen von Tests für komplexe Workflows ist.
Um einen Test zu generieren, wählen Sie die Schaltfläche " Neu aufzeichnen " in der Test-Randleiste in Visual Studio Code aus. Dadurch wird ein Browserfenster geöffnet, in dem Sie Aktionen ausführen können, die aufgezeichnet und in einen Test umgewandelt werden. Sie werden auch feststellen, dass eine neue Datei im tests Ordner mit dem generierten Test erstellt wird.
Geben Sie im Browserfenster eine URL ein, und führen Sie Aktionen aus, die ein Benutzer ausführen würde. Sie sehen, dass die Aktionen in der Testdatei in VS Code aufgezeichnet werden.
Erstellen Wir nun den einfachen Test neu, den wir zuvor ausgeführt haben, indem wir zur Playwright-Website wechseln und die Schaltfläche " Erste Schritte " auswählen. Anschließend können wir das Symbol " Assert Visibility " auf der Symbolleiste "Codegen" auswählen und die Überschrift " Installation " auswählen, um zu bestätigen, dass es sichtbar ist.
Weitere Informationen zum Generieren von Tests finden Sie im folgenden Video.
Nächste Schritte
In diesem Abschnitt haben Sie erfahren, wie Sie die Visual Studio Code-Erweiterung zum Suchen und Ausführen von Tests verwenden und wie Sie mit der Ablaufverfolgungsanzeige arbeiten, um eine visuellere Erfahrung für Debuggingtests zu erhalten.
Außerdem haben Sie erfahren, wie Visual Studio Code umfangreichere Tools zum Generieren von Tests mithilfe der Features "Neuen Test aufzeichnen", "Pick Locator" und "Datensatz bei Cursor" bereitstellt. Jetzt ist es an der Zeit, Ihre Playwright Fundamentals Learnings in einem geführten Projekt anzuwenden , um eine End-to-End-Testspezifikation für unsere Beispiel-App zu erstellen.