From 4fb6a41f7a867c93c6dc3d94873f9874b2ae5801 Mon Sep 17 00:00:00 2001
From: joshwanf <17016446+joshwanf@users.noreply.github.com>
Date: Wed, 1 Jul 2026 18:41:13 -0400
Subject: [PATCH 1/6] Add data-testid property to UI buttons and update e2e
 tests with UI changes

---
 bin/run-e2e-tests                             | 100 ++++++++++++
 .../components/homeScreen/NewScreenerForm.tsx |   1 +
 .../components/homeScreen/ProjectsList.tsx    |   1 +
 .../src/components/project/FormEditorView.tsx |   3 +
 .../src/components/project/Publish.tsx        |   1 +
 .../benefitList/BenefitList.tsx               |   2 +
 .../benefitList/modals/AddNewBenefitModal.tsx |   1 +
 .../EligibilityCheckListView.tsx              |   6 +-
 .../src/components/shared/BdtNavbar.tsx       |   1 +
 e2e/tests/screener.spec.ts                    | 151 ++++++++++--------
 e2e/tests/smokeTest.spec.ts                   |  21 +--
 11 files changed, 213 insertions(+), 75 deletions(-)
 create mode 100755 bin/run-e2e-tests

diff --git a/bin/run-e2e-tests b/bin/run-e2e-tests
new file mode 100755
index 00000000..8d6e4517
--- /dev/null
+++ b/bin/run-e2e-tests
@@ -0,0 +1,100 @@
+#!/usr/bin/env bash
+
+# Run the Playwright e2e suite against the local dev stack.
+#
+# This script temporarily replaces root emulator-data with the e2e fixture data
+# and restores the previous emulator-data directory before exiting.
+
+set -euo pipefail
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+PROJECT_ROOT="$(dirname "$SCRIPT_DIR")"
+BACKUP_DIR=""
+SERVICES_STARTED=0
+
+cd "$PROJECT_ROOT"
+
+cleanup() {
+  local exit_code=$?
+
+  if [ "$SERVICES_STARTED" -eq 1 ]; then
+    devbox services stop || true
+  fi
+
+  rm -rf emulator-data
+  if [ -n "$BACKUP_DIR" ] && [ -d "$BACKUP_DIR/emulator-data" ]; then
+    mv "$BACKUP_DIR/emulator-data" emulator-data
+    rmdir "$BACKUP_DIR" 2>/dev/null || true
+  fi
+
+  exit "$exit_code"
+}
+
+trap cleanup EXIT
+
+ensure_env_file() {
+  local target="$1"
+  local example="$2"
+
+  if [ ! -f "$target" ]; then
+    cp "$example" "$target"
+  fi
+}
+
+wait_for_url() {
+  local name="$1"
+  local url="$2"
+  local max_attempts="${3:-90}"
+  local attempt=1
+
+  echo "Waiting for $name at $url"
+  while [ "$attempt" -le "$max_attempts" ]; do
+    if curl --silent --show-error --output /dev/null --max-time 2 "$url"; then
+      echo "$name is ready"
+      return 0
+    fi
+
+    sleep 1
+    attempt=$((attempt + 1))
+  done
+
+  echo "Timed out waiting for $name at $url" >&2
+  return 1
+}
+
+if ! command -v devbox >/dev/null 2>&1; then
+  echo "devbox is required. Install it with bin/install-devbox first." >&2
+  exit 1
+fi
+
+ensure_env_file ".env" ".env.example"
+ensure_env_file "builder-frontend/.env" "builder-frontend/.env.example"
+ensure_env_file "builder-api/.env" "builder-api/.env.example"
+ensure_env_file "library-api/.env" "library-api/.env.example"
+
+devbox run install-builder-frontend-ci
+
+devbox services stop || true
+
+if [ -d emulator-data ]; then
+  BACKUP_DIR="$(mktemp -d)"
+  mv emulator-data "$BACKUP_DIR/emulator-data"
+fi
+
+cp -R e2e/e2e-emulator-data emulator-data
+
+devbox services up -b
+SERVICES_STARTED=1
+
+wait_for_url "Firestore emulator" "http://localhost:8080/"
+wait_for_url "Storage emulator" "http://localhost:9199/"
+wait_for_url "Auth emulator" "http://localhost:9099/"
+wait_for_url "Library API" "http://localhost:8083/"
+wait_for_url "builder frontend" "http://localhost:5173/"
+
+(
+  cd e2e
+  npm ci
+  npx playwright install
+  npx playwright test "$@"
+)
diff --git a/builder-frontend/src/components/homeScreen/NewScreenerForm.tsx b/builder-frontend/src/components/homeScreen/NewScreenerForm.tsx
index 15f3794f..9959e941 100644
--- a/builder-frontend/src/components/homeScreen/NewScreenerForm.tsx
+++ b/builder-frontend/src/components/homeScreen/NewScreenerForm.tsx
@@ -44,6 +44,7 @@ export default function NewScreenerForm({}) {
           type="submit"
           variant="secondary"
           id="new-screener-submit"
+          data-testid="submit-new-screener-button"
           disabled={isLoading()}
         >
           Create
diff --git a/builder-frontend/src/components/homeScreen/ProjectsList.tsx b/builder-frontend/src/components/homeScreen/ProjectsList.tsx
index 040a1fb1..83268ce8 100644
--- a/builder-frontend/src/components/homeScreen/ProjectsList.tsx
+++ b/builder-frontend/src/components/homeScreen/ProjectsList.tsx
@@ -108,6 +108,7 @@ export default function ProjectsList() {
           build custom checks that meet your specific needs.
         </div>
         <button
+          data-testid="create-new-screener-button"
           onClick={() => setIsNewScreenerModalVisible(true)}
           class="
                 mt-2 px-4 py-2 w-fit cursor-pointer bg-blue-500
diff --git a/builder-frontend/src/components/project/FormEditorView.tsx b/builder-frontend/src/components/project/FormEditorView.tsx
index be21105a..836cfa16 100644
--- a/builder-frontend/src/components/project/FormEditorView.tsx
+++ b/builder-frontend/src/components/project/FormEditorView.tsx
@@ -196,6 +196,7 @@ function FormEditorView({ formSchema, setFormSchema }) {
         <Switch>
           <Match when={isUnsaved()}>
             <button
+              data-testid="form-editor-save-button"
               onClick={handleSave}
               class="btn-default btn-yellow shadow-[0_0_10px_rgba(0,0,0,0.4)]"
             >
@@ -204,6 +205,7 @@ function FormEditorView({ formSchema, setFormSchema }) {
           </Match>
           <Match when={isSaving()}>
             <button
+              data-testid="form-editor-save-button"
               onClick={handleSave}
               class="btn-default btn-gray cursor-not-allowed shadow-[0_0_10px_rgba(0,0,0,0.4)]"
             >
@@ -212,6 +214,7 @@ function FormEditorView({ formSchema, setFormSchema }) {
           </Match>
           <Match when={!isUnsaved() && !isSaving()}>
             <button
+              data-testid="form-editor-save-button"
               onClick={handleSave}
               class="btn-default btn-blue shadow-[0_0_10px_rgba(0,0,0,0.4)]"
             >
diff --git a/builder-frontend/src/components/project/Publish.tsx b/builder-frontend/src/components/project/Publish.tsx
index a3e35288..72e499f1 100644
--- a/builder-frontend/src/components/project/Publish.tsx
+++ b/builder-frontend/src/components/project/Publish.tsx
@@ -78,6 +78,7 @@ export default function Publish({ project, refetchProject }) {
             <Button
               variant="secondary"
               id="publish-screener-button"
+              data-testid="publish-screener-button"
               onClick={handlePublish}
               disabled={isLoading()}
             >
diff --git a/builder-frontend/src/components/project/manageBenefits/benefitList/BenefitList.tsx b/builder-frontend/src/components/project/manageBenefits/benefitList/BenefitList.tsx
index 578f6787..44c215e9 100644
--- a/builder-frontend/src/components/project/manageBenefits/benefitList/BenefitList.tsx
+++ b/builder-frontend/src/components/project/manageBenefits/benefitList/BenefitList.tsx
@@ -56,6 +56,7 @@ const BenefitList = ({
         benefit can have associated eligibility checks.
       </div>
       <div
+        data-testid="create-new-benefit-button"
         class="btn-default btn-blue mb-3 mr-1"
         onClick={() => {
           setAddingNewBenefit(true);
@@ -154,6 +155,7 @@ const BenefitCard = ({
           class="p-4 flex justify-end space-x-2"
         >
           <div
+            data-testid={`edit-benefit-${benefit.id}`}
             class="btn-default btn-gray"
             onClick={() => {
               setBenefitIdToConfigure(benefit.id);
diff --git a/builder-frontend/src/components/project/manageBenefits/benefitList/modals/AddNewBenefitModal.tsx b/builder-frontend/src/components/project/manageBenefits/benefitList/modals/AddNewBenefitModal.tsx
index 00785256..d0f41c5b 100644
--- a/builder-frontend/src/components/project/manageBenefits/benefitList/modals/AddNewBenefitModal.tsx
+++ b/builder-frontend/src/components/project/manageBenefits/benefitList/modals/AddNewBenefitModal.tsx
@@ -59,6 +59,7 @@ const AddNewBenefitModal = (
           <div
             class={"btn-default bg-sky-600 text-white " + addButtonClasses()}
             id="new-benefit-submit"
+            data-testid="submit-new-benefit-button"
             onClick={async () => {
               if (isAddDisabled()) {
                 console.log("Please fill in all fields.");
diff --git a/builder-frontend/src/components/project/manageBenefits/configureBenefit/EligibilityCheckListView.tsx b/builder-frontend/src/components/project/manageBenefits/configureBenefit/EligibilityCheckListView.tsx
index 0f664edb..c2167f5b 100644
--- a/builder-frontend/src/components/project/manageBenefits/configureBenefit/EligibilityCheckListView.tsx
+++ b/builder-frontend/src/components/project/manageBenefits/configureBenefit/EligibilityCheckListView.tsx
@@ -143,7 +143,11 @@ const EligibilityCheckRow = ({
   return (
     <tr id={"check-row_" + check.name}>
       <td class="eligibility-check-table-cell border-top">
-        <div class="btn-default btn-blue" onClick={() => onAdd(check)}>
+        <div
+          data-testid={`add-check-${check.name}`}
+          class="btn-default btn-blue"
+          onClick={() => onAdd(check)}
+        >
           Add
         </div>
       </td>
diff --git a/builder-frontend/src/components/shared/BdtNavbar.tsx b/builder-frontend/src/components/shared/BdtNavbar.tsx
index 66173bee..cf21ad4e 100644
--- a/builder-frontend/src/components/shared/BdtNavbar.tsx
+++ b/builder-frontend/src/components/shared/BdtNavbar.tsx
@@ -24,6 +24,7 @@ const BdtNavbar = ({ navProps }: { navProps: Accessor<NavbarProps> }) => {
       </Show>
       {navProps().tabDefs.map((tab) => (
         <button
+          data-testid={`project-tab-${tab.key}`}
           class={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
             navProps().activeTabKey() === tab.key
               ? "border-b border-gray-700 text-gray-700 hover:bg-gray-200"
diff --git a/e2e/tests/screener.spec.ts b/e2e/tests/screener.spec.ts
index 947f5598..6f1119d1 100644
--- a/e2e/tests/screener.spec.ts
+++ b/e2e/tests/screener.spec.ts
@@ -1,6 +1,6 @@
-import { test, expect, Page } from '@playwright/test';
+import { test, expect, Page } from "@playwright/test";
 
-import { authLogin } from './authLogin';
+import { authLogin } from "./authLogin";
 import {
   resetEmulator,
   seedScreener,
@@ -9,78 +9,88 @@ import {
   seedScreenerWithForm,
   TEST_SCREENER_ID,
   TEST_BENEFIT_ID,
-} from './firestore';
+} from "./firestore";
 
 // ============================================================
 // Reusable Step Functions
 // ============================================================
 
 const createScreenerViaUI = async (page: Page, name = "Test Screener") => {
-  await test.step('Create screener via UI', async () => {
-    await page.getByText("Create new screener").click();
-    await page.locator("#new-screener-name").fill(name);
-    await page.locator("#new-screener-submit").click();
+  await test.step("Create screener via UI", async () => {
+    await page.getByTestId("create-new-screener-button").click();
+    await page.locator("#screenerName").fill(name);
+    await page.getByTestId("submit-new-screener-button").click();
   });
 };
 
-const createBenefitViaUI = async (page: Page, name = "Test Benefit", description = "Description") => {
-  await test.step('Create benefit via UI', async () => {
-    await page.getByText("Create new benefit").click();
+const createBenefitViaUI = async (
+  page: Page,
+  name = "Test Benefit",
+  description = "Description",
+) => {
+  await test.step("Create benefit via UI", async () => {
+    await page.getByTestId("create-new-benefit-button").click();
     await page.locator("#new-benefit-name").fill(name);
     await page.locator("#new-benefit-description").fill(description);
-    await page.locator("#new-benefit-submit").click();
+    await page.getByTestId("submit-new-benefit-button").click();
   });
 };
 
 const addOwnerOccupantCheck = async (page: Page) => {
-  await test.step('Add owner-occupant check', async () => {
-    const checkRowLocator = page.locator("#check-row_owner-occupant > td:first-child > div.btn-default");
-    await checkRowLocator.waitFor({ state: 'visible' });
+  await test.step("Add owner-occupant check", async () => {
+    const checkRowLocator = page.getByTestId("add-check-owner-occupant");
+    await checkRowLocator.waitFor({ state: "visible" });
     await checkRowLocator.click();
   });
 };
 
 const navigateToBenefitConfig = async (page: Page) => {
-  await test.step('Navigate to benefit configuration', async () => {
-    await page.getByText("Edit", { exact: true }).click();
+  await test.step("Navigate to benefit configuration", async () => {
+    await page.getByTestId("edit-benefit-test-benefit-id").click();
   });
 };
 
 const navigateToFormEditor = async (page: Page) => {
-  await test.step('Navigate to form editor', async () => {
-    await page.getByText("Form Editor", { exact: true }).click();
+  await test.step("Navigate to form editor", async () => {
+    await page.getByTestId("project-tab-formEditor").click();
   });
 };
 
 const createFormWithCheckbox = async (page: Page) => {
-  await test.step('Create form with checkbox', async () => {
-    const checkboxComponentLoc = page.locator('[data-field-type="checkbox"]:has(span:has-text("Checkbox"))');
-    await checkboxComponentLoc.waitFor({ state: 'visible' });
-    await checkboxComponentLoc.dragTo(page.locator('[data-id="BDT Form"].fjs-drop-container-vertical'));
-
-    await page.locator('[data-title="General"].bio-properties-panel-group-header-title').click();
-    await page.getByLabel('Key').selectOption('simpleChecks.ownerOccupant');
-    await page.getByLabel('Field label').fill('Is owner occupant?');
-
-    await page.locator("#form-editor-save_container > div").click();
+  await test.step("Create form with checkbox", async () => {
+    const checkboxComponentLoc = page.locator(
+      '[data-field-type="checkbox"]:has(span:has-text("Checkbox"))',
+    );
+    await checkboxComponentLoc.waitFor({ state: "visible" });
+    await checkboxComponentLoc.dragTo(
+      page.locator('[data-id="BDT Form"].fjs-drop-container-vertical'),
+    );
+
+    await page
+      .locator('[data-title="General"].bio-properties-panel-group-header-title')
+      .click();
+    await page.getByLabel("Key").selectOption("simpleChecks.ownerOccupant");
+    await page.getByLabel("Field label").fill("Is owner occupant?");
+
+    await page.getByTestId("form-editor-save-button").click();
   });
 };
 
 const navigateToPreview = async (page: Page) => {
-  await test.step('Navigate to preview', async () => {
-    await page.getByText("Preview", { exact: true }).click();
+  await test.step("Navigate to preview", async () => {
+    await page.getByTestId("project-tab-preview").click();
   });
 };
 
 const navigateToPublish = async (page: Page) => {
-  await test.step('Navigate to publish', async () => {
-    await page.getByText("Publish", { exact: true }).click();
+  await test.step("Navigate to publish", async () => {
+    await page.getByTestId("project-tab-publish").click();
   });
 };
 
 const publishScreener = async (page: Page) => {
-  await test.step('Publish screener', async () => {
-    await page.locator('button#publish-screener-button').click();
+  await test.step("Publish screener", async () => {
+    await page.getByTestId("publish-screener-button").click();
   });
 };
 
@@ -88,24 +98,24 @@ const publishScreener = async (page: Page) => {
 // Tests
 // ============================================================
 
-test.describe('Screener Builder Tests', () => {
+test.describe("Screener Builder Tests", () => {
   test.beforeEach("Clear Emulator DB (before)", resetEmulator);
   test.beforeEach("Login", authLogin);
   test.afterEach("Clear Emulator DB (after)", resetEmulator);
 
-  test('User can create a new screener', async ({ page }) => {
+  test("User can create a new screener", async ({ page }) => {
     // This test starts from scratch - no seeding needed
-    await expect(page.locator('#manage-benefits-title')).toBeHidden();
+    await expect(page.locator("#manage-benefits-title")).toBeHidden();
 
     await createScreenerViaUI(page);
 
-    await expect(page.locator('#manage-benefits-title')).toBeVisible();
+    await expect(page.locator("#manage-benefits-title")).toBeVisible();
   });
 
-  test('User can add a benefit to a Screener', async ({ page }) => {
+  test("User can add a benefit to a Screener", async ({ page }) => {
     // Seed: screener exists, but no benefits
     await seedScreener();
-    await page.goto(`/project/${TEST_SCREENER_ID}`);
+    await page.goto(`/projects/${TEST_SCREENER_ID}`);
 
     const editButtonLocator = page.getByText("Edit", { exact: true });
     await expect(editButtonLocator).toHaveCount(0);
@@ -115,29 +125,36 @@ test.describe('Screener Builder Tests', () => {
     await expect(editButtonLocator).toHaveCount(1);
   });
 
-  test('User can configure a Benefit', async ({ page }) => {
+  test("User can configure a Benefit", async ({ page }) => {
     // Seed: screener with benefit exists, but no checks configured
     await seedScreenerWithBenefit();
-    await page.goto(`/project/${TEST_SCREENER_ID}`);
+    await page.goto(`/projects/${TEST_SCREENER_ID}`);
     await navigateToBenefitConfig(page);
 
-    const firstSelectedCheckLoc = page.locator("#selected-eligibility-checks_container > div.cursor-pointer");
-    await expect(firstSelectedCheckLoc).toBeHidden();
+    await expect(
+      page.getByText("No eligibility checks selected"),
+    ).toBeVisible();
 
     await addOwnerOccupantCheck(page);
 
-    await expect(firstSelectedCheckLoc).toBeVisible();
+    await expect(
+      page
+        .locator("#selected-eligibility-checks_container")
+        .getByText("Owner-occupant"),
+    ).toBeVisible();
   });
 
-  test('User can create a Screener Form', async ({ page }) => {
+  test("User can create a Screener Form", async ({ page }) => {
     // Seed: screener with benefit and check configured, but no form
     await seedScreenerWithConfiguredBenefit();
-    await page.goto(`/project/${TEST_SCREENER_ID}`);
+    await page.goto(`/projects/${TEST_SCREENER_ID}`);
     await navigateToBenefitConfig(page);
 
     await navigateToFormEditor(page);
 
-    const checkboxComponentLabel = page.locator("label.fjs-form-field-label:has-text('Checkbox')");
+    const checkboxComponentLabel = page.locator(
+      "label.fjs-form-field-label:has-text('Checkbox')",
+    );
     await expect(checkboxComponentLabel).toBeHidden();
 
     await createFormWithCheckbox(page);
@@ -145,47 +162,53 @@ test.describe('Screener Builder Tests', () => {
     await expect(checkboxComponentLabel).toBeVisible();
   });
 
-  test('User can Preview a Screener Form', async ({ page }) => {
+  test("User can Preview a Screener Form", async ({ page }) => {
     // Seed: complete screener with form
     await seedScreenerWithForm();
-    await page.goto(`/project/${TEST_SCREENER_ID}`);
+    await page.goto(`/projects/${TEST_SCREENER_ID}`);
 
     await navigateToPreview(page);
 
-    await test.step('Verify initial state shows ineligible', async () => {
-      const benefitsResultsTitleLoc = page.locator('#screener-results:has(div:has-text("Benefits"))');
+    await test.step("Verify initial state shows ineligible", async () => {
+      const benefitsResultsTitleLoc = page.locator(
+        '#screener-results:has(div:has-text("Benefits"))',
+      );
       await expect(benefitsResultsTitleLoc).toBeVisible();
 
-      const benefitResultLoc = page.locator('div#benefit-result-title_0');
+      const benefitResultLoc = page.locator("div#benefit-result-title_0");
       await expect(benefitResultLoc).toBeVisible();
-      await expect(benefitResultLoc).toHaveText('Test Benefit: Ineligible');
+      await expect(benefitResultLoc).toHaveText("Test Benefit: Ineligible");
     });
 
-    await test.step('Check the checkbox and verify eligible', async () => {
+    await test.step("Check the checkbox and verify eligible", async () => {
       await page.locator("[type='checkbox'].fjs-input").click();
 
-      const benefitResultLoc = page.locator('div#benefit-result-title_0');
-      await expect(benefitResultLoc).toHaveText('Test Benefit: Eligible');
+      const benefitResultLoc = page.locator("div#benefit-result-title_0");
+      await expect(benefitResultLoc).toHaveText("Test Benefit: Eligible");
     });
   });
 
-  test('User can Publish a Screener', async ({ page }) => {
+  test("User can Publish a Screener", async ({ page }) => {
     // Seed: complete screener with form
     await seedScreenerWithForm();
-    await page.goto(`/project/${TEST_SCREENER_ID}`);
+    await page.goto(`/projects/${TEST_SCREENER_ID}`);
 
     await navigateToPublish(page);
 
-    const screenerUrlInfo = page.locator('div#screener-url-info');
+    const screenerUrlInfo = page.locator("div#screener-url-info");
 
-    await test.step('Verify unpublished state', async () => {
-      await expect(screenerUrlInfo).toHaveText('Screener URL:Publish screener to create public url.');
+    await test.step("Verify unpublished state", async () => {
+      await expect(screenerUrlInfo).toHaveText(
+        "Screener URL:Publish screener to create public url.",
+      );
     });
 
     await publishScreener(page);
 
-    await test.step('Verify published state', async () => {
-      await expect(screenerUrlInfo).not.toHaveText('Screener URL:Publish screener to create public url.');
+    await test.step("Verify published state", async () => {
+      await expect(screenerUrlInfo).not.toHaveText(
+        "Screener URL:Publish screener to create public url.",
+      );
     });
   });
 });
diff --git a/e2e/tests/smokeTest.spec.ts b/e2e/tests/smokeTest.spec.ts
index 6f51218b..cd8a09e9 100644
--- a/e2e/tests/smokeTest.spec.ts
+++ b/e2e/tests/smokeTest.spec.ts
@@ -1,25 +1,26 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from "@playwright/test";
 
-import { authLogin } from './authLogin';
-import { resetEmulator } from './firestore';
+import { authLogin } from "./authLogin";
+import { resetEmulator } from "./firestore";
 
-test.describe('Smoke Tests', () => {
+test.describe("Smoke Tests", () => {
   test.beforeEach("Clear Emulator DB (before)", resetEmulator);
   test.beforeEach("Login", authLogin);
   test.afterEach("Clear Emulator DB (after)", resetEmulator);
 
-  test('user can view landing page after login', async ({ page }) => {
+  test("user can view landing page after login", async ({ page }) => {
     // Authentication done by beforeEach(...) hook
 
     // Verify the page title
-    await expect(page).toHaveTitle(/Benefit Decision Toolkit/);
+    await expect(page).toHaveTitle("BDT - Projects List");
 
     // Verify key elements of the landing page are visible
     // Header with logout button indicates user is authenticated
-    await expect(page.getByText('Welcome to Benefit Decision Toolkit!')).toBeVisible();
+    await expect(
+      page.getByText("Welcome to Benefit Decision Toolkit!"),
+    ).toBeVisible();
 
-    // Navigation tabs should be visible
-    await expect(page.getByRole('button', { name: 'Screeners' })).toBeVisible();
-    await expect(page.getByRole('button', { name: 'Eligibility checks' })).toBeVisible();
+    await expect(page.getByRole("img", { name: "BDT logo" })).toBeVisible();
+    await expect(page.getByTestId("create-new-screener-button")).toBeVisible();
   });
 });

From e5fa5ace0a7b93739824d214e0040d56cb5f1878 Mon Sep 17 00:00:00 2001
From: joshwanf <17016446+joshwanf@users.noreply.github.com>
Date: Wed, 1 Jul 2026 20:52:24 -0400
Subject: [PATCH 2/6] Changed e2e test run order

---
 .github/workflows/run-e2e-tests.yml | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/run-e2e-tests.yml b/.github/workflows/run-e2e-tests.yml
index 6eb54c02..6252c1d9 100644
--- a/.github/workflows/run-e2e-tests.yml
+++ b/.github/workflows/run-e2e-tests.yml
@@ -81,10 +81,6 @@ jobs:
           rm -rf emulator-data
           cp -r e2e/e2e-emulator-data emulator-data
 
-      # 3) Run App + E2E Test #
-      - name: Run all Devbox services
-        run: devbox services up -b
-
       - name: Install Playwright dependencies
         run: npm ci
         working-directory: e2e
@@ -93,6 +89,10 @@ jobs:
         run: npx playwright install --with-deps
         working-directory: e2e
 
+      # 3) Run App + E2E Test #
+      - name: Run all Devbox services
+        run: devbox services up -b
+
       - name: Wait for App to be available
         uses: nev7n/wait_for_response@v1
         with:

From cb4e927500cff3538e93d6c161c0617606180479 Mon Sep 17 00:00:00 2001
From: joshwanf <17016446+joshwanf@users.noreply.github.com>
Date: Wed, 1 Jul 2026 21:00:45 -0400
Subject: [PATCH 3/6] Limit number of browsers Playwright installs

---
 .github/workflows/run-e2e-tests.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/run-e2e-tests.yml b/.github/workflows/run-e2e-tests.yml
index 6252c1d9..2d20165c 100644
--- a/.github/workflows/run-e2e-tests.yml
+++ b/.github/workflows/run-e2e-tests.yml
@@ -86,7 +86,7 @@ jobs:
         working-directory: e2e
 
       - name: Install Playwright Browsers
-        run: npx playwright install --with-deps
+        run: DEBUG=pw:install npx --no-install playwright install --with-deps chromium
         working-directory: e2e
 
       # 3) Run App + E2E Test #

From b09104636456e362db764d3c027929836cda3815 Mon Sep 17 00:00:00 2001
From: joshwanf <17016446+joshwanf@users.noreply.github.com>
Date: Wed, 1 Jul 2026 22:03:27 -0400
Subject: [PATCH 4/6] Add diagnostic logs and change frontend ping URL

---
 .github/workflows/run-e2e-tests.yml | 31 +++++++++++++++++++++++------
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/run-e2e-tests.yml b/.github/workflows/run-e2e-tests.yml
index 2d20165c..4ca217e0 100644
--- a/.github/workflows/run-e2e-tests.yml
+++ b/.github/workflows/run-e2e-tests.yml
@@ -93,13 +93,32 @@ jobs:
       - name: Run all Devbox services
         run: devbox services up -b
 
+      - name: Show service logs
+        if: always()
+        run: |
+          sleep 5
+          ls -la logs || true
+          tail -n 80 logs/firebase-emulators.log || true
+          tail -n 80 logs/library-api.log || true
+          tail -n 80 logs/sync-library-metadata.log || true
+          tail -n 80 logs/builder-api.log || true
+          tail -n 80 logs/builder-frontend.log || true
+
       - name: Wait for App to be available
-        uses: nev7n/wait_for_response@v1
-        with:
-          url: "http://localhost:5173/"
-          responseCode: 200
-          timeout: 90000
-          interval: 1000
+        run: |
+          timeout 90 bash -c '
+            until curl --fail --silent --show-error http://127.0.0.1:5173/ > /dev/null; do
+              echo "Waiting for frontend..."
+              sleep 1
+            done
+          '
+      # - name: Wait for App to be available
+      #   uses: nev7n/wait_for_response@v1
+      #   with:
+      #     url: "http://127.0.0.1:5173/"
+      #     responseCode: 200
+      #     timeout: 90000
+      #     interval: 1000
 
       - name: Run Playwright tests
         run: npx playwright test

From 66e9b18c1fc8c1fd7dfbed9b6426ee745cf1b2f8 Mon Sep 17 00:00:00 2001
From: joshwanf <17016446+joshwanf@users.noreply.github.com>
Date: Thu, 2 Jul 2026 20:45:57 -0400
Subject: [PATCH 5/6] Cache Playwright browsers

---
 .github/workflows/run-e2e-tests.yml | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/run-e2e-tests.yml b/.github/workflows/run-e2e-tests.yml
index 4ca217e0..e08ecd56 100644
--- a/.github/workflows/run-e2e-tests.yml
+++ b/.github/workflows/run-e2e-tests.yml
@@ -85,9 +85,16 @@ jobs:
         run: npm ci
         working-directory: e2e
 
+      - name: Cache Playwright browsers
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ hashFiles('e2e/package-lock.json') }}
+
       - name: Install Playwright Browsers
-        run: DEBUG=pw:install npx --no-install playwright install --with-deps chromium
+        timeout-minutes: 20
         working-directory: e2e
+        run: DEBUG=pw:install npx --no-install playwright install --with-deps chromium
 
       # 3) Run App + E2E Test #
       - name: Run all Devbox services

From b8970c21c94145d9c2a7fef537755160fbd46e78 Mon Sep 17 00:00:00 2001
From: joshwanf <17016446+joshwanf@users.noreply.github.com>
Date: Thu, 2 Jul 2026 23:32:32 -0400
Subject: [PATCH 6/6] Update Screener test

---
 e2e/tests/firestore/seeders.ts | 81 ++++++++++++++++++----------------
 e2e/tests/screener.spec.ts     |  2 +-
 2 files changed, 43 insertions(+), 40 deletions(-)

diff --git a/e2e/tests/firestore/seeders.ts b/e2e/tests/firestore/seeders.ts
index 86ce53a1..22e60ca7 100644
--- a/e2e/tests/firestore/seeders.ts
+++ b/e2e/tests/firestore/seeders.ts
@@ -1,7 +1,7 @@
-import { TEST_USER_ID, TEST_SCREENER_ID, TEST_BENEFIT_ID } from './config';
-import { createDocument, createSubcollectionDocument } from './firestoreClient';
-import { uploadObject } from './storageClient';
-import { getVersion as getLibraryApiVersion } from './libraryApi';
+import { TEST_USER_ID, TEST_SCREENER_ID, TEST_BENEFIT_ID } from "./config";
+import { createDocument, createSubcollectionDocument } from "./firestoreClient";
+import { uploadObject } from "./storageClient";
+import { getVersion as getLibraryApiVersion } from "./libraryApi";
 
 /** Return type for seedScreener - contains the created screener ID */
 export interface SeededScreener {
@@ -30,8 +30,10 @@ export interface SeededScreenerWithForm extends SeededBenefitWithCheck {
  * @param name - The screener name (default: "Test Screener")
  * @returns The seeded screener ID
  */
-export async function seedScreener(name="Test Screener"): Promise<SeededScreener> {
-  await createDocument('workingScreener', TEST_SCREENER_ID, {
+export async function seedScreener(
+  name = "Test Screener",
+): Promise<SeededScreener> {
+  await createDocument("workingScreener", TEST_SCREENER_ID, {
     screenerName: name,
     ownerId: TEST_USER_ID,
     benefits: [],
@@ -49,12 +51,12 @@ export async function seedScreener(name="Test Screener"): Promise<SeededScreener
  * @returns The seeded screener and benefit IDs
  */
 export async function seedScreenerWithBenefit(
-  screenerName="Test Screener",
-  benefitName="Test Benefit",
-  benefitDescription="Description"
+  screenerName = "Test Screener",
+  benefitName = "Test Benefit",
+  benefitDescription = "Description",
 ): Promise<SeededBenefit> {
   // Create screener with benefit detail in the inline array
-  await createDocument('workingScreener', TEST_SCREENER_ID, {
+  await createDocument("workingScreener", TEST_SCREENER_ID, {
     screenerName,
     ownerId: TEST_USER_ID,
     benefits: [
@@ -62,15 +64,15 @@ export async function seedScreenerWithBenefit(
         id: TEST_BENEFIT_ID,
         name: benefitName,
         description: benefitDescription,
-      }
+      },
     ],
   });
 
   // Create the full benefit in the subcollection
   await createSubcollectionDocument(
-    'workingScreener',
+    "workingScreener",
     TEST_SCREENER_ID,
-    'customBenefit',
+    "customBenefit",
     TEST_BENEFIT_ID,
     {
       id: TEST_BENEFIT_ID,
@@ -78,7 +80,7 @@ export async function seedScreenerWithBenefit(
       name: benefitName,
       description: benefitDescription,
       checks: [],
-    }
+    },
   );
 
   return { screenerId: TEST_SCREENER_ID, benefitId: TEST_BENEFIT_ID };
@@ -93,15 +95,15 @@ export async function seedScreenerWithBenefit(
  * @returns The seeded screener, benefit, and check IDs
  */
 export async function seedScreenerWithConfiguredBenefit(
-  screenerName="Test Screener",
-  benefitName="Test Benefit",
-  benefitDescription="Description"
+  screenerName = "Test Screener",
+  benefitName = "Test Benefit",
+  benefitDescription = "Description",
 ): Promise<SeededBenefitWithCheck> {
   const libraryVersion = await getLibraryApiVersion();
   const checkId = `L-residence-owner-occupant-${libraryVersion}`;
 
   // Create screener with benefit detail
-  await createDocument('workingScreener', TEST_SCREENER_ID, {
+  await createDocument("workingScreener", TEST_SCREENER_ID, {
     screenerName,
     ownerId: TEST_USER_ID,
     benefits: [
@@ -109,15 +111,15 @@ export async function seedScreenerWithConfiguredBenefit(
         id: TEST_BENEFIT_ID,
         name: benefitName,
         description: benefitDescription,
-      }
+      },
     ],
   });
 
   // Create benefit with the owner-occupant check configured
   await createSubcollectionDocument(
-    'workingScreener',
+    "workingScreener",
     TEST_SCREENER_ID,
-    'customBenefit',
+    "customBenefit",
     TEST_BENEFIT_ID,
     {
       id: TEST_BENEFIT_ID,
@@ -137,16 +139,16 @@ export async function seedScreenerWithConfiguredBenefit(
               simpleChecks: {
                 type: "object",
                 properties: {
-                  ownerOccupant: { type: "boolean" }
-                }
-              }
-            }
+                  ownerOccupant: { type: "boolean" },
+                },
+              },
+            },
           },
           parameterDefinitions: [],
           parameters: {},
-        }
+        },
       ],
-    }
+    },
   );
 
   return { screenerId: TEST_SCREENER_ID, benefitId: TEST_BENEFIT_ID, checkId };
@@ -161,33 +163,34 @@ export async function seedScreenerWithConfiguredBenefit(
  * @returns The seeded screener, benefit, check IDs, and form storage path
  */
 export async function seedScreenerWithForm(
-  screenerName="Test Screener",
-  benefitName="Test Benefit",
-  benefitDescription="Description"
+  screenerName = "Test Screener",
+  benefitName = "Test Benefit",
+  benefitDescription = "Description",
 ): Promise<SeededScreenerWithForm> {
-  const { screenerId, benefitId, checkId } = await seedScreenerWithConfiguredBenefit(
-    screenerName,
-    benefitName,
-    benefitDescription
-  );
+  const { screenerId, benefitId, checkId } =
+    await seedScreenerWithConfiguredBenefit(
+      screenerName,
+      benefitName,
+      benefitDescription,
+    );
 
   // Form schema with a checkbox bound to simpleChecks.ownerOccupant
   const formSchema = {
     schemaVersion: 18,
     exporter: {
       name: "@bpmn-io/form-js",
-      version: "1.11.1"
+      version: "1.11.1",
     },
     components: [
       {
         label: "Is owner occupant?",
         type: "checkbox",
         id: "Checkbox_1",
-        key: "simpleChecks.ownerOccupant"
-      }
+        key: "simpleChecks.ownerOccupant",
+      },
     ],
     type: "default",
-    id: "BDT Form"
+    id: "BDT_Form",
   };
 
   const formPath = `form/working/${TEST_SCREENER_ID}.json`;
diff --git a/e2e/tests/screener.spec.ts b/e2e/tests/screener.spec.ts
index 6f1119d1..ad7cebc9 100644
--- a/e2e/tests/screener.spec.ts
+++ b/e2e/tests/screener.spec.ts
@@ -63,7 +63,7 @@ const createFormWithCheckbox = async (page: Page) => {
     );
     await checkboxComponentLoc.waitFor({ state: "visible" });
     await checkboxComponentLoc.dragTo(
-      page.locator('[data-id="BDT Form"].fjs-drop-container-vertical'),
+      page.locator('[data-id="BDT_Form"].fjs-drop-container-vertical'),
     );
 
     await page