generator-jhipster Add a Playwright implementation of e2e tests

Overview of the issue

Add an implementation of JHipster's e2e tests with Playwright.

I'm not sure this is necessary, but I figured I'd enter it here and put a bounty on it in case someone is interested.

Motivation for or Use Case

The least flaky system is the one we want for our CI processes.

Related issues

https://github.com/jhipster/generator-jhipster/issues/13723, https://github.com/jhipster/generator-jhipster/issues/13639

Suggest a Fix

Maybe Julien can get paid to do it?! 😉

[x] Checking this box is mandatory (this is just to show you read everything)

Jan 29 '21 00:01 mraible

You would like to use the typescript version or Java?

Jan 29 '21 06:01 atomfrede

Both! What do you prefer? The final result should be an implementation and a good story about how it was achieved. :)

Jan 29 '21 06:01 mraible

I guess the ts/node version will be much easier to implement as we have the testrunner etc. in place. Personally I would like to test out the java part (still thinking of doing a thymeleaf + tailwind + htmx + alpine blueprint and having all in java would be great), but totally fine with starting the ts version.

Jan 29 '21 07:01 atomfrede

This seems as good blueprint candidate, what do you think?

Jan 29 '21 15:01 atomfrede

I have a first example up and running using jest as test runner via https://github.com/playwright-community/jest-playwright. Fun to work with. Will try to put it into a blueprint for jh7

export class LoginPage {
  page: any;

  constructor(page: any) {
    this.page = page;
  }
  async navigate() {
    await this.page.goto('http://localhost:8080/login');
  }

  async login(username: string, password: string) {
    await this.page.fill('[data-cy="username"]', username);
    await this.page.fill('[data-cy="password"]', password);
    await this.page.click('[data-cy="submit"]');
    await this.page.waitForNavigation();
  }
}

import { LoginPage } from '../models/login';

let loginPage: LoginPage;

beforeEach(async () => {
  loginPage = new LoginPage(page);
  await loginPage.navigate();
});

test('should login', async () => {
  await loginPage.login('admin', 'admin');
  await page.goto('http://localhost:8080');
  await page.waitForSelector('[data-cy="adminMenu"]');
});

Jan 30 '21 22:01 atomfrede

I'm not against adding a new tool but I would like to go ahead on Cypress by using the Cypress Dashboard for the JHipster organization.

Maybe it will help on this subject.

https://docs.cypress.io/guides/dashboard/flaky-test-management.html#Flake-Detection

Feb 01 '21 23:02 avdev4j

Having it as a blueprint doesn't hurt. Thinking of having the choice between node/ts and java eventually. Not sure how easy it will be to keep up with upstream changes for a blueprint doing e2e tests.

Feb 02 '21 06:02 atomfrede

Yes, it will go to blueprint or module

Feb 02 '21 08:02 pascalgrimaud

Should it be an "official" blueprint or just keep it under https://github.com/atomfrede/generator-jhipster-playwright for now? Maybe @jdubois has a preference?

Feb 02 '21 09:02 atomfrede

Oh I missed this thread! I'm in contact with the Playwright team at Microsoft, I'll ask them if they want to join.

Feb 02 '21 10:02 jdubois

I am going to start a small blog post series about how to create a playwright blueprint. Will try to start this weekend, what do you think?

Feb 12 '21 12:02 atomfrede

I'm fine

Feb 13 '21 11:02 pascalgrimaud