Einmal mit Playwright authentifizieren

Angenommen, Sie haben eine Webanwendung, für die Sie mit Playwright Browser-Tests schreiben möchten. Diese Webanwendung enthält einen Anmeldebildschirm und nach erfolgreicher Authentifizierung wird die gesamte Funktionalität geladen. Das bedeutet, dass jeder Test einen authentifizierten Benutzer benötigt, um die Anwendung zu testen. Da jeder Test isoliert ausgeführt wird, muss sich jeder Test authentifizieren. In jedem Test schreiben Sie also die Schritte, um einen Browser zu öffnen, zum Anmeldebildschirm zu navigieren, den Benutzernamen und das Kennwort einzugeben, auf Senden zu klicken und schließlich zu warten, bis die Seite geladen wird. Die Ausführung dieser Schritte kann von ein paar Sekunden für einen Test bis zu Minuten für Dutzende von Tests dauern. Im Idealfall möchten Sie sich nur einmal authentifizieren, wenn Sie Ihre Playwright-Tests durchführen.

Was wäre, wenn Sie den eingeloggten Zustand in Ihren Tests wiederverwenden könnten? Glücklicherweise gibt es eine solche Möglichkeit, und sie ist mit Playwright ziemlich einfach einzurichten. Lesen Sie weiter und erfahren Sie, wie Sie wertvolle Zeit sparen können, indem Sie sich nur einmal mit Playwright authentifizieren.

Wenn Sie direkt in die Lösung eintauchen möchten, können Sie sich HIER das Repository ansehen.

Playwright authentifizieren einmal Schritte Zusammenfassung

Kurz gesagt, sind die folgenden Schritte erforderlich, die in den jeweiligen Abschnitten dieses Artikels ausführlich beschrieben werden:

1. Bewahren Sie den Benutzernamen und das Passwort des Testkontos sicher auf
2. Schreiben Sie die Login-Testfunktion
3. Konfigurieren Sie den Pfad für den Speicherstatus
4. Schreiben Sie eine Funktion, die die Login-Funktion aufruft und den eingeloggten Zustand im Speicherpfad speichert
5. Schreiben Sie die Tests, die den eingeloggten Zustand erfordern

Schritt 1: Speichern Sie den Benutzernamen und das Passwort

Ich verwende dotenv, um den Benutzernamen und das Passwort zu speichern und zu laden. Dadurch wird verhindert, dass die Anmeldedaten Teil des übergebenen Codes werden.

npm i -D dotenv

Als nächstes initialisieren wir dotenv in der Konfigurationsdatei von Playwright playwright.config.ts.

https://gist.github.com/corradin/998f03af89f69aa586c40b4ca6648d52

Als nächstes erstellen Sie eine .env-Datei auf Ihrem Rechner im Stammverzeichnis des Repos mit folgendem Inhalt:

https://gist.github.com/corradin/e8b20a8a0800089024f4e00321b43d1e

Natürlich müssen Sie die echten Werte für den Benutzernamen und das Passwort eines gültigen Benutzers eingeben. In diesem Beispiel wollen wir meetup.com verwenden.

Schritt 2: Schreiben Sie den "Playwright authenticate once" Test

Unten sehen Sie den Code für login.ts:

https://gist.github.com/corradin/bba590d2549988c84eb6d72136a0e18e

Die Funktion login hat drei Argumente. Der Benutzername und das Passwort können ganz einfach sein. Die Playwright-Testbibliothek benötigt immer ein Seitenobjekt, wenn sie Aktionen für Browserseiten definiert, z. B. die Navigation oder die Interaktion mit dem DOM.

Die erste Aktion besteht darin, zur Anmeldeseite von meetup.com zu navigieren. Anschließend werden die Felder Benutzername und Kennwort mit den Werten ausgefüllt, die über die Argumente der Funktion bereitgestellt werden. In einem späteren Abschnitt werden wir sehen, wie diese Argumente bereitgestellt werden.

Als letzter Schritt wird ein DOM-Element angeklickt, das einer Schaltfläche mit dem Typ "submit" und dem Text "Log in" entspricht. Diesem Klick geht eine Funktion waitForNavigation voraus, die in ein Promise.all verpackt ist. Das bedeutet, dass der Test nach dem Anklicken der Schaltfläche wartet, bis die Navigation abgeschlossen ist, um zurückzukehren. Dies ist nützlich, wenn ein Klick auf eine Schaltfläche eine indirekte Navigation auslöst. In diesem Fall löst der Klick einen API-Aufruf aus, der die Anfrage validiert, eine OK-Meldung zurückgibt und eine Weiterleitung der Seite bewirkt. Die waitForNavigation muss vor der Funktion click angegeben werden, um die Wartezeit einzurichten.

Schritt 3: Konfigurieren Sie den Speicherstatus

Webanwendungen können Cookie-basierte oder Token-basierte Authentifizierung verwenden (weitere Informationen finden Sie hier ). Playwright verwendet die Methode storageState, um den Authentifizierungsstatus eines Benutzers zu speichern, nachdem dieser sich angemeldet hat. Dieser Status kann gelesen werden, wenn ein neuer Browserkontext erstellt wird. Der Pfad für diese Datei mit dem gespeicherten Status kann in der playwright.config.ts konfiguriert werden:

https://gist.github.com/corradin/5dc834c423b7a97e891fa838e1c3662d

In der Eigenschaft storageState geben Sie den Pfad zu der Datei an, in der die authentifizierten Informationen gespeichert werden. Die Eigenschaft globalSetup ist der Pfad zu Ihrer globalen Setup-Datei. Diese Datei enthält Code, der einmal vor allen Ihren Tests ausgeführt wird.

Schritt 4: Schreiben Sie die Einrichtung "Playwright einmal authentifizieren".

Um sicherzustellen, dass der Login-Test vor allen anderen Tests ausgeführt wird, definiert Playwright einen globalen Setup-Ansatz. Die Datei global-setup.ts wird wie folgt dargestellt:

https://gist.github.com/corradin/7632ea89e37ba895e828a13445f1544d

Der Benutzername und das Passwort können aus der Umgebung gelesen werden, da die Methode env.config() ausgeführt wurde und Ihre .env-Datei verarbeitet hat. Die Eigenschaft storageState kann aus der Datei playwright.config.ts abgerufen werden, indem sie aus FullConfig gelesen wird. Die Option headless: false in der Methode chromium.launch wird nicht benötigt, aber ich habe sie hinzugefügt, um zu sehen, was auf dem Bildschirm passiert.

Der Aufruf der Login-Funktion erfolgt durch Angabe des aktuellen Seitenobjekts, des Benutzernamens und des Passworts, da die Login-Funktion ein Seitenobjekt für ihre Aktionen benötigt. Nach der Anmeldung werden die Authentifizierungsinformationen auf storageState gespeichert. Am Ende der globalen Einrichtung muss der Browser geschlossen werden. Sobald diese Funktion zurückkehrt, laufen die Tests in einer anderen Browser-Instanz.

Schritt 5: Schreiben Sie die Tests

Damit die Funktion "Playwright authentifiziert sich einmal" ihre Wirkung entfalten kann, benötigen wir mindestens zwei isolierte Tests, die vom eingeloggten Zustand abhängen.

https://gist.github.com/corradin/18eeaae8582848f8b5c128200ba74b09

Wir navigieren zu zwei verschiedenen Seiten und überprüfen die Sichtbarkeit eines bestimmten Textes auf dem Bildschirm. Wenn wir die Tests durchführen, können Sie die Ergebnisse unten sehen.

Der Test, der einmal ausgeführt wird und einen Benutzer anmeldet:

Der Test, der zur Seite Benachrichtigungen navigiert:

Der Test, der zur Seite Zahlungsarten navigiert:

Der Testlauf ist in etwa 5 Sekunden abgeschlossen, im Gegensatz zu 13 Sekunden, wenn vor jedem Test eine Anmeldung erfolgt.

Fazit

Wenn Sie mit Playwright Browsertests für eine Webanwendung schreiben, für die eine Benutzerauthentifizierung erforderlich ist, damit Ihre Tests funktionieren, beginnen Sie frühzeitig mit einem Authentifizierungsansatz.

Ihre Tests werden:

1. Schneller laufen
2. Näher an der Realität sein (Ein Benutzer meldet sich einmal an und führt alle Aktionen für die Dauer der Sitzung aus)
3. Sauberer sein
4. Besser gerüstet für Fälle, in denen Sie Benutzer mit unterschiedlichen Rollen hinzufügen möchten. Sie können diese Benutzer in der stateStorage verfolgen und sie in Ihre Tests einspeisen.

---

Möchten Sie mehr über Playwright erfahren? Sind Sie bereit für den nächsten Schritt?
Schauen Sie sich diese Schulung an: End-to-End Testing mit Playwright
Kommentare sind mehr als willkommen! Schreiben Sie mir eine Nachricht über LinkedIn oder Twitter @rscorradin.