test: Update Playwright E2E test settings (#2247)

- Moves E2E test user to dedicated env variables
- Fixes playwright test redirect issue

---------

Co-authored-by: Emma Segal-Grossman <hi@emma.cafe>

Author: SuaYoo

.github/workflows/ui-tests-playwright.yml

@@ -14,7 +14,8 @@ jobs:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     env:
-      DEV_PASSWORD: ${{ secrets.DEV_PASSWORD }}
+      E2E_USER_EMAIL: ${{ secrets.E2E_USER_EMAIL }}
+      E2E_USER_PASSWORD: ${{ secrets.E2E_USER_PASSWORD }}
       API_BASE_URL: ${{ secrets.API_BASE_URL }}
       working-directory: ./frontend
     steps:
@@ -65,7 +66,8 @@ jobs:
         run: |
           cd frontend
           touch .env
-          echo DEV_PASSWORD="${{ secrets.DEV_PASSWORD }}" >> .env
+          echo E2E_USER_EMAIL="${{ secrets.E2E_USER_EMAIL }}" >> .env
+          echo E2E_USER_PASSWORD="${{ secrets.E2E_USER_PASSWORD }}" >> .env
           echo API_BASE_URL=${{ secrets.API_BASE_URL }} >> .env
           cat .env
 

frontend/package.json

@@ -125,7 +125,8 @@
     "@open-wc/testing": "^3.2.0",
     "@playwright/test": "1.49.0",
     "@web/test-runner": "^0.13.22",
-    "@web/test-runner-playwright": "^0.11.0"
+    "@web/test-runner-playwright": "^0.11.0",
+    "http-proxy-middleware": "^2.0.7"
   },
   "lint-staged": {
     "*.{ts,js,html,css,json,webmanifest}": "prettier --write"

frontend/playwright.config.ts

@@ -1,10 +1,14 @@
 import { defineConfig, devices } from "@playwright/test";
 
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// require('dotenv').config();
+if (!process.env.CI) {
+  /**
+   * Read environment variables from file.
+   * https://github.com/motdotla/dotenv
+   */
+  require("dotenv").config({
+    path: ".env.local",
+  });
+}
 
 /**
  * See https://playwright.dev/docs/test-configuration.

frontend/sample.env.local

@@ -1,3 +1,5 @@
 API_BASE_URL=
 DOCS_URL=https://docs.browsertrix.com/
+E2E_USER_EMAIL=
+E2E_USER_PASSWORD=
 GLITCHTIP_DSN=

frontend/scripts/serve.js

@@ -27,8 +27,8 @@ Object.keys(devServer.proxy).forEach((path) => {
   app.use(
     path,
     createProxyMiddleware({
-      target: devServer.proxy[path],
-      changeOrigin: true,
+      ...devServer.proxy[path],
+      followRedirects: true,
     }),
   );
 });

frontend/tests/login.spec.ts

@@ -11,15 +11,22 @@ test("test", async ({ baseURL }) => {
     await page.waitForLoadState("load");
     await page.waitForSelector('input[name="username"]');
     await page.click('input[name="username"]');
-    await page.fill('input[name="username"]', "dev@webrecorder.net");
+
+    const e2eEmail = process.env.E2E_USER_EMAIL;
+    if (!e2eEmail) {
+      throw new Error(
+        "E2E_USER_EMAIL environment variable is not defined or null.",
+      );
+    }
+    await page.fill('input[name="username"]', e2eEmail);
     await page.click('input[name="password"]');
-    const devPassword = process.env.DEV_PASSWORD;
-    if (!devPassword) {
+    const e2ePassword = process.env.E2E_USER_PASSWORD;
+    if (!e2ePassword) {
       throw new Error(
-        "DEV_PASSWORD environment variable is not defined or null.",
+        "E2E_USER_PASSWORD environment variable is not defined or null.",
       );
     }
-    await page.fill('input[name="password"]', devPassword);
+    await page.fill('input[name="password"]', e2ePassword);
     await page.click('sl-button:has-text("Log In")');
   } finally {
     await browser.close();