feat: .env.playwright for palywright configuration

.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
 
@@ -140,4 +143,4 @@ yarn.lock
 /blob-report/
 /playwright/.cache/
 
-e2e/screenshots/
+e2e/envs/.env.playwright

config.toml.sample

@@ -88,5 +88,3 @@ webServerURL = "[Web server website URL. App will use the site instead of local
 #endpoint = "http://mlops.com:9500"           # FastTrack API endpoint.
 #frontendEndpoint = "http://mlops.com:9500"   # FastTrack frontend endpoint.
 
-[test]
-# screenshotPath = "[Absolute path to save screenshots. If blank, it will be saved in the e2e/screenshots directory.]"

e2e/envs/.env.playwright.sample

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

e2e/screenshot.test.ts

@@ -1,4 +1,4 @@
-import { loginAsAdmin, getConfigValue, webuiEndpoint } from './test-util';
+import { loginAsAdmin, webuiEndpoint } from './test-util';
 import { test } from '@playwright/test';
 import * as path from 'path';
 
@@ -26,13 +26,13 @@ const routes = [
   '/unauthorized',
 ];
 
+test.describe.configure({ mode: 'parallel' });
 test.describe('Screenshot all routes', () => {
   let screenshotPath: string;
-  test.beforeEach(async ({ page, request }) => {
+  test.beforeEach(async ({ page }) => {
     await loginAsAdmin(page);
-    const configValue = await getConfigValue(request, 'test.screenshotPath');
-    screenshotPath = configValue
-      ? configValue
+    screenshotPath = process.env.SCREENSHOT_PATH
+      ? path.resolve(process.env.SCREENSHOT_PATH)
       : path.resolve(__dirname + '/screenshots');
   });
 
@@ -48,6 +48,7 @@ test.describe('Screenshot all routes', () => {
         fullPage: true,
       });
     });
+
     test(`screenshot ${route} (dark mode)`, async ({ page }) => {
       await page.goto(`${webuiEndpoint}${route}`, {
         waitUntil: 'networkidle',
@@ -62,6 +63,7 @@ test.describe('Screenshot all routes', () => {
         fullPage: true,
       });
     });
+
     test(`screenshot ${route} without sidebar`, async ({ page }) => {
       await page.goto(`${webuiEndpoint}${route}`, {
         waitUntil: 'networkidle',
@@ -78,6 +80,7 @@ test.describe('Screenshot all routes', () => {
         },
       });
     });
+
     test(`screenshot ${route} without sidebar (dark mode)`, async ({
       page,
     }) => {
@@ -86,7 +89,7 @@ test.describe('Screenshot all routes', () => {
       });
       await page.getByRole('button', { name: 'moon' }).click();
       // Wait for the dark mode to be applied
-      await page.waitForTimeout(1000);
+      await page.waitForTimeout(500);
       await page.screenshot({
         path: path.resolve(
           `${screenshotPath}/${route.replace(/\//g, '_')}_no_sidebar_dark.png`,

e2e/test-util.ts

@@ -7,8 +7,7 @@ import {
   expect,
   request,
 } from '@playwright/test';
-import fs from 'fs/promises';
-import path from 'path';
+import _ from 'lodash';
 
 export const webuiEndpoint = 'http://127.0.0.1:9081';
 export const webServerEndpoint = 'http://127.0.0.1:8090';
@@ -290,34 +289,3 @@ export async function modifyConfigToml(
     });
   });
 }
-
-/**
- * Get the value of a nested key from an object using dot notation
- *
- * @param obj
- * @param key
- * @returns
- */
-function getNestedValue(obj: any, key: string) {
-  const keys = key.split('.');
-  let value = obj;
-  for (const k of keys) {
-    value = value?.[k];
-  }
-  return value;
-}
-
-/**
- * Get the value of the key from the config.toml file
- *
- * @param request
- * @param key
- * @returns
- */
-export async function getConfigValue(request: APIRequestContext, key: string) {
-  const configToml = await (
-    await request.get(`${webuiEndpoint}/config.toml`)
-  ).text();
-  const config = TOML.parse(configToml);
-  return getNestedValue(config, key);
-}

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.