[FR-344] feat: auto screenshot with Playwrite

.gitignore

@@ -1,4 +1,3 @@
-
 # Logs
 logs
 *.log
@@ -63,6 +62,10 @@ typings/
 # dotenv environment variables file
 .env
 
+# dotenv environment variables file for playwright test
+/e2e/envs/*
+!/e2e/envs/.env.playwright.sample
+
 # next.js build output
 .next
 
@@ -139,3 +142,5 @@ yarn.lock
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+/e2e/screenshots/*

e2e/envs/.env.playwright.sample

@@ -0,0 +1 @@
+SCREENSHOT_PATH=./screenshots

e2e/screenshot.test.ts

@@ -0,0 +1,106 @@
+import { loginAsAdmin, webuiEndpoint } from './test-util';
+import { test } from '@playwright/test';
+import * as path from 'path';
+
+const routes = [
+  '/summary',
+  '/session',
+  '/session/start',
+  '/serving',
+  '/service',
+  '/service/start',
+  '/import',
+  '/data',
+  '/my-environment',
+  '/agent-summary',
+  '/statistics',
+  '/environment',
+  '/agent',
+  '/settings',
+  '/maintenance',
+  '/information',
+  '/usersettings',
+  '/credential',
+  '/logs',
+  '/error',
+  '/unauthorized',
+];
+
+test.describe.configure({ mode: 'parallel' });
+test.describe.skip('Screenshot all routes', () => {
+  let screenshotPath: string;
+  test.beforeEach(async ({ page }) => {
+    await loginAsAdmin(page);
+    screenshotPath = process.env.SCREENSHOT_PATH
+      ? path.resolve(process.env.SCREENSHOT_PATH)
+      : path.resolve(__dirname + '/screenshots');
+  });
+
+  routes.forEach((route) => {
+    test(`screenshot ${route}`, async ({ page }) => {
+      await page.goto(`${webuiEndpoint}${route}`, {
+        waitUntil: 'networkidle',
+      });
+      await page.screenshot({
+        path: path.resolve(
+          `${screenshotPath}/${route.replace(/\//g, '_')}.png`,
+        ),
+        fullPage: true,
+      });
+    });
+
+    test(`screenshot ${route} (dark mode)`, async ({ page }) => {
+      await page.goto(`${webuiEndpoint}${route}`, {
+        waitUntil: 'networkidle',
+      });
+      await page.getByRole('button', { name: 'moon' }).click();
+      // Wait for the dark mode to be applied
+      await page.waitForTimeout(500);
+      await page.screenshot({
+        path: path.resolve(
+          `${screenshotPath}/${route.replace(/\//g, '_')}_dark.png`,
+        ),
+        fullPage: true,
+      });
+    });
+
+    test(`screenshot ${route} without sidebar`, async ({ page }) => {
+      await page.goto(`${webuiEndpoint}${route}`, {
+        waitUntil: 'networkidle',
+      });
+      await page.screenshot({
+        path: path.resolve(
+          `${screenshotPath}/${route.replace(/\//g, '_')}_no_sidebar.png`,
+        ),
+        clip: {
+          x: 240,
+          y: 0,
+          width: (page.viewportSize()?.width || 0) - 240,
+          height: page.viewportSize()?.height || 0,
+        },
+      });
+    });
+
+    test(`screenshot ${route} without sidebar (dark mode)`, async ({
+      page,
+    }) => {
+      await page.goto(`${webuiEndpoint}${route}`, {
+        waitUntil: 'networkidle',
+      });
+      await page.getByRole('button', { name: 'moon' }).click();
+      // Wait for the dark mode to be applied
+      await page.waitForTimeout(500);
+      await page.screenshot({
+        path: path.resolve(
+          `${screenshotPath}/${route.replace(/\//g, '_')}_no_sidebar_dark.png`,
+        ),
+        clip: {
+          x: 240,
+          y: 0,
+          width: (page.viewportSize()?.width || 0) - 240,
+          height: page.viewportSize()?.height || 0,
+        },
+      });
+    });
+  });
+});

e2e/test-util.ts

@@ -7,8 +7,6 @@ import {
   expect,
   request,
 } from '@playwright/test';
-import fs from 'fs/promises';
-import path from 'path';
 
 export const webuiEndpoint = 'http://127.0.0.1:9081';
 export const webServerEndpoint = 'http://127.0.0.1:8090';

package.json

@@ -112,7 +112,7 @@
     "@babel/preset-typescript": "^7.24.7",
     "@babel/types": "^7.25.2",
     "@electron/packager": "^18.3.3",
-    "@playwright/test": "^1.46.1",
+    "@playwright/test": "^1.49.1",
     "@rollup/plugin-commonjs": "^25.0.8",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.7",

playwright.config.ts

@@ -1,4 +1,6 @@
 import { defineConfig, devices } from '@playwright/test';
+import * as dotenv from 'dotenv';
+dotenv.config({ path: './e2e/envs/.env.playwright' });
 
 /**
  * Read environment variables from file.