Creating a JHipster Playwright Blueprint - Part 1

JHipster offers good support for doing end-2-end tests. Recently Cypress has been added as the default option and Protractor has been deprecated.

While maintaining protractor tests for three frontend stacks (angular, react and vue) was not easy, we are very happy with what Cypress offers. The tests are much more stable and the developer experience is great. Nevertheless Cypress has some drawbacks as it focuses on doing one thing well.

When using JHipster with oAuth an interactive login is not possible with pure Cypress. Right now we leverage Puppeteer to automate the browser and do the interactive login. While this works it feels like a hack and really slows down the overall time for running the tests.

Recently Playwright has come into play as an alternative cross browser automation framework. Playwright supports different languages, can automate real browsers and supports multiple origins per test. Furthermore Playwright seems to be faster and more lightweight. But Playwright lacks the e.g. the support for time traveling which makes debugging tests a breeze.

This blog series will try to integrate Playwright into JHipster instead of Cypress. Over the course of multiple post we will adapt a generated application to use Playwright instead of Cypress, using both the playwright for node and playwrigth-java. Eventually I show how to develop and release a JHipster blueprint will generate all required files to use Playwright in JHipster without any manual steps.

Further Reading