Testing with Playwright

ChatGPT öffnen

Diese Dokumentation beschreibt den Prozess zum Testen von webforJ-Anwendungen mit Playwright, insbesondere fokussiert auf die HelloWorldView aus dem webforj-archetype-hello-world.

App Grundlagen

Um mehr über das webforj-archetype-hello-world zu erfahren, siehe den Abschnitt Grundlagen der App Einführung.

Voraussetzungen

Bevor Sie die Playwright-Tests schreiben und ausführen, stellen Sie Folgendes sicher:

• Die webforJ-App ist korrekt eingerichtet und läuft auf Ihrem lokalen Server.
• Sie haben Folgendes installiert:
  • Playwright Java-Bindings.
  • Einen kompatiblen Browser (Playwright kann während der Einrichtung automatisch Browser installieren).
  • Maven für Projektabhängigkeiten.

Maven-Konfiguration

Fügen Sie die erforderlichen Abhängigkeiten in Ihrer pom.xml für Playwright hinzu:

pom.xml

<dependencies>
  <dependency>
    <groupId>com.microsoft.playwright</groupId>
    <artifactId>playwright</artifactId>
    <version>1.49.0</version>
    <scope>test</scope>
  </dependency>
  <dependency>
    <groupId>org.junit.jupiter</groupId>
    <artifactId>junit-jupiter-api</artifactId>
    <scope>test</scope>
  </dependency>
</dependencies>

Testbeispiel: HelloWorldView

Der folgende Code demonstriert einen auf Playwright basierenden Test für die HelloWorldView-Komponente.

HelloWorldViewTest.java

package com.example.views;

import static com.microsoft.playwright.assertions.PlaywrightAssertions.assertThat;

import org.junit.jupiter.api.BeforeEach;
import org.junit.jupiter.api.Test;

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;

class HelloWorldViewTest {

  static Playwright playwright = Playwright.create();
  Browser browser;
  Page page;
  String port = System.getProperty("server.port", "8080");

  @BeforeEach
  void setUp() {
    browser = playwright.chromium().launch(); 
    page = browser.newPage();
    page.navigate("http://localhost:" + port + "/");
  }

  @Test
  void shouldClickButton() {
    page.locator("input").fill("webforJ");
    page.getByText("Say Hello").click();

    assertThat(page.locator("dwc-toast").first())
        .containsText("Willkommen bei webforJ Starter webforJ!");
  }
}

Schlüsselschritte

1. Playwright initialisieren:

   • Erstellen Sie eine Playwright-Instanz.
   • Starten Sie eine Browserinstanz mit playwright.chromium().launch().

2. Testumgebung einrichten:

   • Öffnen Sie eine neue Browserseite mit browser.newPage().
   • Navigieren Sie zur HelloWorldView-Seite mit der Methode navigate.

3. Mit Elementen interagieren:

   • Verwenden Sie Playwrights Locator, um mit DOM-Elementen zu interagieren.
   • Füllen Sie Eingabefelder mit locator("input").fill() und triggern Sie Aktionen mit getByText("Say Hello").click().

4. Assertions:

   • Überprüfen Sie die angezeigte Toast-Nachricht mit PlaywrightAssertions.assertThat().

5. Teardown:

   • Playwright kümmert sich automatisch um die Bereinigung des Browsers, wenn der Test abgeschlossen ist. Für manuelle Bereinigung können Sie den Browser mit browser.close() schließen.

Tests ausführen

1. Starten Sie den webforJ-Server:

   mvn jetty:run

2. Führen Sie die Testfälle aus:

   mvn test

Erwartetes Verhalten

• Beim Besuch von http://localhost:<port>/ wird die HelloWorldView-Seite geladen.
• Geben Sie webforJ in das Textfeld ein und klicken Sie auf die Schaltfläche Say Hello.
• Eine Toast-Nachricht sollte mit dem Text erscheinen: Willkommen bei webforJ Starter webforJ!.