[ZEPPELIN-6370] Upgrade playwright and change the method of installing Playwright browsers

#5107
https://github.com/apache/zeppelin/actions/runs/18662031473/job/53204596550?pr=5107

In the Playwright E2E tests of the above bump PR, the following issue occurred:
```
Error: browserType.launch: Executable doesn't exist at /home/runner/.cache/ms-playwright/webkit-2215/pw_run.sh
```

This issue seems to be caused by the Playwright browser installation step being version-locked in `zeppelin-web-angular/pom.xml`'s playwright-install execution.

Instead of managing it in `pom.xml`, it would be better to add it to the `postinstall` script in `zeppelin-web-angular/package.json`, so that Playwright browsers are automatically installed when running `npm install`, either in CI and on a local environment. This PR addresses that change.

61ff629

Including the CI caching procedure as above, it seems optimized as previous approach(pom.xml).

Improvement

ZEPPELIN-6370

* Does the license files need to update? No
* Is there breaking changes for older versions? No
* Does this needs documentation? No

Closes #5108 from dididy/e2e/upgrade-playwright.

Signed-off-by: ChanHo Lee <[email protected]>

Author: dididy

.github/workflows/frontend.yml

@@ -75,6 +75,13 @@ jobs:
         with:
           distribution: 'temurin'
           java-version: 11
+      - name: Cache Playwright browsers
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ hashFiles('zeppelin-web-angular/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-playwright-
       - name: Cache local Maven repository
         uses: actions/cache@v4
         with:

zeppelin-web-angular/e2e/tests/theme/dark-mode.spec.ts

@@ -20,7 +20,7 @@ test.describe('Dark Mode Theme Switching', () => {
 
   test.beforeEach(async ({ page }) => {
     themePage = new ThemePage(page);
-    await page.goto('/', { waitUntil: 'load' });
+    await page.goto('/');
     await waitForZeppelinReady(page);
 
     // Handle authentication if shiro.ini exists
@@ -30,7 +30,9 @@ test.describe('Dark Mode Theme Switching', () => {
     await themePage.clearLocalStorage();
   });
 
-  test('Scenario: User can switch to dark mode and persistence is maintained', async ({ page }) => {
+  test('Scenario: User can switch to dark mode and persistence is maintained', async ({ page, context }) => {
+    let currentPage = page;
+
     // GIVEN: User is on the main page, which starts in 'system' mode by default (localStorage cleared).
     await test.step('GIVEN the page starts in system mode', async () => {
       await themePage.assertSystemTheme(); // Robot icon for system theme
@@ -47,19 +49,20 @@ test.describe('Dark Mode Theme Switching', () => {
     // WHEN: User switches to dark mode by setting localStorage and reloading.
     await test.step('WHEN the user switches to dark mode', async () => {
       await themePage.setThemeInLocalStorage('dark');
-      await page.reload();
-      await waitForZeppelinReady(page);
-    });
+      const newPage = await context.newPage();
+      await newPage.goto(currentPage.url());
+      await waitForZeppelinReady(newPage);
 
-    // THEN: The theme changes to dark mode.
-    await test.step('THEN the page switches to dark mode', async () => {
+      // Update themePage to use newPage and verify dark mode
+      themePage = new ThemePage(newPage);
+      currentPage = newPage;
       await themePage.assertDarkTheme();
     });
 
     // AND: User refreshes the page.
     await test.step('AND the user refreshes the page', async () => {
-      await page.reload();
-      await waitForZeppelinReady(page);
+      await currentPage.reload();
+      await waitForZeppelinReady(currentPage);
     });
 
     // THEN: Dark mode is maintained after refresh.
@@ -84,7 +87,7 @@ test.describe('Dark Mode Theme Switching', () => {
 
     await test.step('GIVEN: No localStorage, System preference is Light', async () => {
       await page.emulateMedia({ colorScheme: 'light' });
-      await page.goto('/', { waitUntil: 'load' });
+      await page.goto('/');
       await waitForZeppelinReady(page);
       // When no explicit theme is set, it defaults to 'system' mode
       // Even in system mode with light preference, the icon should be robot
@@ -95,23 +98,23 @@ test.describe('Dark Mode Theme Switching', () => {
 
     await test.step('GIVEN: No localStorage, System preference is Dark (initial system state)', async () => {
       await themePage.setThemeInLocalStorage('system');
-      await page.goto('/', { waitUntil: 'load' });
+      await page.goto('/');
       await waitForZeppelinReady(page);
       await themePage.assertSystemTheme(); // Robot icon for system theme
     });
 
     await test.step("GIVEN: localStorage is 'dark', System preference is Light", async () => {
       await themePage.setThemeInLocalStorage('dark');
       await page.emulateMedia({ colorScheme: 'light' });
-      await page.goto('/', { waitUntil: 'load' });
+      await page.goto('/');
       await waitForZeppelinReady(page);
       await themePage.assertDarkTheme(); // localStorage should override system
     });
 
     await test.step("GIVEN: localStorage is 'system', THEN: Emulate system preference change to Light", async () => {
       await themePage.setThemeInLocalStorage('system');
       await page.emulateMedia({ colorScheme: 'light' });
-      await page.goto('/', { waitUntil: 'load' });
+      await page.goto('/');
       await waitForZeppelinReady(page);
       await expect(themePage.rootElement).toHaveClass(/light/);
       await expect(themePage.rootElement).toHaveAttribute('data-theme', 'light');
@@ -121,7 +124,7 @@ test.describe('Dark Mode Theme Switching', () => {
     await test.step("GIVEN: localStorage is 'system', THEN: Emulate system preference change to Dark", async () => {
       await themePage.setThemeInLocalStorage('system');
       await page.emulateMedia({ colorScheme: 'dark' });
-      await page.goto('/', { waitUntil: 'load' });
+      await page.goto('/');
       await waitForZeppelinReady(page);
       await expect(themePage.rootElement).toHaveClass(/dark/);
       await expect(themePage.rootElement).toHaveAttribute('data-theme', 'dark');

zeppelin-web-angular/package-lock.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "prepare": "cd .. && husky",
-    "postinstall": "npm run build:projects && cd projects/zeppelin-react && npm install",
+    "postinstall": "npm run build:projects && npx playwright install --with-deps && cd projects/zeppelin-react && npm install",
     "ng": "./node_modules/.bin/ng",
     "start": "concurrently \"npm run start:react\" \"npm run start:angular\"",
     "start:angular": "ng serve --proxy-config proxy.conf.js",
@@ -75,7 +75,7 @@
     "@angular/cli": "~13.3.11",
     "@angular/compiler-cli": "~13.4.0",
     "@angular/language-service": "~13.4.0",
-    "@playwright/test": "1.53.2",
+    "@playwright/test": "1.56.1",
     "@types/angular": "^1.8.0",
     "@types/diff-match-patch": "^1.0.36",
     "@types/highlight.js": "^9.12.3",

zeppelin-web-angular/package.json

@@ -10,7 +10,7 @@
  * limitations under the License.
  */
 
-import { defineConfig, devices } from '@playwright/test';
+const { defineConfig, devices } = require('@playwright/test');
 
 // https://playwright.dev/docs/test-configuration
 export default defineConfig({
@@ -21,6 +21,10 @@ export default defineConfig({
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
   workers: 4,
+  timeout: 120000,
+  expect: {
+    timeout: 60000
+  },
   reporter: [
     [!!process.env.CI ? 'github' : 'list'],
     ['html', { open: !!process.env.CI ? 'never' : 'always' }],

zeppelin-web-angular/playwright.config.ts zeppelin-web-angular/playwright.config.jszeppelin-web-angular/playwright.config.ts renamed to zeppelin-web-angular/playwright.config.js

@@ -161,22 +161,6 @@
             </goals>
           </execution>
 
-          <execution>
-            <id>playwright-install</id>
-            <phase>pre-integration-test</phase>
-            <configuration>
-              <skip>${web.e2e.disabled}</skip>
-              <target unless="skipTests">
-                <exec executable="./node/npx" spawn="false">
-                  <arg line="[email protected] install --with-deps" />
-                </exec>
-              </target>
-            </configuration>
-            <goals>
-              <goal>run</goal>
-            </goals>
-          </execution>
-
           <execution>
             <id>stop-zeppelin</id>
             <phase>post-integration-test</phase>