So testen Sie Websites: Verwendung von SIRV und Playwright für testgetriebene Entwicklung (TDD)

Ich habe an einigen Websites gearbeitet, für unsere Hochzeit und an einer Website für Lebensmittelübersetzungen zum Übersetzen von Lebensmitteln auf Reisen. Eines der lustigen Dinge, die ich entdeckt habe, ist, wie man diese Websites testet und sicherstellt, dass alles funktioniert.

Was ist testgetriebene Entwicklung (TDD)?

Zwei Tools namens SIRV und Playwright, die ich gefunden habe bzw. von denen mir erzählt wurde, können Ihnen beim Betrieb Ihrer Website und beim Testen von Teilen der Website helfen. Sobald Sie einige Tests durchgeführt und herausgefunden haben, wie Sie die Dinge verbessern können, können Sie auf der Grundlage dieser Tests Aktualisierungen und Änderungen vornehmen. Dies wird als testgetriebene Entwicklung bezeichnet, bei der Tests Lücken in Ihrer Anwendung aufdecken und Sie basierend auf Ihren Tests Änderungen vornehmen.

Normalerweise treten diese Lücken in Form eines fehlgeschlagenen Tests auf. Wenn Sie beispielsweise ein Formular auf Ihrer Website haben und bei der Eingabe von Satzzeichen aufgrund von Ernährungsanforderungen ein Fehler auftritt, können Sie die Formulareingabe ändern, um Satzzeichen zuzulassen. Dadurch wird Ihre Anwendung für Ihre Benutzer besser und Sie verfügen jetzt über neue Funktionen, die auf den von Ihnen durchgeführten Originaltests basieren.

Wie schreiben Sie also Tests für Ihre Bewerbungen?

Was ist SIRV und Dramatiker?

SIRV ist ein statischer Site-Server. Es handelt sich um eine optimierte Middleware für die Bearbeitung von Anfragen an statische Assets. Daher funktioniert SIRV am besten, wenn Sie eine statische Site haben.

Playwright hingegen ist eine Testmethode für Webanwendungen. Wenn wir diese zusammen verwenden, ist Playwright das Tool, das wir zum Schreiben und Ausführen von Tests verwenden werden. SIRV ist die Schnittstelle, über die wir die Ausführung unserer Anwendung sehen und sehen können, welche Tests bestanden werden oder nicht.

Schreibtests

Um Ihren Code zu testen, müssen Sie Tests schreiben. In diesem Beispiel schreibe ich einen Test, um zu sehen, ob ich ein bestimmtes Wort oder eine bestimmte Überschrift auf einer Webseite habe. Ich habe GitHub Copilot verwendet, um einen Test dafür zu schreiben. Die Playwright-Dokumentation gab mir den richtigen Ausgangspunkt für das Schreiben des Tests.

Um Playwright zum Testschreiben verwenden zu können, müssen Sie es importieren. Hier ist der Ausgangspunkt für das Schreiben Ihres Tests:

import { test, Expect } from '@playwright/test';

Ich habe eine Website für unsere Hochzeit erstellt und wollte testen, ob die Überschrift „Mish and Max“ auf der Seite erkannt wurde. Hier ist der Code, mit dem ich das getestet habe:

test('Contact Mish and Max', async ({ page }) => {
    // Navigate to the page
    await page.goto('http://localhost:8080/contact.html');

    // Assert that the title says "Contact Mish and Max"
    await expect(page).toHaveTitle("Contact Mish and Max")
});

Sie fügen Ihrem Projekt eine neue Datei mit der Erweiterung .spec.test hinzu. Stellen Sie sicher, dass Sie es speichern, und speichern Sie es jedes Mal, wenn Sie Änderungen vornehmen. Nachdem wir den Test nun geschrieben haben, können wir ihn ausführen.

Verwendung von SIRV und Playwright zum Testen

Zuerst benötigen Sie Node, damit dies funktioniert. Befolgen Sie die Anleitung in den Node.js-Dokumenten, um Node für Windows, MacOs oder Linux zu installieren.

Wenn Sie bereit sind, Ihren Code zu testen, öffnen Sie ein Terminal in VS Code oder einem Editor Ihrer Wahl. Ich verwende VS-Code, daher verwenden die Demos hier VS-Code. Öffnen Sie das Terminal, indem Sie „Ansicht“ > „Ansicht“ auswählen. Terminal über die Menüleiste oder durch Drücken der Tastenkombination Strg + `.

Sobald Sie das Terminal haben, müssen Sie einige Befehle ausführen:

npm install @playwright/test – dies richtet die Playwright-Tests ein, indem die Testbibliothek installiert wird.

Npx Playwright-Installation – lädt eine Testversion von Chrome, Firefox, Safari und anderen herunter.

npx sirv-cli . – Dadurch wird die lokale Version von SIRV zum Testen ausgeführt.

Da Sie nun SIRV und Playwright eingerichtet und bereit haben, können wir die Tests durchführen. Öffnen Sie ein neues Terminal in VS Code (oder einem Editor Ihrer Wahl) und führen Sie den folgenden Befehl aus:

npx playwright test --ui Dadurch wird der Test ausgeführt und ein neues Fenster geöffnet, in dem wir die Tests ausführen und sehen können, wie sie ausgeführt werden.

Hier sind alle oben aufgeführten Befehle:

Playwright-Terminal-Testfenster:

Den Test lesen und korrigieren

Im obigen Test können wir sehen, dass es beim Ausführen fehlschlägt. Wenn wir untersuchen, warum dies geschieht, können wir feststellen, wie wir es beheben können. Auf der Registerkarte „Fehler“ können wir sehen, welcher Fehler aufgetreten ist:

In diesem Fall heißt es:

Erwartete Zeichenfolge: „Mish und Max kontaktieren“
Empfangene Zeichenfolge: „Kontakt“

Mit anderen Worten: Es wird erwartet, dass „Mish und Max kontaktieren“ empfangen wird, stattdessen aber „Kontakt“ angezeigt wird. Wenn ich mir meine *.html-Datei ansehe, sehen wir, dass ich zwei ändern. Jetzt können wir den Test erneut durchführen:

Dieses Mal sehen wir das ✔️ und der Test besteht ?.

Tests schreiben und Code schreiben

Da Sie nun wissen, wie Sie Tests mit SIRV und Playwright schreiben und durchführen, können Sie komplexere Tests schreiben. Zum Beispiel habe ich im oben genannten Kontaktformular mithilfe von GitHub Copilot einen Test geschrieben, um zu prüfen, ob das Kontaktformular ausgefüllt und übermittelt werden kann:

Ich kann diesen Test ausführen und jeden Teil des Tests Schritt für Schritt durchgehen und in der Benutzeroberfläche sehen, wo auf der Website die Änderungen vorgenommen werden:

Probieren Sie es selbst aus und lassen Sie mich wissen, welche Tests Sie schreiben und ob dieser Leitfaden hilfreich war.

Das obige ist der detaillierte Inhalt vonSo testen Sie Websites: Verwendung von SIRV und Playwright für testgetriebene Entwicklung (TDD). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!