Testing with Playwright

In ChatGPT öffnen

Diese Dokumentation beschreibt den Prozess zum Testen von webforJ-Anwendungen mit Playwright, wobei speziell der HelloWorldView aus dem webforj-archetype-hello-world im Fokus steht.

Grundlagen der App

Um mehr über das webforj-archetype-hello-world zu erfahren, beziehen Sie sich auf den Abschnitt Einführung in die Grundlagen.

Voraussetzungen

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

• 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 Browser während der Einrichtung automatisch 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("Welcome to webforJ Starter webforJ!");
  }
}

Wichtige Schritte

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. Interaktion mit Elementen:

   • Verwenden Sie die Locatoren von Playwright, um mit DOM-Elementen zu interagieren.
   • Füllen Sie Eingabefelder mit locator("input").fill() und lösen Sie Aktionen mit getByText("Say Hello").click() aus.

4. Assertions:

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

5. Teardown:

   • Playwright verwaltet automatisch die Bereinigung des Browsers, wenn der Test abgeschlossen ist. Für eine 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 Aufrufen 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: Welcome to webforJ Starter webforJ!.