generator-jhipster-playwright 1.0.0 → 1.1.0

package/README.md

@@ -1,21 +1,20 @@
 # generator-jhipster-playwright
 
+[![CI](https://github.com/sreeshanth-soma/generator-jhipster-playwright/actions/workflows/ci.yml/badge.svg)](https://github.com/sreeshanth-soma/generator-jhipster-playwright/actions/workflows/ci.yml)
+[![npm version](https://badge.fury.io/js/generator-jhipster-playwright.svg)](https://www.npmjs.com/package/generator-jhipster-playwright)
+
 > A JHipster blueprint that replaces the generated Cypress end-to-end suite with Playwright.
 
 ## Introduction
 
 This is a JHipster blueprint. It overrides the `cypress` sub-generator and writes Playwright files instead of Cypress files for generated applications.
 
-Verified against fresh generated JHipster applications:
-
-- React + JWT: `53 passed`, `0 skipped`
-- Angular + JWT: `59 passed`, `0 failed`, `0 skipped`
+Verified against freshly generated React, Angular, and Vue JHipster applications — all tests passing, no failures or flakiness.
 
 ## Installation
 
-To install or update this blueprint:
-
 ```bash
+npm install -g generator-jhipster@9.0.0
 npm install -g generator-jhipster-playwright
 ```
 

package/generators/cypress/files.js

@@ -7,14 +7,25 @@
  *   renameTo: (ctx, file) => output path in generated app
  *   templates: ['filename'] — JHipster auto-appends .ejs
  */
+import { clientRootTemplatesBlock } from 'generator-jhipster/generators/client/support';
 
 const PLAYWRIGHT_TEMPLATE_SOURCE_DIR = 'src/test/javascript/cypress/';
 
 export const playwrightFiles = {
   common: [
+    {
+      templates: ['README.md.jhi.playwright'],
+    },
     {
       templates: ['playwright.config.ts'],
     },
+    {
+      condition: generator => generator.clientFrameworkAngular && generator.authenticationTypeSession,
+      templates: ['proxy.config.playwright.mjs'],
+    },
+    clientRootTemplatesBlock({
+      templates: ['eslint.config.ts.jhi.playwright'],
+    }),
   ],
   clientTestFw: [
     {

package/generators/cypress/generator.js

@@ -90,7 +90,8 @@ export default class extends BaseApplicationGenerator {
         );
         const dependencies = packageJsonStorage.createStorage('dependencies');
         const devDependencies = packageJsonStorage.createStorage('devDependencies');
-        devDependencies.set('@playwright/test', '1.58.2');
+        devDependencies.set('@playwright/test', '^1.58.2');
+        devDependencies.set('eslint-plugin-playwright', '^2.9.0');
 
         if (application.clientFrameworkAngular) {
           // ng-bootstrap and Bootstrap both declare Popper as a peer dependency.

package/generators/cypress/templates/README.md.jhi.playwright.ejs

@@ -0,0 +1,18 @@
+<%#
+ This is a fragment file merged into README.md via JHipster's fragment system.
+-%>
+<&_ if (fragment.testingSection) { -&>
+#### E2E tests
+
+UI end-to-end tests are powered by [Playwright][]. They're located in [<%= playwrightDir %>](<%= playwrightDir %>) and can be run by starting Spring Boot in one terminal (`<%= nodePackageManagerCommand %> run app:start`) and running the tests (`<%= nodePackageManagerCommand %> run e2e:headless`) in a second one.
+
+Before running Playwright tests, you can specify user credentials by setting the `E2E_USERNAME` and `E2E_PASSWORD` environment variables.
+
+```bash
+export E2E_USERNAME="<your-username>"
+export E2E_PASSWORD="<your-password>"
+```
+<&_ } -&>
+<&_ if (fragment.referenceSection) { -&>
+- [Playwright](https://playwright.dev/)
+<&_ } -&>

package/generators/cypress/templates/eslint.config.ts.jhi.playwright.ejs

@@ -0,0 +1,16 @@
+<&_ if (fragment.importsSection) { -&>
+import playwright from 'eslint-plugin-playwright';
+<&_ } -&>
+<&_ if (fragment.configSection) { -&>
+  {
+    files: ['<%= this.relativeDir(clientRootDir, playwrightDir) %>**/*.ts'],
+    ...playwright.configs['flat/recommended'],
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unsafe-argument': 'off',
+      '@typescript-eslint/no-unsafe-assignment': 'off',
+      '@typescript-eslint/no-unsafe-call': 'off',
+      '@typescript-eslint/no-unsafe-member-access': 'off',
+    },
+  },
+<&_ } -&>

package/generators/cypress/templates/playwright.config.ts.ejs

@@ -22,7 +22,7 @@ export default defineConfig({
     },
   ],
   webServer: {
-    command: 'npm run webapp:dev<% if (clientFrameworkAngular) { %> -- --open=false<% } %>',
+    command: 'npm run webapp:dev<% if (clientFrameworkAngular) { %> -- --open=false<% if (authenticationTypeSession) { %> --proxy-config proxy.config.playwright.mjs<% } %><% } %>',
     url: 'http://localhost:<%= devServerPortProxy || devServerPort || gatewayServerPort || serverPort %>/',
     reuseExistingServer: !process.env.CI,
     timeout: 120_000,

package/generators/cypress/templates/proxy.config.playwright.mjs.ejs

@@ -0,0 +1,26 @@
+<%#
+  Playwright-specific Vite proxy config for Angular session auth apps.
+
+  The standard proxy.config.mjs uses the regex '^/(api|...|login)' which
+  incorrectly matches lazy-loaded route chunks named login-<hash>.js,
+  causing the Angular login component to fail with a 404. This file uses
+  'login(?=$|/)' so only the exact /login path (and sub-paths) is proxied.
+-%>
+const backendHost = '127.0.0.1';
+const backendPort = <%= applicationTypeMicroservice ? gatewayServerPort : serverPort %>;
+
+/**
+ * @type {import('vite').CommonServerOptions['proxy']}
+ */
+export default {
+<%_ if (communicationSpringWebsocket) { _%>
+  '/websocket': {
+    target: `ws://${backendHost}:${backendPort}`,
+    ws: true,
+  },
+<%_ } _%>
+  '^/(api|management|v3/api-docs<% if (locals.databaseTypeSql && locals.devDatabaseTypeH2Any) { %>|h2-console<% } %><% if (authenticationTypeOauth2) { %>|oauth2<% } %><% if (authenticationTypeSession || authenticationTypeOauth2) { %>|login(?=$|/)<% } %><% if (applicationTypeGateway || applicationTypeMicroservice) { %>|services<% } %>)': {
+    target: `http://${backendHost}:${backendPort}`,
+    xfwd: true,
+  },
+};

package/generators/cypress/templates/src/test/javascript/cypress/e2e/account/login-page.spec.ts.ejs

@@ -30,7 +30,7 @@ test.describe('login page', () => {
   test('greets with signin', async ({ page }) => {
     await expect(page.locator(titleLoginSelector)).toBeVisible();
   });
-<%_ if (clientFrameworkAngular) { _%>
+<%_ if (clientFrameworkAngular && !authenticationTypeSession) { _%>
 
   test('greets visiting /login directly', async ({ page }) => {
     await page.goto('/login');

package/generators/cypress/templates/src/test/javascript/cypress/e2e/account/reset-password-page.spec.ts.ejs

@@ -46,11 +46,8 @@ test.describe('forgot your password', () => {
   test('should be able to init reset password', async ({ page }) => {
     await page.locator(emailResetPasswordSelector).fill('user@gmail.com');
     const responsePromise = page.waitForResponse('**/api/account/reset-password/init');
-<%_ if (clientFrameworkReact) { _%>
+    await expect(page.locator(submitInitResetPasswordSelector)).toBeEnabled({ timeout: 5000 });
     await page.locator(submitInitResetPasswordSelector).click();
-<%_ } else { _%>
-    await page.locator(submitInitResetPasswordSelector).click({ force: true });
-<%_ } _%>
     const response = await responsePromise;
     expect(response.status()).toBe(200);
   });

package/generators/cypress/templates/src/test/javascript/cypress/e2e/account/settings-page.spec.ts.ejs

@@ -1,5 +1,5 @@
 <%#
-  Source EJS variables: ZERO — settings-page.cy.ts.ejs has no EJS variables.
+  Source EJS variables: authenticationTypeJwt
 -%>
 import { test, expect } from '@playwright/test';
 import {
@@ -10,6 +10,9 @@ import {
   credentials,
   login,
   authenticatedRequest,
+<%_ if (authenticationTypeJwt) { _%>
+  getAuthToken,
+<%_ } _%>
 } from '../../support/commands';
 import { clickOnSettingsItem } from '../../support/navbar';
 import type { Account } from '../../support/account';
@@ -82,4 +85,76 @@ test.describe('/account/settings', () => {
     const response = await responsePromise;
     expect(response.status()).toBe(200);
   });
+
+  test.describe('if there is another user with an email', () => {
+    let originalAdminAccount: Account;
+    const testAdminEmail = 'admin@localhost.fr';
+
+    test.beforeAll(async ({ request }) => {
+<%_ if (authenticationTypeJwt) { _%>
+      const adminToken = await getAuthToken(request, adminUsername, adminPassword);
+      const accountResp = await request.get('/api/account', {
+        headers: { Authorization: `Bearer ${adminToken}` },
+      });
+      originalAdminAccount = await accountResp.json() as Account;
+      const saveResp = await request.post('/api/account', {
+        data: { ...originalAdminAccount, email: testAdminEmail },
+        headers: { Authorization: `Bearer ${adminToken}`, 'Content-Type': 'application/json' },
+      });
+      expect(saveResp.status()).toBe(200);
+<%_ } else { _%>
+      await request.get('/api/account');
+      const { cookies: preLoginCookies } = await request.storageState();
+      const preLoginXsrf = preLoginCookies.find(c => c.name === 'XSRF-TOKEN');
+      await request.post('/api/authentication', {
+        form: { username: adminUsername, password: adminPassword },
+        headers: preLoginXsrf ? { 'X-XSRF-TOKEN': preLoginXsrf.value } : {},
+      });
+      const { cookies } = await request.storageState();
+      const xsrfCookie = cookies.find(c => c.name === 'XSRF-TOKEN');
+      const headers = { 'Content-Type': 'application/json', ...(xsrfCookie ? { 'X-XSRF-TOKEN': xsrfCookie.value } : {}) };
+      const accountResp = await request.get('/api/account', { headers });
+      originalAdminAccount = await accountResp.json() as Account;
+      const saveResp = await request.post('/api/account', {
+        data: { ...originalAdminAccount, email: testAdminEmail },
+        headers,
+      });
+      expect(saveResp.status()).toBe(200);
+<%_ } _%>
+    });
+
+    test.afterAll(async ({ request }) => {
+<%_ if (authenticationTypeJwt) { _%>
+      const adminToken = await getAuthToken(request, adminUsername, adminPassword);
+      await request.post('/api/account', {
+        data: originalAdminAccount,
+        headers: { Authorization: `Bearer ${adminToken}`, 'Content-Type': 'application/json' },
+      });
+<%_ } else { _%>
+      await request.get('/api/account');
+      const { cookies: preLoginCookies } = await request.storageState();
+      const preLoginXsrf = preLoginCookies.find(c => c.name === 'XSRF-TOKEN');
+      await request.post('/api/authentication', {
+        form: { username: adminUsername, password: adminPassword },
+        headers: preLoginXsrf ? { 'X-XSRF-TOKEN': preLoginXsrf.value } : {},
+      });
+      const { cookies } = await request.storageState();
+      const xsrfCookie = cookies.find(c => c.name === 'XSRF-TOKEN');
+      await request.post('/api/account', {
+        data: originalAdminAccount,
+        headers: { 'Content-Type': 'application/json', ...(xsrfCookie ? { 'X-XSRF-TOKEN': xsrfCookie.value } : {}) },
+      });
+<%_ } _%>
+    });
+
+    test("should not be able to change 'user' email to same value", async ({ page }) => {
+      await page.locator(emailSettingsSelector).clear();
+      await page.locator(firstNameSettingsSelector).fill('jhipster');
+      await page.locator(emailSettingsSelector).fill(testAdminEmail);
+      const responsePromise = page.waitForResponse('**/api/account');
+      await page.locator(submitSettingsSelector).click();
+      const response = await responsePromise;
+      expect(response.status()).toBe(400);
+    });
+  });
 });

package/generators/cypress/templates/src/test/javascript/cypress/support/commands.ts.ejs

@@ -164,36 +164,70 @@ export async function authenticatedRequest(
 }
 
 /**
- * Login via OAuth2 (Keycloak).
+ * Login via OAuth2 (Keycloak, Okta, or Auth0 — detected from redirect URL).
  */
 export async function login(page: Page, request: APIRequestContext, username: string, password: string): Promise<void> {
   await page.goto('/oauth2/authorization/oidc');
-  await page.waitForSelector('#kc-form-login', { timeout: 15000 });
-  await page.locator('#username').fill(username);
-  await page.locator('#password').fill(password);
-  await page.locator('#kc-login').click();
+  // Wait until we've left the JHipster app (landed on the identity provider)
+  await page.waitForURL(url => !url.toString().includes('/oauth2/authorization'), { timeout: 15000 });
+  const currentUrl = page.url();
+  if (currentUrl.includes('okta')) {
+    await page.locator('#okta-signin-username').fill(username);
+    await page.locator('#okta-signin-password').fill(password);
+    await page.locator('[type="submit"]').first().click();
+  } else if (currentUrl.includes('auth0')) {
+    await page.locator('#username').fill(username);
+    await page.locator('#password').fill(password);
+    await page.locator('button[type="submit"]').click();
+  } else {
+    // Keycloak (default)
+    await page.waitForSelector('#kc-form-login', { timeout: 15000 });
+    await page.locator('#username').fill(username);
+    await page.locator('#password').fill(password);
+    await page.locator('#kc-login').click();
+  }
   await page.waitForURL('**/', { timeout: 15000 });
   await waitForAppShell(page);
 }
 <%_ } else { _%>
 /**
  * Perform authenticated API request (Session).
+ * Reads the XSRF-TOKEN cookie and sends it as X-XSRF-TOKEN header for CSRF-protected endpoints.
  */
 export async function authenticatedRequest(
   request: APIRequestContext,
   data: { method?: string; url: string; data?: unknown },
 ): Promise<APIResponse> {
-  return request.fetch(data.url, { method: data.method ?? 'GET', data: data.data });
+  const storageState = await request.storageState();
+  const xsrfCookie = storageState.cookies.find(c => c.name === 'XSRF-TOKEN');
+  return request.fetch(data.url, {
+    method: data.method ?? 'GET',
+    data: data.data,
+    headers: {
+      ...(xsrfCookie ? { 'X-XSRF-TOKEN': xsrfCookie.value } : {}),
+    },
+  });
 }
 
 /**
  * Login via Session auth.
+ * Spring Security CSRF requires the XSRF-TOKEN to be included as X-XSRF-TOKEN
+ * header on the authentication POST. We first hit any API endpoint to receive
+ * the token cookie, then POST credentials with that token.
+ * The session cookie lives in the `request` context; we copy it to the
+ * page's browser context so that page navigations are also authenticated.
  */
 export async function login(page: Page, request: APIRequestContext, username: string, password: string): Promise<void> {
+  // Trigger CSRF cookie issuance (401 is fine — we just need the XSRF-TOKEN cookie)
+  await request.get('/api/account');
+  const { cookies: initialCookies } = await request.storageState();
+  const xsrfCookie = initialCookies.find(c => c.name === 'XSRF-TOKEN');
   await request.post('/api/authentication', {
-    data: { username, password },
-    form: true,
+    form: { username, password },
+    headers: xsrfCookie ? { 'X-XSRF-TOKEN': xsrfCookie.value } : {},
   });
+  const { cookies } = await request.storageState();
+  await page.context().addCookies(cookies);
   await page.goto('/');
   await waitForAppShell(page);
 }

package/generators/cypress/templates/src/test/javascript/cypress/support/oauth2.ts.ejs

@@ -2,63 +2,109 @@
  * Playwright OAuth2 support helpers
  * Translated from Cypress oauth2.ts
  *
- * This module handles OAuth2/Keycloak authentication flows.
+ * Supports Keycloak, Okta, and Auth0.
  */
 import type { Page, APIRequestContext } from '@playwright/test';
 
 export interface OAuth2Data {
-  accessToken: string;
-  idToken: string;
+  url: string;
 }
 
 /**
- * Initiate OAuth2 login flow and return tokens.
- * Translates the Cypress OAuth2 command chain:
- *   1. GET /oauth2/authorization/oidc (follow redirects to Keycloak)
- *   2. Parse the Keycloak login form
- *   3. POST credentials to Keycloak
- *   4. Follow redirects back to the app
+ * Get the OAuth2 provider redirect URL without following it.
  */
-export async function oauth2Login(
+export async function getOauth2Data(request: APIRequestContext): Promise<OAuth2Data> {
+  const response = await request.get('/oauth2/authorization/oidc', { maxRedirects: 0 });
+  const location = response.headers()['location'] ?? '';
+  return { url: location };
+}
+
+/**
+ * Login via the appropriate OAuth2 provider (Keycloak, Okta, or Auth0).
+ * Provider is detected from the redirect URL.
+ */
+export async function oauthLogin(
   page: Page,
+  oauth2Data: OAuth2Data,
   username: string,
   password: string,
 ): Promise<void> {
-  // Navigate to the OAuth2 login endpoint
-  await page.goto('/oauth2/authorization/oidc');
+  const url = oauth2Data.url;
+  if (url.includes('okta')) {
+    await oktaLogin(page, oauth2Data, username, password);
+  } else if (url.includes('auth0')) {
+    await auth0Login(page, oauth2Data, username, password);
+  } else {
+    await keycloakLogin(page, oauth2Data, username, password);
+  }
+}
 
-  // Wait for Keycloak login form
+/**
+ * Login via Keycloak.
+ */
+export async function keycloakLogin(
+  page: Page,
+  oauth2Data: OAuth2Data,
+  username: string,
+  password: string,
+): Promise<void> {
+  await page.goto(oauth2Data.url);
   await page.waitForSelector('#kc-form-login', { timeout: 15000 });
-
-  // Fill in credentials
   await page.locator('#username').fill(username);
   await page.locator('#password').fill(password);
-
-  // Submit the form
   await page.locator('#kc-login').click();
+  await page.waitForURL('**/', { timeout: 15000 });
+}
 
-  // Wait for redirect back to the app
+/**
+ * Login via Auth0.
+ */
+export async function auth0Login(
+  page: Page,
+  oauth2Data: OAuth2Data,
+  username: string,
+  password: string,
+): Promise<void> {
+  await page.goto(oauth2Data.url);
+  await page.locator('#username').fill(username);
+  await page.locator('#password').fill(password);
+  await page.locator('button[type="submit"]').click();
   await page.waitForURL('**/', { timeout: 15000 });
 }
 
 /**
- * Get OAuth2 tokens from the current session.
+ * Login via Okta.
  */
-export async function getOAuth2Data(request: APIRequestContext): Promise<OAuth2Data | null> {
-  const response = await request.get('/api/account', { failOnStatusCode: false });
-  if (response.ok()) {
-    return {
-      accessToken: '',
-      idToken: '',
-    };
-  }
-  return null;
+export async function oktaLogin(
+  page: Page,
+  oauth2Data: OAuth2Data,
+  username: string,
+  password: string,
+): Promise<void> {
+  await page.goto(oauth2Data.url);
+  await page.locator('#okta-signin-username').fill(username);
+  await page.locator('#okta-signin-password').fill(password);
+  await page.locator('[type="submit"]').first().click();
+  await page.waitForURL('**/', { timeout: 15000 });
 }
 
 /**
- * Logout from OAuth2/Keycloak session.
+ * Logout from OAuth2 session.
+ * POSTs to /api/logout with CSRF token and follows the provider logout URL.
  */
 export async function oauth2Logout(page: Page): Promise<void> {
-  await page.goto('/api/logout');
+  const cookies = await page.context().cookies();
+  const xsrfCookie = cookies.find(c => c.name === 'XSRF-TOKEN');
+  const origin = new URL(page.url()).origin;
+  const response = await page.request.post('/api/logout', {
+    headers: {
+      'X-XSRF-TOKEN': xsrfCookie?.value ?? '',
+      Origin: origin,
+    },
+  });
+  const body = await response.json().catch(() => ({}));
+  if (body.logoutUrl) {
+    await page.goto(body.logoutUrl);
+  }
   await page.waitForURL('**/', { timeout: 15000 });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "generator-jhipster-playwright",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "JHipster Playwright E2E blueprint - replaces Cypress with Playwright for end-to-end testing",
   "keywords": [
     "yeoman-generator",
@@ -30,10 +30,11 @@
     "smoke": "node --check cli/cli.cjs && node --check generators/cypress/command.js && node --check generators/cypress/files.js && node --check generators/cypress/generator.js && node --check generators/cypress/index.js && node --input-type=module -e \"await import('./generators/cypress/index.js'); await import('./generators/cypress/generator.js'); await import('./generators/cypress/files.js'); await import('./generators/cypress/command.js');\"",
     "test": "npm run lint && npm run smoke"
   },
-  "dependencies": {
+  "peerDependencies": {
     "generator-jhipster": "9.0.0"
   },
   "devDependencies": {
+    "generator-jhipster": "9.0.0",
     "@playwright/test": "^1.58.2",
     "eslint": "9.39.2",
     "yeoman-test": ">=8.2.0"