Testen ist entscheidend für Softwarequalität
Das Testen ist entscheidend, um sicherzustellen, dass ein Softwareprodukt wie erwartet funktioniert. Traditionell führen QA-Teams viele End-to-End-Tests für Webanwendungen manuell durch. QA-Teams investieren jedoch erheblich viel Aufwand in die Vorbereitung von Testdaten, die Implementierung der Tests und deren Pflege im Laufe der Zeit. Die Tests sind zudem fehleranfällig, da sie die Integration zwischen mehreren Diensten, Drittanbieterabhängigkeiten und Datenbanken erfordern. Diese Probleme zeigen, warum Komponententests für Webanwendungen wichtig sind und zunehmend sowohl von Softwareentwicklern als auch QA-Ingenieuren beachtet werden. Komponententests ermöglichen es, die grafische Benutzeroberfläche (GUI) frühzeitig zu testen, und sie verringern den Zeit- und Arbeitsaufwand für die Implementierung, Erstellung, Ausführung und Pflege der Tests im Laufe der Zeit.
Playwright: Ein Tool für Komponententests
Playwright, ein praktisches Werkzeug für End-to-End-Tests und die allgemeine Interaktion mit Webbrowsern, unterstützt seit kurzem auch Komponententests. Es ermöglicht Entwicklern, Tests für ihre GUI zu schreiben, ohne darauf zu warten, dass Back-End-Dienste abgeschlossen sind, und ohne viele Mock-APIs in Mock-Servern zu erstellen. Darüber hinaus bietet Playwright Funktionen, die Komponententests mit einigen beliebten Webframeworks wie React unterstützen, einer Open-Source-JavaScript-Bibliothek für den Aufbau von Benutzeroberflächen. Es unterstützt auch wichtige Browser wie Chromium, Firefox und WebKit-basierte Browser. Außerdem können Sie mehrere Programmiersprachen wie Java, Python, C# oder Node.js verwenden, um Tests in Playwright zu schreiben.
In diesem Tutorial
In diesem Tutorial implementieren Sie Playwright für Komponententests mit einer bestehenden React-Anwendung. Sie werden eine Wetter-App mit React bereitstellen und dann Playwright verwenden, um Komponententests für die App zu schreiben und auszuführen, um sicherzustellen, dass die Komponenten ordnungsgemäß funktionieren.
Voraussetzungen
Um dieses Tutorial zu befolgen, benötigen Sie Folgendes:
- Einen Ubuntu-20.04-Server mit einem sudo-fähigen, nicht-root-Benutzer und mindestens 2 GB RAM. Beginnen Sie mit unserem Leitfaden zur Ersteinrichtung eines Servers unter Ubuntu 20.04.
- Node.js Version 16 oder höher, eingerichtet auf Ihrem Server. Um Node.js zu installieren, folgen Sie Option 2 unseres Tutorials „Wie man Node.js unter Ubuntu 20.04 installiert“, um sicherzustellen, dass Sie die richtige Version installieren.
- Git, auf dem Server installiert. Lesen Sie unser Tutorial „Wie man Git unter Ubuntu 20.04 installiert“, falls Git noch nicht installiert ist.
- Vertrautheit mit der Front-End-Entwicklung unter Verwendung von JavaScript mit React.
- Kenntnisse in End-to-End-Tests, Komponententests und API-Tests.
Schritt 1 — Bereitstellen einer Wetter-App mit React
In diesem Schritt stellen Sie die React-basierte Wetter-App bereit, die Sie für dieses Tutorial benötigen. Die App verwendet die kostenlose Version der APIs von OpenWeather, um aktuelle Wetterdaten für beliebige Städte abzurufen.
Um die App auf Ihrem Server bereitzustellen, erstellen Sie zuerst ein neues Verzeichnis, um den Code für die Anwendung zu speichern, und wechseln Sie dann in das neu erstellte Verzeichnis. Ersetzen Sie dabei „Projects“ durch den gewünschten Verzeichnisnamen:
mkdir Projects cd Projects
Klonen Sie anschließend den Anwendungscode von GitHub:
git clone https://github.com/do-community/react-component-testing-demo.git
Schritt 2 — Installieren der Testabhängigkeiten
In diesem Schritt installieren Sie die Testabhängigkeiten, damit Sie später in Schritt 3 Komponententests mit Playwright implementieren können.
Beginnen Sie, indem Sie den folgenden Befehl ausführen:
npm init playwright@latest -- --ct
Dieser Befehl startet den Codegenerierungsprozess, mit dem Sie Tests mit Playwright schreiben können. Je nach Ihrer Auswahl – ob Sie TypeScript oder JavaScript verwenden oder das React-Framework oder das Vue-Framework für die Entwicklung nutzen – wird der generierte Code unterschiedlich ausfallen.
Sie erhalten die folgende Ausgabe in Ihrer Konsole:
Need to install the following packages: create-playwright@1.17.123 Ok to proceed? (y)
Drücken Sie „Y“ und anschließend „Enter“, um fortzufahren. Sie haben dann die Möglichkeit, auszuwählen, ob Sie TypeScript oder JavaScript in Ihrem Projekt verwenden möchten:
Getting started with writing end-to-end tests with Playwright: Initializing project in '.' ? Do you want to use TypeScript or JavaScript? … TypeScript ▸ JavaScript
Wählen Sie JavaScript, da Sie dies später in Schritt 3 für Komponententests verwenden werden. Anschließend fragt die Ausgabe, welches Framework Sie verwenden möchten:
? Which framework do you use? (experimental) … ▸ react vue svelte
Wählen Sie „React“, da dies das Framework ist, das die Wetteranwendung verwendet. Anschließend fragt die Ausgabe, ob Sie die Playwright-Browser installieren möchten:
? Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) ‣ true
Wählen Sie „Y“, um die Browser zu installieren, damit Sie dies später nicht manuell durchführen müssen.
Als Nächstes werden Sie gefragt, ob Sie die Betriebssystemabhängigkeiten installieren möchten:
Install Playwright operating system dependencies (requires sudo / root - can be done manually via 'sudo npx playwright install-deps')? (y/N) ‣ yes
Wählen Sie „Y“, damit Sie die Abhängigkeiten nicht manuell installieren müssen. Beachten Sie, dass Sie das Benutzerpasswort für die Maschine eingeben müssen, auf der Sie derzeit arbeiten, um die Systemabhängigkeiten zu installieren.
Alle notwendigen Abhängigkeiten sowie drei Browser (Chromium, Firefox und WebKit) werden nun installiert. Außerdem wird ein neues Verzeichnis namens
playwrighterstellt, das die Dateienindex.htmlundindex.jsenthält, die für das Rendern der Komponenten während des Tests benötigt werden. Außerdem wird eine neue Konfigurationsdatei namensplaywright-ct.config.jsgeneriert, mit der die Komponententests ausgeführt werden. Sie können diese Konfigurationsdatei anpassen, um das Verhalten der Komponententests zu ändern, beispielsweise um sie nur im Chromium-Browser auszuführen.Hinweis: Das Skript
test-ctsollte automatisch in der Dateipackage.jsonwie unten angezeigt generiert werden:"scripts": { "start": "react-scripts start", "test-ct": "playwright test -c playwright-ct.config.js" },
Sie haben die Abhängigkeiten für Komponententests jetzt eingerichtet. Im nächsten Schritt schreiben Sie den Test für eine der beiden Wetter-App-Komponenten.
Schritt 3 — Schreiben des Komponententests für die CityComponent
Die Wetter-App hat zwei Komponenten:
CityComponentundWeatherInfoComponent. In diesem Schritt schreiben Sie das Skript für den Komponententest derCityComponent. In diesem Code werden Sie zwei Tests für dieCityComponentschreiben. Der erste Test überprüft, ob das Eingabefeld für die Stadt Text akzeptiert. Der zweite Test überprüft, ob die Schaltfläche „Suchen“ die MethodefetchWeathernach dem Klick ausführt.Beginnen Sie, indem Sie in das
src-Verzeichnis wechseln:cd src
Erstellen Sie anschließend das Verzeichnis
tests, um Ihren Test zu speichern:mkdir tests
Wechseln Sie danach in das neu erstellte Verzeichnis:
cd tests
Erstellen und öffnen Sie nun in dem Verzeichnis
testseine neue Testdatei mit dem NamenCityComponent.spec.jsxmithilfe von nano oder Ihrem bevorzugten Code-Editor:nano CityComponent.spec.jsx
Fügen Sie den folgenden Code in Ihre Datei ein:
import { test, expect } from '@playwright/experimental-ct-react'; import { CityComponent } from '../modules/CityComponent'; const cityLocator = '[placeholder="City"]'; const searchButtonLocator = '[type="submit"]'; const cityName = 'Hanoi'; test('cityField accepts text input', async ({ mount }) => { const cityComponent = await mount(); const cityField = cityComponent.locator(cityLocator); await cityField.fill(cityName); await expect(cityField).toHaveValue(cityName); }); test('Click on `Search` button executes fetchWeather prop', async ({ mount }) => { let isCalled = false; const cityComponent = await mount( isCalled = true} /> ); await cityComponent.locator(cityLocator).fill(cityName); await cityComponent.locator(searchButtonLocator).click(); expect(isCalled).toBeTruthy(); });
Speichern und schließen Sie Ihre Datei. Wenn Sie nano verwenden, speichern und beenden Sie mit
CTRL+X.Sie haben nun das Skript für den Komponententest der
CityComponentgeschrieben, das zwei Testblöcke enthält – einen, der überprüft, ob das Eingabefeld für die Stadt den Wert „Hanoi“ akzeptiert, und einen, der überprüft, ob die Schaltfläche „Suchen“ die MethodefetchWeathernach dem Klicken ausführt. Im nächsten Schritt schreiben Sie den Komponententest für die zweite Wetter-App-Komponente,WeatherInfoComponent.Schritt 4 — Schreiben des Komponententests für WeatherInfoComponent
In diesem Schritt schreiben Sie den Test für
WeatherInfoComponent, die zweite Komponente der Wetter-App, die Sie testen. Der Test überprüft, ob die KomponenteWeatherInfoComponentden Text „Hanoi“ enthält, nachdem sie „Hanoi“ als Eingabe fürweatherInfoerhalten hat.Erstellen und öffnen Sie zuerst im Verzeichnis
testseine neue Testdatei mit dem NamenWeatherInfoComponent.spec.jsx:nano WeatherInfoComponent.spec.jsx
Fügen Sie den folgenden Inhalt in die Datei
WeatherInfoComponent.spec.jsxein:import { test, expect } from '@playwright/experimental-ct-react'; import { WeatherComponent } from '../modules/WeatherInfoComponent'; test('WeatherInfo accepts name and value', async ({ mount }) => { const weatherInfo = { "coord": { "lon": 105.8412, "lat": 21.0245 }, "weather": [{ "id": 800, "main": "Clear", "description": "clear sky", "icon": "01n" }], "main": { "temp": 302.15, "pressure": 1003, "humidity": 35 }, "name": "Hanoi" }; const weatherComponent = await mount(); await expect(weatherComponent).toContainText('Hanoi'); });
Speichern und schließen Sie Ihre Datei mit
CTRL+X.Sie haben den Test für die Komponente
WeatherInfoComponenterfolgreich geschrieben. Im nächsten Schritt führen Sie die Tests fürCityComponentundWeatherInfoComponentin allen drei installierten Browsern aus.Schritt 5 — Ausführen der Komponententests
In diesem Schritt führen Sie die Tests für
CityComponentundWeatherInfoComponentin allen drei installierten Browsern – Chromium, Firefox und WebKit – aus, um sicherzustellen, dass die beiden Komponenten in diesen Browsern ordnungsgemäß funktionieren.Wechseln Sie zuerst in das Hauptprojektverzeichnis:
cd ../..
Nachdem Sie den Befehl ausgeführt haben, befinden Sie sich im Verzeichnis
react-component-testing-demo. Führen Sie dann den folgenden Befehl aus, um die Tests auszuführen:npm run test-ct
Playwright wird die beiden Testdateien für alle drei Browser – Chromium, Firefox und WebKit – ausführen. Sie erhalten eine Ausgabe, die in etwa so aussieht:
Running 9 tests using 2 workers vite v3.2.5 building for production... ✓ 89 modules transformed. playwright/.cache/playwright/index.html 0.32 KiB playwright/.cache/assets/index.2b5442e2.js 313.68 KiB / gzip: 81.07 KiB 9 passed (12s) To open last HTML report run: npx playwright show-report
Um den Bericht im GUI-Format anzuzeigen, führen Sie den folgenden Befehl aus:
npx playwright show-report
Hinweis: Wenn Sie diese Befehle auf einem lokalen Computer ausführen, der eine grafische Benutzeroberfläche (GUI) unterstützt und bereits über einen Browser wie Chrome oder Firefox verfügt, wird die Wetter-App automatisch in Ihrem Browser geöffnet. Wenn Sie diese Befehle jedoch auf einem Remote-Server ausführen, müssen Sie Port-Weiterleitung über SSH verwenden, um die App auf Ihrem lokalen Computer zu öffnen.
Öffnen Sie in einem neuen Terminal die Verbindung mit folgendem Befehl:
ssh -L 9223:localhost:9223 your_non_root_user@your_server_ip
Sie können nun von Ihrem lokalen Computer aus auf den Testbericht zugreifen.
Überprüfung des Testberichts
Die Übersicht des Testberichts wird in Ihrem Browser angezeigt:
Der Testbericht ist in die drei verschiedenen Tests unterteilt:
cityField accepts text input,Click on Search button executes fetchWeather propundWeatherInfo accepts name and value. Jeder Test zeigt die Gesamtzeit, die der Test benötigt hat, sowie die Dauer, die er in jedem Browser in Anspruch genommen hat.Wenn Sie auf jeden Test klicken – zum Beispiel
cityField accepts text input–, erhalten Sie Details zu den Zeiten und den Codezeilen für jeden Schritt des Tests.Die Ergebnisse zeigen, dass der
CityComponent-Test, der überprüft, ob das Eingabefeld für die Stadt Text als Eingabe akzeptiert, erfolgreich in Chromium ausgeführt wurde. Im Detailbereich enthalten die Testausführungsabschnitte standardmäßig „Before Hooks“ und „After Hooks“. Der Abschnitt „Before Hooks“ wird häufig für die anfängliche Einrichtung verwendet, z. B. zum Einloggen in die Konsole oder zum Lesen von Testdaten. Nach der Testausführung reinigt der Abschnitt „After Hooks“ häufig die Testdaten in der Testumgebung.Fazit
Sie haben Playwright erfolgreich verwendet, um Komponententests für eine React-basierte Wetter-App zu implementieren. Zuerst haben Sie die notwendigen Testabhängigkeiten für die Wetter-App-Komponenten
CityComponentundWeatherInfoComponentinstalliert. Anschließend haben Sie die Komponententests für die beiden Komponenten geschrieben und ausgeführt. Schließlich haben Sie den Testbericht im GUI-Format überprüft, um sicherzustellen, dass die Komponenten wie erwartet funktionieren.Weitere Informationen zu Playwright und anderen unterstützten Funktionen für Komponententests finden Sie in der Playwright-Dokumentation.
