Adding Quarkus Playwright integration

Signed-off-by: Eric Deandrea <edeandrea@redhat.com>

rest-heroes/README.md

@@ -4,6 +4,7 @@
 - [Introduction](#introduction)
     - [Exposed Endpoints](#exposed-endpoints)
 - [Contract testing with Pact](#contract-testing-with-pact)
+- [End-to-End UI testing with Playwright](#end-to-end-ui-testing-with-playwright)
 - [Benchmarking with Hyperfoil](#benchmarking-with-hyperfoil)
 - [Running the Application](#running-the-application)
 - [Running Locally via Docker Compose](#running-locally-via-docker-compose)
@@ -58,6 +59,11 @@ scenario, if a broker wasn't used, the consumer's CI/CD would commit the contrac
 
 The Pact tests use the [Quarkus Pact extension](https://github.com/quarkiverse/quarkus-pact). This extension is recommended to give the best user experience and ensure compatibility.
 
+## End-to-End UI testing with Playwright
+The [application UI](#running-the-application) is tested using [Playwright](https://playwright.dev/java). We are using the [Quarkus Playwright extension](https://docs.quarkiverse.io/quarkus-playwright/dev) for this.
+
+During tests, the UI is loaded in a headless browser and interactions are tested during unit and integration tests. See [`UIResourceTests`](src/test/java/io/quarkus/sample/superheroes/hero/rest/UIResourceTests.java) and [`UIResourceIT`](src/test/java/io/quarkus/sample/superheroes/hero/rest/UIResourceIT.java) for details.
+
 ## Benchmarking with Hyperfoil
 There are some [Hyperfoil benchmarks](https://hyperfoil.io) in [this directory](hyperfoil). See [the README](hyperfoil/README.md) for more details.
 

rest-heroes/pom.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0"?>
 <project xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd" xmlns="http://maven.apache.org/POM/4.0.0"
-    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
+         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
   <modelVersion>4.0.0</modelVersion>
   <groupId>io.quarkus.sample.super-heroes</groupId>
   <artifactId>rest-heroes</artifactId>
@@ -136,6 +136,12 @@
       <version>${pact.version}</version>
       <scope>provided</scope> <!-- See https://github.com/quarkiverse/quarkus-pact/issues/28 -->
     </dependency>
+    <dependency>
+      <groupId>io.quarkiverse.playwright</groupId>
+      <artifactId>quarkus-playwright</artifactId>
+      <version>0.0.1</version>
+      <scope>test</scope>
+    </dependency>
   </dependencies>
   <build>
     <plugins>

rest-heroes/src/main/resources/templates/UIResource/index.html

@@ -101,7 +101,7 @@
                 aria-label="Heroes table"
                 id="heroes-table">
             <thead>
-            <tr role="row">
+            <tr role="rowheader">
                 <th role="columnheader" scope="col">ID</th>
                 <th role="columnheader" scope="col">Name</th>
                 <th role="columnheader" scope="col">Picture</th>

rest-heroes/src/test/java/io/quarkus/sample/superheroes/hero/rest/UIResourceIT.java

@@ -0,0 +1,7 @@
+package io.quarkus.sample.superheroes.hero.rest;
+
+import io.quarkus.test.junit.QuarkusIntegrationTest;
+
+@QuarkusIntegrationTest
+class UIResourceIT extends UIResourceTests {
+}

rest-heroes/src/test/java/io/quarkus/sample/superheroes/hero/rest/UIResourceTests.java

@@ -0,0 +1,152 @@
+package io.quarkus.sample.superheroes.hero.rest;
+
+import static org.assertj.core.api.Assertions.*;
+
+import java.net.URL;
+import java.util.List;
+
+import jakarta.ws.rs.core.Response.Status;
+
+import org.junit.jupiter.api.Test;
+
+import io.quarkus.sample.superheroes.hero.Hero;
+import io.quarkus.test.common.http.TestHTTPResource;
+import io.quarkus.test.junit.QuarkusTest;
+
+import com.microsoft.playwright.BrowserContext;
+import com.microsoft.playwright.Locator;
+import com.microsoft.playwright.Page;
+import com.microsoft.playwright.Response;
+import com.microsoft.playwright.options.AriaRole;
+import io.quarkiverse.playwright.InjectPlaywright;
+import io.quarkiverse.playwright.WithPlaywright;
+
+@QuarkusTest
+@WithPlaywright
+class UIResourceTests {
+  private static final int NB_HEROES = 100;
+  private static final Hero SPIDERMAN = getSpiderman();
+
+  @InjectPlaywright
+  BrowserContext browserContext;
+
+  @TestHTTPResource("/")
+  URL index;
+
+  @Test
+  public void indexLoads() {
+    var page = loadPage();
+
+    assertThat(page.title())
+      .isNotNull()
+      .isEqualTo("Heroes List");
+  }
+
+  @Test
+  public void correctTable() {
+    var table = getAndVerifyTable(NB_HEROES);
+
+    assertThat(table)
+      .isNotNull();
+
+    var tableColumns = table.getByRole(AriaRole.COLUMNHEADER).all();
+    assertThat(tableColumns)
+      .isNotNull()
+      .hasSize(6)
+      .extracting(Locator::textContent)
+      .containsExactly(
+        "ID",
+        "Name",
+        "Picture",
+        "Other Name",
+        "Level",
+        "Powers"
+      );
+  }
+
+  @Test
+  public void tableFilters() {
+    var page = loadPage();
+    getAndVerifyTable(page, NB_HEROES);
+
+    // Fill in the filter
+    page.getByPlaceholder("Filter by name").fill(SPIDERMAN.getName());
+
+    // Click the filter button
+    page.getByText("Filter Heroes").click();
+
+    // Get and verify the correct thing shows after the filter
+    var table = getAndVerifyTable(page, 1);
+    var tableRows = table.getByRole(AriaRole.ROW).all();
+
+    assertThat(tableRows)
+      .isNotNull()
+      .hasSize(1);
+
+    var tableCells = tableRows.get(0).getByRole(AriaRole.CELL).all();
+    assertThat(tableCells)
+      .isNotNull()
+      .hasSize(6);
+
+    // For the ID field, just test that it's there
+    assertThat(tableCells.get(0).textContent())
+      .isNotNull()
+      .isNotEmpty();
+
+    // For the Name, Picture, Other Name, Level, and powers fields, assert the values
+    var textValues = List.of(
+      tableCells.get(1).textContent(),
+      tableCells.get(2).getByRole(AriaRole.LINK).getAttribute("href"),
+      tableCells.get(3).textContent(),
+      tableCells.get(4).textContent(),
+      tableCells.get(5).textContent()
+    );
+
+    assertThat(textValues)
+      .satisfies(name -> assertThat(name).isEqualTo(SPIDERMAN.getName()), atIndex(0))
+      .satisfies(picture -> assertThat(picture).isEqualTo(SPIDERMAN.getPicture()), atIndex(1))
+      .satisfies(otherName -> assertThat(otherName).isEqualTo(SPIDERMAN.getOtherName()), atIndex(2))
+      .satisfies(level -> assertThat(level).isEqualTo(String.valueOf(SPIDERMAN.getLevel())), atIndex(3))
+      .satisfies(powers -> assertThat(powers).contains(SPIDERMAN.getPowers()), atIndex(4));
+  }
+
+  private Page loadPage() {
+    var page = this.browserContext.newPage();
+    var response = page.navigate(this.index.toString());
+
+    assertThat(response)
+      .isNotNull()
+      .extracting(Response::status)
+      .isEqualTo(Status.OK.getStatusCode());
+
+    return page;
+  }
+
+  private Locator getAndVerifyTable(Page page, int expectedNumRows) {
+    var table = page.getByRole(AriaRole.GRID);
+
+    assertThat(table)
+      .isNotNull();
+
+    var tableRowCount = table.getByRole(AriaRole.ROW).count();
+    assertThat(tableRowCount)
+      .isEqualTo(expectedNumRows);
+
+    return table;
+  }
+
+  private Locator getAndVerifyTable(int expectedNumRows) {
+    return getAndVerifyTable(loadPage(), expectedNumRows);
+  }
+
+  private static Hero getSpiderman() {
+    var spiderman = new Hero();
+    spiderman.setName("Spider-Man");
+    spiderman.setOtherName("Peter Parker");
+    spiderman.setPicture("https://raw.githubusercontent.com/quarkusio/quarkus-super-heroes/characterdata/images/peter-parker--4751586759819899264.jpg");
+    spiderman.setPowers("Acrobatics, Agility, Durability, Enhanced Senses, Intelligence, Reflexes, Stamina, Super Speed, Super Strength, Accelerated Healing, Animal Attributes, Animal Oriented Powers, Cold Resistance, Dexterity, Endurance, Enhanced Hearing, Enhanced Memory, Enhanced Sight, Enhanced Smell, Enhanced Touch, Gliding, Heat Resistance, Indomitable Will, Jump, Pressure Points, Stealth, Surface Scaling, Toxin and Disease Resistance, Wallcrawling, Weapon-based Powers, Web Creation, Danger Sense, Energy Blasts");
+    spiderman.setLevel(93);
+
+    return spiderman;
+  }
+}

rest-villains/README.md

@@ -4,6 +4,7 @@
 - [Introduction](#introduction)
     - [Exposed Endpoints](#exposed-endpoints) 
 - [Contract testing with Pact](#contract-testing-with-pact)
+- [End-toEnd UI testing with Playwright](#end-to-end-ui-testing-with-playwright)
 - [Benchmarking with Hyperfoil](#benchmarking-with-hyperfoil)
 - [Running the Application](#running-the-application)
 - [Running Locally via Docker Compose](#running-locally-via-docker-compose)
@@ -56,6 +57,11 @@ scenario, if a broker wasn't used, the consumer's CI/CD would commit the contrac
 
 The Pact tests use the [Quarkus Pact extension](https://github.com/quarkiverse/quarkus-pact). This extension is recommended to give the best user experience and ensure compatibility.
 
+## End-to-End UI testing with Playwright
+The [application UI](#running-the-application) is tested using [Playwright](https://playwright.dev/java). We are using the [Quarkus Playwright extension](https://docs.quarkiverse.io/quarkus-playwright/dev) for this.
+
+During tests, the UI is loaded in a headless browser and interactions are tested during unit and integration tests. See [`UIResourceTests`](src/test/java/io/quarkus/sample/superheroes/villain/rest/UIResourceTests.java) and [`UIResourceIT`](src/test/java/io/quarkus/sample/superheroes/villain/rest/UIResourceIT.java) for details.
+
 ## Benchmarking with Hyperfoil
 There are some [Hyperfoil benchmarks](https://hyperfoil.io) in [this directory](hyperfoil). See [the README](hyperfoil/README.md) for more details.
 

rest-villains/pom.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0"?>
 <project xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd" xmlns="http://maven.apache.org/POM/4.0.0"
-    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
+         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
   <modelVersion>4.0.0</modelVersion>
   <groupId>io.quarkus.sample.super-heroes</groupId>
   <artifactId>rest-villains</artifactId>
@@ -136,6 +136,12 @@
       <version>${pact.version}</version>
       <scope>provided</scope> <!-- See https://github.com/quarkiverse/quarkus-pact/issues/28 -->
     </dependency>
+    <dependency>
+      <groupId>io.quarkiverse.playwright</groupId>
+      <artifactId>quarkus-playwright</artifactId>
+      <version>0.0.1</version>
+      <scope>test</scope>
+    </dependency>
   </dependencies>
   <build>
     <plugins>

rest-villains/src/main/resources/templates/UIResource/index.html

@@ -101,7 +101,7 @@
                 aria-label="Villains table"
                 id="villains-table">
             <thead>
-            <tr role="row">
+            <tr role="rowheader">
                 <th role="columnheader" scope="col">ID</th>
                 <th role="columnheader" scope="col">Name</th>
                 <th role="columnheader" scope="col">Picture</th>

rest-villains/src/test/java/io/quarkus/sample/superheroes/villain/rest/UIResourceIT.java

@@ -0,0 +1,7 @@
+package io.quarkus.sample.superheroes.villain.rest;
+
+import io.quarkus.test.junit.QuarkusIntegrationTest;
+
+@QuarkusIntegrationTest
+class UIResourceIT extends UIResourceTests {
+}