Playwright-Authentifizierung
Dieses Kapitel führt ein, wie die Authentifizierung in Playwright gehandhabt wird, um wiederholte Anmeldungen für jeden Test zu vermeiden und gleichzeitig die Testisolierung beizubehalten.
Das Kernproblem der Authentifizierung
Die meisten Tests für Webanwendungen erfordern eine Benutzeranmeldung.
Wenn jeder Test den Anmeldeablauf von Grund auf neu durchführt, verlangsamt dies die Testausführung erheblich.
Playwrights Lösung ist:Einmal authentifizieren, den Zustand speichern und ihn von allen Tests wiederverwenden lassen.。
Vorbereitung: .auth-Verzeichnis
Beispiel
mkdir -p playwright/.auth
# Zu .gitignore hinzufügen (Authentifizierungsstatus enthält sensible Informationen)
echo 'playwright/.auth' >> .gitignore
.authDie Datei enthält sensible Cookies und Authentifizierungstokens,und darf niemals in das Code-Repository eingecheckt werden.。
Grundlegender Ansatz: Gemeinsames Konto + Setup-Projekt
Dies ist der von Playwright empfohlene Authentifizierungsansatz, geeignet für Szenarien, in denen alle Tests dasselbe Testkonto verwenden.
Schritt 1: Authentifizierungs-Setup erstellen
Beispiel
import { test as setup } from '@playwright/test';
// Speicherpfad für den Authentifizierungsstatus angeben
const authFile = 'playwright/.auth/user.json';
setup('authenticate', async ({ page }) => {
// Anmeldevorgang ausführen
await page.goto('https://www.example.com/login');
await page.getByLabel('username').fill('testuser');
await page.getByLabel('password').fill('password123');
await page.getByRole('button', { name: 'Login' }).click();
// Warten, bis die Anmeldung abgeschlossen ist (Seitennavigation oder Erscheinen der Benutzerinformationen bestätigen)
await page.waitForURL(/dashboard/);
// Den aktuellen Authentifizierungsstatus (Cookies, localStorage) in einer Datei speichern
await page.context().storageState({ path: authFile });
});
Schritt 2: Setup-Projekt konfigurieren
Beispiel
import { defineConfig } from '@playwright/test';
export default defineConfig({
projects: [
// Setup-Projekt – wird nur einmal ausgeführt, erzeugt die Authentifizierungsstatus-Datei
{
name: 'setup',
testMatch: /auth\.setup\.ts/,
},
// Eigentliches Testprojekt – verwendet den Authentifizierungsstatus erneut
{
name: 'chromium',
Verwenden Sie: {
storageState: 'playwright/.auth/user.json',
},
dependencies: ['setup'], // Hängt vom Setup-Projekt ab und stellt sicher, dass Setup zuerst ausgeführt wird
},
],
});
Schritt 3: Tests verwenden den Authentifizierungsstatus direkt
Beispiel
import { test, expect } from '@playwright/test';
test('Dashboard anzeigen', async ({ page }) => {
// Direkt auf eine Seite zugreifen, die eine Anmeldung erfordert; die Seite enthält bereits den Authentifizierungsstatus
await page.goto('/dashboard');
await expect(page.getByText('Willkommen zurück, testuser')).toBeVisible();
});
Szenario mit mehreren Konten
Wenn verschiedene Tests unterschiedliche Konten verwenden müssen, können Sie mehrere Authentifizierungsstatus-Dateien erstellen.
Beispiel
test.describe('Admin-Funktionen', () => {
test.use({ storageState: 'playwright/.auth/admin.json' });
test('Benutzer verwalten', async ({ page }) => {
// Aktionen als Administrator ausführen
});
});
// Test für reguläre Benutzer
test.describe('Funktionen für reguläre Benutzer', () => {
test.use({ storageState: 'playwright/.auth/user.json' });
test('Inhalte durchsuchen', async ({ page }) => {
// Aktionen als regulärer Benutzer ausführen
});
});
Authentifizierung über API-Anfrage (Empfohlen)
Der Login-Ablauf über die UI ist langsam; ein effizienterer Weg ist, die Login-API direkt aufzurufen.
Beispiel
import { test as setup } from '@playwright/test';
const authFile = 'playwright/.auth/user.json';
setup('Authentifizierung über API', async ({ request }) => {
// Die Login-API direkt aufrufen, nicht über die Browser-UI
const response = await request.post('https://www.example.com/api/login', {
data: {
username: 'testuser',
password: 'password123',
},
});
// Login-Erfolg bestätigen
const json = await response.json();
console.log('Anmeldung erfolgreich, Token:', json.token);
// Token als Cookie speichern (Browser-Authentifizierungsstatus simulieren)
// Hinweis: storageState muss im Browserkontext gespeichert werden
});
API-Authentifizierung ist schneller und zuverlässiger als UI-Authentifizierung und wird für die vorrangige Verwendung in realen Projekten empfohlen.
Zusammenfassung der anwendbaren Szenarien für Authentifizierungsansätze
| Szenario | Empfohlener Ansatz |
|---|---|
| Alle Tests verwenden dasselbe Testkonto | Setup-Projekt + storageState |
| Verschiedene Testarten benötigen unterschiedliche Konten | Mehrere storageState + test.use |
| Jeder Test benötigt ein unabhängiges Konto | Konto erstellen und sich in jedem Test über die API anmelden |
| Begrenzte Kontoressourcen | Einmal im Setup-Projekt authentifizieren und für alle wiederverwenden |