Wenn du End-to-End-Tests mit Playwright schreibst, gehören Assertions zu den wichtigsten Bestandteilen deiner Tests. Während Methoden wie click() oder fill() Aktionen im Browser ausführen, sorgen Assertions dafür, dass dein Test überprüft, ob das erwartete Ergebnis tatsächlich eingetreten ist.
Ein großer Vorteil von Playwright ist, dass Assertions bereits im Testframework von Playwright enthalten sind. Du brauchst also keine zusätzliche Assertion-Library wie Chai zu installieren.
In diesem Tutorial zeige ich dir zunächst 15 wichtige Playwright Assertions, die du in den meisten Testautomatisierungsprojekten sicherlich brauchen wirst. Zu allen Assertions möchte ich konkrete Beispiele anhand der Startseite von https://walter-test-engineering.de/ sowie https://walter-test-engineering.de/testlab/ (ab Beispiel 5) aufzeigen.
Was sind Assertions?
Bei der Testautomatisierung reicht es nicht aus, nur Aktionen im Browser auszuführen. Ein automatisierter Test muss auch überprüfen, ob das erwartete Ergebnis tatsächlich eingetreten ist. Genau dafür werden Assertions verwendet.
1. toBeVisible()
Diese Assertion prüft, ob ein Element im Browser sichtbar ist.
await expect(page.locator('#login-button')).toBeVisible();
Typischer Einsatz:
- prüfen, ob Buttons angezeigt werden
- prüfen, ob Fehlermeldungen erscheinen
Beispiel:
Im nachfolgenden Beispiel prüfen wir die Sichtbarkeit des Header-Link – Wir stellen also sicher, dass der Hauptlink mit dem Text „Walter-Test-Engineering.de“ auf der Website sichtbar ist.
❗Hinweis: Ich zeige nachfolgend nicht für jede Assertion ein separates Testergebnis. Ein zusammengefasster Testbericht zum Schluss mit allen hier gezeigten Assertions muss ausreichen 🙂
2. toBeHidden()
Prüft, ob ein Element nicht sichtbar ist.
await expect(page.locator('#loading-spinner')).toBeHidden();
Sehr nützlich für:
- Ladeanimationen
- modale Fenster
Beispiel:
3. toHaveText()
Überprüft den exakten Text eines Elements.
await expect(page.locator('h1')).toHaveText('Dashboard');Beispiel:
4. toContainText()
Prüft, ob ein Element einen bestimmten Text enthält.
await expect(page.locator('.message')).toContainText('success');
Diese Assertion ist flexibler als toHaveText().
Beispiel:
❗Wie oben angemerkt, werden die nachfolgenden Beispiele auf der Unterseite https://walter-test-engineering.de/testlab/ fortgesetzt.
5. toHaveValue()
Prüft den Wert eines Eingabefeldes.
await expect(page.locator('#email')).toHaveValue('test@example.com');
Sehr nützlich für:
- Formularvalidierung
- Login-Tests
Beispiel:
6. toBeChecked()
Prüft, ob eine Checkbox oder ein Radio-Button aktiviert ist.
await expect(page.locator('#terms')).toBeChecked();
Beispiel:
7. toHaveAttribute()
Überprüft ein HTML-Attribut.
await expect(page.locator('#link')).toHaveAttribute('href', '/dashboard');
Beispiel:
8. toHaveClass()
Prüft, ob ein Element eine bestimmte CSS-Klasse hat.
await expect(page.locator('#menu')).toHaveClass('active');
Sehr hilfreich für:
- aktive Menüs
- Statusanzeigen
Beispiel:
9. toHaveURL()
Prüft die aktuelle URL der Seite.
await expect(page).toHaveURL('https://example.com/dashboard');
Oder mit Regex:
await expect(page).toHaveURL(/dashboard/);
Beispiel:
10. toHaveTitle()
Überprüft den Titel der Webseite.
await expect(page).toHaveTitle('My Application');
Beispiel:
11. toHaveCount()
Prüft die Anzahl von Elementen.
await expect(page.locator('.product')).toHaveCount(5);
Typische Anwendungsfälle:
- Produktlisten
- Suchergebnisse
- Tabellen
Beispiel:
12. toBeEnabled()
Prüft, ob ein Element aktiv ist.
await expect(page.locator('#submit')).toBeEnabled();
Beispiel:
13. toBeDisabled()
Prüft, ob ein Element deaktiviert ist.
await expect(page.locator('#submit')).toBeDisabled();
Beispiel:
14. toBeEditable()
Überprüft, ob ein Feld editierbar ist.
await expect(page.locator('#username')).toBeEditable();
Das ist besonders hilfreich bei Formularen.
Beispiel:
15. toHaveScreenshot()
Vergleicht einen Screenshot mit einem gespeicherten Referenzbild.
await expect(page).toHaveScreenshot();
Diese Assertion wird häufig für visuelle Regressionstests verwendet.
Beispiel:
Abschließender Bericht
Hier werfen wir einen Blick auf den abschließenden Testbericht, der aus der Ausführung aller zuvor vorgestellten Assertions hervorgegangen ist.
Anstatt jede einzelne Assertion isoliert zu betrachten, zeigt der Bericht das Gesamtergebnis des Testlaufs und gibt einen kompakten Überblick darüber, ob die geprüften Funktionalitäten erfolgreich validiert wurden. 🙂
Siehe da, alle Assertions wurden bestanden :).
Ein großer Vorteil von Playwright Assertions
Die Assertions in Playwright besitzen ein Feature namens Auto-Waiting.
Das bedeutet:
await expect(locator).toBeVisible();
Playwright wartet automatisch, bis:
- das Element sichtbar wird
- oder ein Timeout erreicht wird
Dadurch werden Tests deutlich stabiler und weniger fehleranfällig als bei vielen klassischen Testautomatisierungsansätzen.
Abschließende Worte
Assertions sind ein zentraler Bestandteil moderner Testautomatisierung. Mit den 15 wichtigen Playwright Assertions hier kannst du bereits einen großen Teil deiner End-to-End-Tests abdecken, z.B.:
- UI-Validierungen
- Formularprüfungen
- Navigationstests
- visuelle Regressionstests
Durch die integrierte Assertion-Engine von Playwright lassen sich Tests außerdem einfacher und stabiler schreiben, und du brauchst keine erweiterten Frameworks wie Chai, wenn Du Selenium verwendest.
Weiterführende Links
Hier gibt’s den ganzen Katalog an Assertions: