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.
Zwei Tools namens SIRV und Playwright, die ich gefunden 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?
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.
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 müssen Ihrem Projekt eine neue Datei mit der Erweiterung .spec.test hinzufügen. 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.
Zunächst 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:
Wir können im obigen Test 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: „Kontaktieren Sie Mish und Max“
Empfangene Zeichenfolge: „Kontakt“
Mit anderen Worten: Es wurde erwartet, dass „Kontakt Mish und Max“ angezeigt wird, aber stattdessen steht „Kontakt“. Wenn ich mir meine *.html-Datei ansehe, sehen wir, dass ich zwei
This time, we see the ✔️ and the test passes ?.
Now that you know how to write and run tests with SIRV and Playwright, you can go ahead and write more complex tests. For example, on the same contact form above, I wrote a test—using the help of GitHub Copilot—to check if the contact form can be filled out and submitted:
I can run this test, and step through each part of the test, seeing in the UI where the changes are being made on the website:
Give this a try yourself, and let me know what tests you are writing, and if this guide was helpful.
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!
