From 02eeaca24592d55acbcbdbc9c135df6753c06be2 Mon Sep 17 00:00:00 2001
From: sua yoo <sua@webrecorder.org>
Date: Mon, 16 Dec 2024 17:36:21 -0800
Subject: [PATCH] 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>
---
 .github/workflows/ui-tests-playwright.yml |  6 ++++--
 frontend/package.json                     |  3 ++-
 frontend/playwright.config.ts             | 14 +++++++++-----
 frontend/sample.env.local                 |  2 ++
 frontend/scripts/serve.js                 |  4 ++--
 frontend/tests/login.spec.ts              | 19 +++++++++++++------
 frontend/yarn.lock                        | 11 +++++++++++
 7 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/.github/workflows/ui-tests-playwright.yml b/.github/workflows/ui-tests-playwright.yml
index 8cc5ba32..16e7c0e9 100644
--- a/.github/workflows/ui-tests-playwright.yml
+++ b/.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
 
diff --git a/frontend/package.json b/frontend/package.json
index 06c0e8f7..54177273 100644
--- a/frontend/package.json
+++ b/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"
diff --git a/frontend/playwright.config.ts b/frontend/playwright.config.ts
index 58a5212e..6d5d0038 100644
--- a/frontend/playwright.config.ts
+++ b/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.
diff --git a/frontend/sample.env.local b/frontend/sample.env.local
index c8dc6e55..74c36fce 100644
--- a/frontend/sample.env.local
+++ b/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=
diff --git a/frontend/scripts/serve.js b/frontend/scripts/serve.js
index b790435d..efc7126b 100644
--- a/frontend/scripts/serve.js
+++ b/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,
     }),
   );
 });
diff --git a/frontend/tests/login.spec.ts b/frontend/tests/login.spec.ts
index ad20737d..68e6a90a 100644
--- a/frontend/tests/login.spec.ts
+++ b/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");
-    await page.click('input[name="password"]');
-    const devPassword = process.env.DEV_PASSWORD;
-    if (!devPassword) {
+
+    const e2eEmail = process.env.E2E_USER_EMAIL;
+    if (!e2eEmail) {
       throw new Error(
-        "DEV_PASSWORD environment variable is not defined or null.",
+        "E2E_USER_EMAIL environment variable is not defined or null.",
       );
     }
-    await page.fill('input[name="password"]', devPassword);
+    await page.fill('input[name="username"]', e2eEmail);
+    await page.click('input[name="password"]');
+    const e2ePassword = process.env.E2E_USER_PASSWORD;
+    if (!e2ePassword) {
+      throw new Error(
+        "E2E_USER_PASSWORD environment variable is not defined or null.",
+      );
+    }
+    await page.fill('input[name="password"]', e2ePassword);
     await page.click('sl-button:has-text("Log In")');
   } finally {
     await browser.close();
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index dc3f54d7..a43b297d 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -5096,6 +5096,17 @@ http-proxy-middleware@^2.0.3:
     is-plain-obj "^3.0.0"
     micromatch "^4.0.2"
 
+http-proxy-middleware@^2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-2.0.7.tgz#915f236d92ae98ef48278a95dedf17e991936ec6"
+  integrity sha512-fgVY8AV7qU7z/MmXJ/rxwbrtQH4jBQ9m7kp3llF0liB7glmFeVZFBepQb32T3y8n8k2+AEYuMPCpinYW+/CuRA==
+  dependencies:
+    "@types/http-proxy" "^1.17.8"
+    http-proxy "^1.18.1"
+    is-glob "^4.0.1"
+    is-plain-obj "^3.0.0"
+    micromatch "^4.0.2"
+
 http-proxy@^1.18.1:
   version "1.18.1"
   resolved "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz"