Playwright Java helper for Vaadin Flow

I’ve started to create a library to ease the test of a Vaadin application with Playwright.
The focus has been on each component to help how to assert or get information without knowing how they are structured internally.
For example if you want to test if a textfield is invalid and has an error message you can do this:

// get the textfield by accessible name
TextFieldElement textfield = TextFieldElement.getByLabel(page, "Validated Textfield");
textfield.setValue("1");
textfield.assertInvalid();
textfield.assertErrorMessage("Minimum length is 6 characters");

The API is different than TestBench since the project is relying on Playwright assertions and is trying to follow Playwright’s best practices: Best Practices | Playwright.
So, internally, to get the error message of the textfield I will build a errorMessageLocator then use Playwright assertions to run the tests.

The library has not been published yet in the directory and if you have any feedback on the API that would definitely help.

There is also the mopo library, we will very likely merge the 2 projects since it doesn’t make a lot of sense to have 2 Playwright wrapper for Vaadin.

In theory, it’s not Flow related but since it’s written in Java I guess a Hilla user will write the tests in Typescript. I don’t think there is an easy way to combine it in one library (make a playwright Typescript/Java library, but all the suggestions are welcomed).

The source code can be found here: GitHub - parttio/dramafinder
There is a TODO list here: dramafinder/TODO.md at master · parttio/dramafinder · GitHub

I will post updates here, once it’s published.

3 Likes

Amazing! That’s a great idea and well be very helpful as I’m using Playwright a lot

The helper library has been released in Maven Central and in the directory: Drama Finder - Vaadin Add-on Directory

It’s very likely buggy but I’ll update the library and the tests :slight_smile:

Components implemented

  • Big Decimal Field
  • Button
  • Checkbox
  • Date Picker
  • Date Time Picker
  • Details
  • Dialog
  • Email Field
  • Integer Field
  • ListBox (multiple and single)
  • Notification
  • Password Field
  • Popover
  • Progress bar
  • Radio Button
  • Select
  • Tabs
  • TextArea
  • TextField
  • Time Picker
2 Likes