Creates Playwright integration tests for Vaadin views.
This skill inherits all available tools. When active, it can use any tool Claude has access to.
templates/ExampleViewIT.javaCreate Playwright integration tests for Vaadin views. Playwright tests run in a real browser against a running application.
Use existing test data from Flyway migrations in src/test/resources/db/migration.
| Approach | Location | Purpose |
|---|---|---|
| Flyway migration | src/test/resources/db/migration/V*.sql | Existing test data |
| Manual cleanup | @AfterEach method | Remove test-created data |
Extend from PlaywrightIT base class.
Use templates/playwright-test.java as the test class structure.
| Class | Purpose |
|---|---|
| GridPw | Grid interactions and assertions |
| page | Playwright Page object for navigation |
| mopo | Vaadin connection helper |
page.navigate("http://localhost:%d/persons".formatted(localServerPort));
Always wait after interactions that trigger server communication:
mopo.waitForConnectionToSettle();
GridPw gridPw = new GridPw(page);
// Get rendered row count (viewport limited!)
int count = gridPw.getRenderedRowCount();
// Get specific row
GridPw.RowPw row = gridPw.getRow(0);
// Get cell text
String text = row.getCell(0).innerText();
// Select row
row.
select();
mopo.
waitForConnectionToSettle();
// Text field by label
Locator nameField = page.locator("vaadin-text-field")
.filter(new Locator.FilterOptions().setHasText("Name"))
.locator("input");
// Button by text
Locator saveButton = page.locator("vaadin-button")
.filter(new Locator.FilterOptions().setHasText("Save"));
// ComboBox
Locator comboBox = page.locator("vaadin-combo-box")
.filter(new Locator.FilterOptions().setHasText("Country"));
// Get input value
String value = nameField.inputValue();
// Fill text field
nameField.
fill("New Value");
// Click button
saveButton.
click();
mopo.
waitForConnectionToSettle();
// Clear and fill
nameField.
clear();
nameField.
fill("Updated Value");
// Open and select
comboBox.click();
page.
locator("vaadin-combo-box-item").
filter(
new Locator.FilterOptions().
setHasText("Option 1")
).
click();
mopo.
waitForConnectionToSettle();
// Confirm dialog
page.locator("vaadin-confirm-dialog")
.
locator("vaadin-button")
.
filter(new Locator.FilterOptions().
setHasText("Confirm"))
.
click();
mopo.
waitForConnectionToSettle();
Use AssertJ assertions:
| Assertion Type | Example |
|---|---|
| Text content | assertThat(row.getCell(0).innerText()).isEqualTo("x") |
| Input value | assertThat(field.inputValue()).isEqualTo("value") |
| Row count | assertThat(gridPw.getRenderedRowCount()).isGreaterThan(0) |
| Visibility | assertThat(element.isVisible()).isTrue() |
| Enabled | assertThat(element.isEnabled()).isTrue() |
Playwright tests run in a real browser with viewport constraints:
isGreaterThan() instead of exact counts for grids