test: add Playwright end-to-end example for FormView (#16)
CI / build-and-test (pull_request) Successful in 2m16s
CI / build-and-test (pull_request) Successful in 2m16s
Adds the first browser-driven test to the project: PlaywrightTestBase starts the app on a random port and drives a headless Chromium against it, and FormViewPlaywrightTest covers the form's rendering, binder validation and the save/reset buttons. The tests skip themselves via a JUnit assumption when no browser can be launched, so runners without Playwright browsers stay green. Closes #16 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Ue9ZtWUBQF4SuSHpzZ3zwq
This commit is contained in:
@@ -0,0 +1,86 @@
|
||||
package com.example.e2e;
|
||||
|
||||
import com.microsoft.playwright.Locator;
|
||||
import com.microsoft.playwright.Page;
|
||||
import com.microsoft.playwright.options.AriaRole;
|
||||
import org.junit.jupiter.api.BeforeEach;
|
||||
import org.junit.jupiter.api.Test;
|
||||
|
||||
import static com.microsoft.playwright.assertions.PlaywrightAssertions.assertThat;
|
||||
|
||||
/**
|
||||
* End-to-end example covering {@link com.example.views.FormView}: rendering,
|
||||
* binder validation and the two form buttons. Captions are English — see
|
||||
* {@link PlaywrightTestBase#openPage()} for why.
|
||||
*/
|
||||
class FormViewPlaywrightTest extends PlaywrightTestBase {
|
||||
|
||||
@BeforeEach
|
||||
void openFormView() {
|
||||
navigate("formular");
|
||||
}
|
||||
|
||||
@Test
|
||||
void form_rendersItsFieldsAndTheReadOnlyAge() {
|
||||
assertThat(page.getByText("Registration")).isVisible();
|
||||
assertThat(field("First name")).isVisible();
|
||||
assertThat(field("Last name")).isVisible();
|
||||
assertThat(field("Email")).isVisible();
|
||||
// preset on the bean and bound read-only
|
||||
assertThat(field("Age")).hasValue("37");
|
||||
assertThat(field("Age")).not().isEditable();
|
||||
}
|
||||
|
||||
@Test
|
||||
void save_withoutRequiredFields_showsErrorNotification() {
|
||||
button("Save").click();
|
||||
|
||||
assertThat(notification()).containsText("Please check your entries");
|
||||
}
|
||||
|
||||
@Test
|
||||
void save_withInvalidEmail_showsErrorNotification() {
|
||||
field("First name").fill("Max");
|
||||
field("Last name").fill("Mustermann");
|
||||
field("Email").fill("not-an-email");
|
||||
|
||||
button("Save").click();
|
||||
|
||||
assertThat(notification()).containsText("Please check your entries");
|
||||
}
|
||||
|
||||
@Test
|
||||
void save_withValidInput_showsSuccessNotification() {
|
||||
field("First name").fill("Max");
|
||||
field("Last name").fill("Mustermann");
|
||||
field("Email").fill("max@example.com");
|
||||
|
||||
button("Save").click();
|
||||
|
||||
assertThat(notification()).containsText("Saved: Max Mustermann");
|
||||
}
|
||||
|
||||
@Test
|
||||
void reset_clearsTheEnteredValues() {
|
||||
field("First name").fill("Max");
|
||||
field("Last name").fill("Mustermann");
|
||||
|
||||
button("Reset").click();
|
||||
|
||||
assertThat(field("First name")).hasValue("");
|
||||
assertThat(field("Last name")).hasValue("");
|
||||
}
|
||||
|
||||
/** The input inside the Vaadin field carrying {@code label}. */
|
||||
private Locator field(String label) {
|
||||
return page.getByLabel(label, new Page.GetByLabelOptions().setExact(true));
|
||||
}
|
||||
|
||||
private Locator button(String caption) {
|
||||
return page.getByRole(AriaRole.BUTTON, new Page.GetByRoleOptions().setName(caption).setExact(true));
|
||||
}
|
||||
|
||||
private Locator notification() {
|
||||
return page.locator("vaadin-notification-card");
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
package com.example.e2e;
|
||||
|
||||
import com.example.Application;
|
||||
import com.microsoft.playwright.Browser;
|
||||
import com.microsoft.playwright.BrowserContext;
|
||||
import com.microsoft.playwright.BrowserType;
|
||||
import com.microsoft.playwright.Page;
|
||||
import com.microsoft.playwright.Playwright;
|
||||
import com.microsoft.playwright.assertions.PlaywrightAssertions;
|
||||
import org.junit.jupiter.api.AfterAll;
|
||||
import org.junit.jupiter.api.AfterEach;
|
||||
import org.junit.jupiter.api.Assumptions;
|
||||
import org.junit.jupiter.api.BeforeAll;
|
||||
import org.junit.jupiter.api.BeforeEach;
|
||||
import org.springframework.boot.test.context.SpringBootTest;
|
||||
import org.springframework.boot.test.web.server.LocalServerPort;
|
||||
|
||||
import java.util.Locale;
|
||||
|
||||
/**
|
||||
* Base class for end-to-end tests that drive the running application in a real
|
||||
* browser. The Spring Boot app is started on a random port, Playwright opens a
|
||||
* headless Chromium against it, and every test gets a fresh browser context —
|
||||
* so each test also gets a fresh Vaadin session.
|
||||
*
|
||||
* <p>Playwright downloads its browsers into {@code ~/.cache/ms-playwright} on
|
||||
* first use. If that is not possible (offline runner, missing system libraries)
|
||||
* the tests are <em>skipped</em> rather than failed, so the build stays green
|
||||
* on runners that cannot host a browser.
|
||||
*/
|
||||
@SpringBootTest(classes = Application.class, webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)
|
||||
public abstract class PlaywrightTestBase {
|
||||
|
||||
/** Generous: the first request in dev mode has to bootstrap the frontend. */
|
||||
private static final double TIMEOUT_MS = 60_000;
|
||||
|
||||
private static Playwright playwright;
|
||||
private static Browser browser;
|
||||
|
||||
@LocalServerPort
|
||||
private int port;
|
||||
|
||||
private BrowserContext context;
|
||||
protected Page page;
|
||||
|
||||
@BeforeAll
|
||||
static void launchBrowser() {
|
||||
try {
|
||||
playwright = Playwright.create();
|
||||
browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(true));
|
||||
} catch (Exception | UnsatisfiedLinkError e) {
|
||||
closeBrowser();
|
||||
Assumptions.abort("no Playwright browser available: " + e.getMessage());
|
||||
}
|
||||
PlaywrightAssertions.setDefaultAssertionTimeout(TIMEOUT_MS);
|
||||
}
|
||||
|
||||
@AfterAll
|
||||
static void closeBrowser() {
|
||||
if (browser != null) {
|
||||
browser.close();
|
||||
browser = null;
|
||||
}
|
||||
if (playwright != null) {
|
||||
playwright.close();
|
||||
playwright = null;
|
||||
}
|
||||
}
|
||||
|
||||
@BeforeEach
|
||||
void openPage() {
|
||||
// Pin the locale so the assertions have one fixed set of captions to
|
||||
// match. English, not German: the German bundle is the unsuffixed
|
||||
// fallback (`translations.properties`), so `de` is not a provided
|
||||
// locale and Vaadin serves `translations_en.properties` for it anyway.
|
||||
context = browser.newContext(new Browser.NewContextOptions().setLocale(Locale.US.toLanguageTag()));
|
||||
context.setDefaultTimeout(TIMEOUT_MS);
|
||||
page = context.newPage();
|
||||
}
|
||||
|
||||
@AfterEach
|
||||
void closePage() {
|
||||
if (context != null) {
|
||||
context.close();
|
||||
context = null;
|
||||
}
|
||||
}
|
||||
|
||||
/** Opens a Vaadin route, e.g. {@code navigate("formular")}. */
|
||||
protected void navigate(String route) {
|
||||
page.navigate("http://localhost:" + port + "/" + route);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user