🔧 Update Playwright config and tests to use env variables (#1266)

Author: alejsdev

frontend/package-lock.json

@@ -37,6 +37,7 @@
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
     "@vitejs/plugin-react-swc": "^3.5.0",
+    "dotenv": "^16.4.5",
     "typescript": "^5.2.2",
     "vite": "^5.0.13"
   }

frontend/package.json

@@ -1,5 +1,6 @@
 import { defineConfig, devices } from '@playwright/test';
 
+
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv

frontend/playwright.config.ts

@@ -1,11 +1,13 @@
 import { test as setup } from "@playwright/test"
+import { firstSuperuser, firstSuperuserPassword } from "./config.ts"
 
 const authFile = "playwright/.auth/user.json"
 
+
 setup("authenticate", async ({ page }) => {
   await page.goto("/login")
-  await page.getByPlaceholder("Email").fill("[email protected]")
-  await page.getByPlaceholder("Password").fill("changethis")
+  await page.getByPlaceholder("Email").fill(firstSuperuser)
+  await page.getByPlaceholder("Password").fill(firstSuperuserPassword)
   await page.getByRole("button", { name: "Log In" }).click()
   await page.waitForURL("/")
   await page.context().storageState({ path: authFile })

frontend/tests/auth.setup.ts

@@ -0,0 +1,21 @@
+import dotenv from 'dotenv';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+dotenv.config({ path: path.join(__dirname, '../../.env') });
+
+const { FIRST_SUPERUSER, FIRST_SUPERUSER_PASSWORD } = process.env;
+
+if (typeof FIRST_SUPERUSER !== "string") {
+  throw new Error("Environment variable FIRST_SUPERUSER is undefined");
+}
+
+if (typeof FIRST_SUPERUSER_PASSWORD !== "string") {
+  throw new Error("Environment variable FIRST_SUPERUSER_PASSWORD is undefined");
+}
+
+export const firstSuperuser = FIRST_SUPERUSER as string;
+export const firstSuperuserPassword = FIRST_SUPERUSER_PASSWORD as string;

frontend/tests/config.ts

@@ -1,4 +1,5 @@
 import { type Page, expect, test } from "@playwright/test"
+import { firstSuperuser, firstSuperuserPassword } from "./config.ts"
 
 test.use({ storageState: { cookies: [], origins: [] } })
 
@@ -46,7 +47,7 @@ test("Forgot Password link is visible", async ({ page }) => {
 test("Log in with valid email and password ", async ({ page }) => {
   await page.goto("/login")
 
-  await fillForm(page, "[email protected]", "changethis")
+  await fillForm(page, firstSuperuser, firstSuperuserPassword)
   await page.getByRole("button", { name: "Log In" }).click()
 
   await page.waitForURL("/")
@@ -59,16 +60,16 @@ test("Log in with valid email and password ", async ({ page }) => {
 test("Log in with invalid email", async ({ page }) => {
   await page.goto("/login")
 
-  await fillForm(page, "invalidemail", "changethis")
+  await fillForm(page, "invalidemail", firstSuperuserPassword)
   await page.getByRole("button", { name: "Log In" }).click()
 
   await expect(page.getByText("Invalid email address")).toBeVisible()
 })
 
 test("Log in with invalid password", async ({ page }) => {
   await page.goto("/login")
-
-  await fillForm(page, "[email protected]", "changethat")
+  // TODO: Add a random password utility
+  await fillForm(page, firstSuperuser, "changethat")
   await page.getByRole("button", { name: "Log In" }).click()
 
   await expect(page.getByText("Incorrect email or password")).toBeVisible()
@@ -79,7 +80,7 @@ test("Log in with invalid password", async ({ page }) => {
 test("Successful log out", async ({ page }) => {
   await page.goto("/login")
 
-  await fillForm(page, "[email protected]", "changethis")
+  await fillForm(page, firstSuperuser, firstSuperuserPassword)
   await page.getByRole("button", { name: "Log In" }).click()
 
   await page.waitForURL("/")
@@ -96,7 +97,7 @@ test("Successful log out", async ({ page }) => {
 test("Logged-out user cannot access protected routes", async ({ page }) => {
   await page.goto("/login")
 
-  await fillForm(page, "[email protected]", "changethis")
+  await fillForm(page, firstSuperuser, firstSuperuserPassword)
   await page.getByRole("button", { name: "Log In" }).click()
 
   await page.waitForURL("/")

frontend/tests/login.spec.ts

@@ -20,6 +20,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"],
+  "include": ["src", "*.ts", "**/*.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }