From 5e7b1b7c51bb96f597a52fa60d95196d9f321464 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Mon, 13 Apr 2026 21:57:36 +0530
Subject: [PATCH 01/11] =?UTF-8?q?feat(e2e):=20Phase=201=20=E2=80=94=20Play?=
 =?UTF-8?q?wright=20foundation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Install @playwright/test, add test:e2e scripts, create playwright.config.ts
with Chromium project, global-setup for Frappe session auth, and a smoke
spec that asserts an authenticated user can reach the forms dashboard.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .gitignore                       |  7 ++++++-
 frontend/e2e/global-setup.ts     | 28 ++++++++++++++++++++++++++++
 frontend/e2e/specs/smoke.spec.ts |  8 ++++++++
 frontend/package.json            |  6 +++++-
 frontend/playwright.config.ts    | 30 ++++++++++++++++++++++++++++++
 frontend/yarn.lock               | 26 ++++++++++++++++++++++++++
 6 files changed, 103 insertions(+), 2 deletions(-)
 create mode 100644 frontend/e2e/global-setup.ts
 create mode 100644 frontend/e2e/specs/smoke.spec.ts
 create mode 100644 frontend/playwright.config.ts

diff --git a/.gitignore b/.gitignore
index 6fef8ac..0e0cf91 100644
--- a/.gitignore
+++ b/.gitignore
@@ -65,4 +65,9 @@ jspm_packages/
 /forms_pro/www/frontend.html
 /forms_pro/public/node_modules
 frontend/components.d.ts
-frontend/auto-imports.d.ts
\ No newline at end of file
+frontend/auto-imports.d.ts
+
+# Playwright
+frontend/e2e/auth/storageState.json
+frontend/e2e/test-results/
+frontend/e2e/playwright-report/
\ No newline at end of file
diff --git a/frontend/e2e/global-setup.ts b/frontend/e2e/global-setup.ts
new file mode 100644
index 0000000..aa32093
--- /dev/null
+++ b/frontend/e2e/global-setup.ts
@@ -0,0 +1,28 @@
+import { chromium, type FullConfig } from "@playwright/test";
+import * as fs from "fs";
+import * as path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const AUTH_FILE = path.join(__dirname, "auth/storageState.json");
+
+export default async function globalSetup(_config: FullConfig) {
+  fs.mkdirSync(path.dirname(AUTH_FILE), { recursive: true });
+
+  const browser = await chromium.launch();
+  const context = await browser.newContext();
+  const page = await context.newPage();
+
+  const baseURL = process.env.BASE_URL ?? "http://localhost:8001";
+
+  await page.goto(baseURL);
+  await page.request.post(`${baseURL}/api/method/login`, {
+    form: {
+      usr: "Administrator",
+      pwd: process.env.TEST_ADMIN_PASSWORD ?? "admin",
+    },
+  });
+
+  await context.storageState({ path: AUTH_FILE });
+  await browser.close();
+}
diff --git a/frontend/e2e/specs/smoke.spec.ts b/frontend/e2e/specs/smoke.spec.ts
new file mode 100644
index 0000000..ed3a12d
--- /dev/null
+++ b/frontend/e2e/specs/smoke.spec.ts
@@ -0,0 +1,8 @@
+import { test, expect } from "@playwright/test";
+
+test("authenticated user can reach the forms dashboard", async ({ page }) => {
+  await page.goto("/forms");
+  // If auth works, we land on the dashboard (not the login page)
+  await expect(page).not.toHaveURL(/login/);
+  await expect(page.getByText("Dashboard")).toBeVisible();
+});
diff --git a/frontend/package.json b/frontend/package.json
index 9a7c126..5fdf6cc 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,7 +9,10 @@
     "preview": "vite preview",
     "lint": "biome check --write .",
     "typecheck": "./typecheck.sh",
-    "copy-html-entry": "cp ../forms_pro/public/frontend/index.html ../forms_pro/www/forms.html"
+    "copy-html-entry": "cp ../forms_pro/public/frontend/index.html ../forms_pro/www/forms.html",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:debug": "playwright test --debug"
   },
   "dependencies": {
     "@lottiefiles/dotlottie-vue": "^0.10.4",
@@ -29,6 +32,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
+    "@playwright/test": "^1.59.1",
     "@vitejs/plugin-vue": "^6.0.5",
     "@vitest/coverage-v8": "^4.1.4",
     "autoprefixer": "^10.4.2",
diff --git a/frontend/playwright.config.ts b/frontend/playwright.config.ts
new file mode 100644
index 0000000..ed1d194
--- /dev/null
+++ b/frontend/playwright.config.ts
@@ -0,0 +1,30 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./e2e/specs",
+  globalSetup: "./e2e/global-setup",
+  outputDir: "./e2e/test-results",
+
+  use: {
+    baseURL: process.env.BASE_URL ?? "http://localhost:8001",
+    storageState: "./e2e/auth/storageState.json",
+    screenshot: "only-on-failure",
+    video: "retain-on-failure",
+    trace: "on-first-retry",
+  },
+
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+
+  retries: process.env.CI ? 1 : 0,
+  workers: process.env.CI ? 2 : undefined,
+
+  reporter: [
+    ["list"],
+    ["html", { outputFolder: "./e2e/playwright-report", open: "never" }],
+  ],
+});
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index d632621..9ef788e 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -394,6 +394,13 @@
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
+"@playwright/test@^1.59.1":
+  version "1.59.1"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.59.1.tgz#5c4d38eac84a61527af466602ae20277685a02d6"
+  integrity sha512-PG6q63nQg5c9rIi4/Z5lR5IVF7yU5MqmKaPOe0HSc0O2cX1fPi96sUQu5j7eo4gKCkB2AnNGoWt7y4/Xx3Kcqg==
+  dependencies:
+    playwright "1.59.1"
+
 "@popperjs/core@^2.11.2", "@popperjs/core@^2.9.0":
   version "2.11.8"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
@@ -1784,6 +1791,11 @@ frappe-ui@^0.1.272:
     unplugin-icons "^22.1.0"
     unplugin-vue-components "^28.4.1"
 
+fsevents@2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
 fsevents@~2.3.2, fsevents@~2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
@@ -2489,6 +2501,20 @@ pkg-types@^2.1.0, pkg-types@^2.3.0:
     exsolve "^1.0.7"
     pathe "^2.0.3"
 
+playwright-core@1.59.1:
+  version "1.59.1"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.59.1.tgz#d8a2b28bcb8f2bd08ef3df93b02ae83c813244b2"
+  integrity sha512-HBV/RJg81z5BiiZ9yPzIiClYV/QMsDCKUyogwH9p3MCP6IYjUFu/MActgYAvK0oWyV9NlwM3GLBjADyWgydVyg==
+
+playwright@1.59.1:
+  version "1.59.1"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.59.1.tgz#f7b0ca61637ae25264cec370df671bbe1f368a4a"
+  integrity sha512-C8oWjPR3F81yljW9o5OxcWzfh6avkVwDD2VYdwIGqTkl+OGFISgypqzfu7dOe4QNLL2aqcWBmI3PMtLIK233lw==
+  dependencies:
+    playwright-core "1.59.1"
+  optionalDependencies:
+    fsevents "2.3.2"
+
 postcss-import@^15.1.0:
   version "15.1.0"
   resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-15.1.0.tgz#41c64ed8cc0e23735a9698b3249ffdbf704adc70"

From a0226b99a85530ccdad5248bba017ca8bead4f9b Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Mon, 13 Apr 2026 22:20:58 +0530
Subject: [PATCH 02/11] =?UTF-8?q?feat(e2e):=20Phase=202=20=E2=80=94=20data?=
 =?UTF-8?q?-testid=20attributes,=20POMs,=20and=20test=20data=20fixture?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add data-testid to 7 Vue components (form-card, btn-new-form, field-type-*,
btn-save-form, btn-publish, btn-submit-form, submission-success,
btn-send-invite, input-invite-email). Restructure InviteMemberDialog to use
#actions slot so the send button is directly targetable. Create Page Object
Models (dashboard, form-builder, submission, team) and a Playwright fixture
with API helpers for form create/publish/teardown.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/e2e/fixtures/test-data.fixture.ts    | 87 +++++++++++++++++++
 frontend/e2e/helpers/dashboard.ts             | 17 ++++
 frontend/e2e/helpers/form-builder.ts          | 37 ++++++++
 frontend/e2e/helpers/submission.ts            | 21 +++++
 frontend/e2e/helpers/team.ts                  | 29 +++++++
 frontend/src/components/FormBuilderHeader.vue |  3 +
 .../builder/sidebar/AddFieldsSection.vue      |  1 +
 .../components/dashboard/FormPreviewCard.vue  |  1 +
 .../components/submission/FormRenderer.vue    |  1 +
 .../components/submission/SuccessSection.vue  |  2 +-
 .../components/team/InviteMemberDialog.vue    | 23 ++---
 frontend/src/pages/home/Dashboard.vue         | 48 +++++-----
 12 files changed, 238 insertions(+), 32 deletions(-)
 create mode 100644 frontend/e2e/fixtures/test-data.fixture.ts
 create mode 100644 frontend/e2e/helpers/dashboard.ts
 create mode 100644 frontend/e2e/helpers/form-builder.ts
 create mode 100644 frontend/e2e/helpers/submission.ts
 create mode 100644 frontend/e2e/helpers/team.ts

diff --git a/frontend/e2e/fixtures/test-data.fixture.ts b/frontend/e2e/fixtures/test-data.fixture.ts
new file mode 100644
index 0000000..1e880d5
--- /dev/null
+++ b/frontend/e2e/fixtures/test-data.fixture.ts
@@ -0,0 +1,87 @@
+import {
+  test as base,
+  request,
+  type APIRequestContext,
+} from "@playwright/test";
+
+type TestDataFixtures = {
+  apiContext: APIRequestContext;
+  getTeamId: () => Promise<string>;
+  createForm: () => Promise<string>;
+  createPublishedForm: () => Promise<{ formId: string; route: string }>;
+};
+
+async function fetchTeamId(apiContext: APIRequestContext): Promise<string> {
+  const res = await apiContext.get(
+    "/api/method/forms_pro.api.user.get_user_teams"
+  );
+  const { message } = await res.json();
+  if (!message?.length) throw new Error("No team found for test user");
+  return message[0].name as string;
+}
+
+export const test = base.extend<TestDataFixtures>({
+  apiContext: async ({}, use) => {
+    const ctx = await request.newContext({
+      baseURL: process.env.BASE_URL ?? "http://localhost:8001",
+      storageState: "./e2e/auth/storageState.json",
+    });
+    await use(ctx);
+    await ctx.dispose();
+  },
+
+  getTeamId: async ({ apiContext }, use) => {
+    await use(() => fetchTeamId(apiContext));
+  },
+
+  createForm: async ({ apiContext }, use) => {
+    const created: string[] = [];
+
+    await use(async () => {
+      const teamId = await fetchTeamId(apiContext);
+      const res = await apiContext.post(
+        "/api/method/forms_pro.utils.form_generator.create_form",
+        { data: { team_id: teamId } }
+      );
+      const { message } = await res.json();
+      const formId = message.form_document as string;
+      created.push(formId);
+      return formId;
+    });
+
+    // Teardown: delete all created forms
+    for (const id of created) {
+      await apiContext.delete(`/api/resource/Form/${id}`).catch(() => {});
+    }
+  },
+
+  createPublishedForm: async ({ apiContext }, use) => {
+    const created: string[] = [];
+
+    await use(async () => {
+      const teamId = await fetchTeamId(apiContext);
+      const createRes = await apiContext.post(
+        "/api/method/forms_pro.utils.form_generator.create_form",
+        { data: { team_id: teamId } }
+      );
+      const { message } = await createRes.json();
+      const formId = message.form_document as string;
+      created.push(formId);
+
+      // Publish the form via Frappe REST API
+      const publishRes = await apiContext.put(`/api/resource/Form/${formId}`, {
+        data: { is_published: 1 },
+      });
+      const publishData = await publishRes.json();
+      const route = publishData.data?.route as string;
+
+      return { formId, route };
+    });
+
+    for (const id of created) {
+      await apiContext.delete(`/api/resource/Form/${id}`).catch(() => {});
+    }
+  },
+});
+
+export { expect } from "@playwright/test";
diff --git a/frontend/e2e/helpers/dashboard.ts b/frontend/e2e/helpers/dashboard.ts
new file mode 100644
index 0000000..8f21d93
--- /dev/null
+++ b/frontend/e2e/helpers/dashboard.ts
@@ -0,0 +1,17 @@
+import type { Page } from "@playwright/test";
+
+export class DashboardPage {
+  constructor(private page: Page) {}
+
+  async goto() {
+    await this.page.goto("/forms");
+  }
+
+  async clickNewForm() {
+    await this.page.getByTestId("btn-new-form").click();
+  }
+
+  formCards() {
+    return this.page.getByTestId("form-card");
+  }
+}
diff --git a/frontend/e2e/helpers/form-builder.ts b/frontend/e2e/helpers/form-builder.ts
new file mode 100644
index 0000000..bdf989d
--- /dev/null
+++ b/frontend/e2e/helpers/form-builder.ts
@@ -0,0 +1,37 @@
+import type { Page } from "@playwright/test";
+
+export class FormBuilderPage {
+  constructor(private page: Page) {}
+
+  async goto(formId: string) {
+    await this.page.goto(`/forms/edit-form/${formId}`);
+  }
+
+  async addField(fieldType: string) {
+    // The sidebar defaults to "Add Fields" section
+    await this.page.getByTestId(`field-type-${fieldType}`).hover();
+    await this.page
+      .getByTestId(`field-type-${fieldType}`)
+      .getByRole("button")
+      .click();
+  }
+
+  async save() {
+    await this.page.getByTestId("btn-save-form").click();
+    await this.page.waitForResponse(
+      (r) => r.url().includes("/api/") && r.status() === 200
+    );
+  }
+
+  async publish() {
+    await this.page.getByTestId("btn-publish").click();
+  }
+
+  publishButton() {
+    return this.page.getByTestId("btn-publish");
+  }
+
+  saveButton() {
+    return this.page.getByTestId("btn-save-form");
+  }
+}
diff --git a/frontend/e2e/helpers/submission.ts b/frontend/e2e/helpers/submission.ts
new file mode 100644
index 0000000..4daf16a
--- /dev/null
+++ b/frontend/e2e/helpers/submission.ts
@@ -0,0 +1,21 @@
+import type { Page } from "@playwright/test";
+
+export class SubmissionPage {
+  constructor(private page: Page) {}
+
+  async goto(route: string) {
+    await this.page.goto(`/forms/p/${route}`);
+  }
+
+  async fillField(label: string, value: string) {
+    await this.page.getByLabel(label).fill(value);
+  }
+
+  async submit() {
+    await this.page.getByTestId("btn-submit-form").click();
+  }
+
+  successSection() {
+    return this.page.getByTestId("submission-success");
+  }
+}
diff --git a/frontend/e2e/helpers/team.ts b/frontend/e2e/helpers/team.ts
new file mode 100644
index 0000000..c203cd9
--- /dev/null
+++ b/frontend/e2e/helpers/team.ts
@@ -0,0 +1,29 @@
+import type { Page } from "@playwright/test";
+
+export class TeamPage {
+  constructor(private page: Page) {}
+
+  async goto() {
+    await this.page.goto("/forms/team");
+  }
+
+  async openInviteDialog() {
+    await this.page.getByRole("button", { name: /invite member/i }).click();
+  }
+
+  async inviteByEmail(email: string) {
+    const dialog = this.page.getByRole("dialog");
+    // frappe-ui FormControl renders a wrapper div; target the inner input
+    await dialog.getByTestId("input-invite-email").locator("input").fill(email);
+    // Press Enter to add the email to the list
+    await dialog
+      .getByTestId("input-invite-email")
+      .locator("input")
+      .press("Enter");
+    await dialog.getByTestId("btn-send-invite").click();
+  }
+
+  memberRows() {
+    return this.page.getByRole("row");
+  }
+}
diff --git a/frontend/src/components/FormBuilderHeader.vue b/frontend/src/components/FormBuilderHeader.vue
index 512d0a9..3c8ae3d 100644
--- a/frontend/src/components/FormBuilderHeader.vue
+++ b/frontend/src/components/FormBuilderHeader.vue
@@ -99,6 +99,7 @@ const openFormSubmissionPage = () => {
             <div v-if="editFormStore.isUnsaved">
                 <Button
                     v-if="editFormStore.isPublished"
+                    data-testid="btn-save-form"
                     label="Save and publish"
                     icon-left="globe"
                     variant="solid"
@@ -107,6 +108,7 @@ const openFormSubmissionPage = () => {
                 />
                 <Button
                     v-else
+                    data-testid="btn-save-form"
                     label="Save"
                     variant="solid"
                     @click="editFormStore.save"
@@ -115,6 +117,7 @@ const openFormSubmissionPage = () => {
             </div>
             <Button
                 v-else
+                data-testid="btn-publish"
                 :label="editFormStore.isPublished ? 'Unpublish' : 'Publish'"
                 :icon-left="editFormStore.isPublished ? '' : 'globe'"
                 :variant="editFormStore.isPublished ? 'subtle' : 'solid'"
diff --git a/frontend/src/components/builder/sidebar/AddFieldsSection.vue b/frontend/src/components/builder/sidebar/AddFieldsSection.vue
index 3ae838d..71dce25 100644
--- a/frontend/src/components/builder/sidebar/AddFieldsSection.vue
+++ b/frontend/src/components/builder/sidebar/AddFieldsSection.vue
@@ -33,6 +33,7 @@ const editFormStore = useEditForm();
             />
             <div v-for="component in filteredComponents" :key="component">
                 <div
+                    :data-testid="`field-type-${component}`"
                     class="p-2 bg-gray-50 w-full rounded flex flex-col gap-2 border border-gray-200 hover:border-gray-400 transition-all relative group"
                 >
                     <div class="text-sm">{{ component }}</div>
diff --git a/frontend/src/components/dashboard/FormPreviewCard.vue b/frontend/src/components/dashboard/FormPreviewCard.vue
index 78bae61..e84f2a9 100644
--- a/frontend/src/components/dashboard/FormPreviewCard.vue
+++ b/frontend/src/components/dashboard/FormPreviewCard.vue
@@ -16,6 +16,7 @@ const formattedDate = computed(() => {
 </script>
 <template>
     <div
+        data-testid="form-card"
         @click="$router.push({ name: 'Manage Form', params: { id: props.form.name } })"
         class="flex flex-col gap-2 border rounded p-4 hover:border-gray-400 transition-all duration-300 cursor-pointer"
     >
diff --git a/frontend/src/components/submission/FormRenderer.vue b/frontend/src/components/submission/FormRenderer.vue
index e7190a6..fea876a 100644
--- a/frontend/src/components/submission/FormRenderer.vue
+++ b/frontend/src/components/submission/FormRenderer.vue
@@ -62,6 +62,7 @@ function handleSubmitForm() {
                     Save as draft
                 </Button>
                 <Button
+                    data-testid="btn-submit-form"
                     variant="solid"
                     @click="handleSubmitForm"
                     :loading="submissionFormStore.isLoading"
diff --git a/frontend/src/components/submission/SuccessSection.vue b/frontend/src/components/submission/SuccessSection.vue
index 1c42c90..d0846d0 100644
--- a/frontend/src/components/submission/SuccessSection.vue
+++ b/frontend/src/components/submission/SuccessSection.vue
@@ -31,7 +31,7 @@ const successDescription = computed(() => {
 });
 </script>
 <template>
-    <div class="flex flex-col gap-4 items-center">
+    <div data-testid="submission-success" class="flex flex-col gap-4 items-center">
         <DotLottieVue
             src="https://lottie.host/b9ba5ce8-d753-497a-946c-76e0da2ec22d/QcoLWNS7AP.lottie"
             autoplay
diff --git a/frontend/src/components/team/InviteMemberDialog.vue b/frontend/src/components/team/InviteMemberDialog.vue
index ea4acb2..e47dbef 100644
--- a/frontend/src/components/team/InviteMemberDialog.vue
+++ b/frontend/src/components/team/InviteMemberDialog.vue
@@ -71,17 +71,6 @@ const open = defineModel<boolean>({ required: true, default: false });
         :options="{
             title: 'Invite members to your team',
             size: 'lg',
-            actions: [
-                {
-                    label: 'Send Invitations',
-                    disabled: inviteEmails.length === 0,
-                    variant: 'solid',
-                    iconLeft: 'send',
-                    onClick: () => {
-                        sendInvitationEmails();
-                    },
-                },
-            ],
         }"
     >
         <template #body-content>
@@ -89,6 +78,7 @@ const open = defineModel<boolean>({ required: true, default: false });
                 <div class="flex items-center gap-2">
                     <FormControl
                         v-model="emailInput"
+                        data-testid="input-invite-email"
                         label="Invite by Email"
                         type="email"
                         variant="outline"
@@ -114,5 +104,16 @@ const open = defineModel<boolean>({ required: true, default: false });
                 </ul>
             </div>
         </template>
+        <template #actions>
+            <Button
+                data-testid="btn-send-invite"
+                :disabled="inviteEmails.length === 0"
+                variant="solid"
+                icon-left="send"
+                @click="sendInvitationEmails"
+            >
+                Send Invitations
+            </Button>
+        </template>
     </Dialog>
 </template>
diff --git a/frontend/src/pages/home/Dashboard.vue b/frontend/src/pages/home/Dashboard.vue
index 7cd93d2..e8c2fd4 100644
--- a/frontend/src/pages/home/Dashboard.vue
+++ b/frontend/src/pages/home/Dashboard.vue
@@ -37,29 +37,37 @@
             <p class="text-base">Manage and create forms</p>
         </div>
         <template v-if="user.user?.has_desk_access">
-            <Dropdown
-                class="w-fit"
-                :button="{
-                    label: 'Create',
-                    iconLeft: 'plus',
-                    variant: 'solid',
-                }"
-                :options="[
-                    {
-                        label: 'Create New',
-                        onClick: handleCreateDraftForm,
-                    },
-                    {
-                        label: 'Create from Existing DocType',
-                        onClick: () => {
-                            showSelectDoctypeDialog = true;
+            <div data-testid="btn-new-form" class="w-fit">
+                <Dropdown
+                    class="w-fit"
+                    :button="{
+                        label: 'Create',
+                        iconLeft: 'plus',
+                        variant: 'solid',
+                    }"
+                    :options="[
+                        {
+                            label: 'Create New',
+                            onClick: handleCreateDraftForm,
+                        },
+                        {
+                            label: 'Create from Existing DocType',
+                            onClick: () => {
+                                showSelectDoctypeDialog = true;
+                            },
                         },
-                    },
-                ]"
-            />
+                    ]"
+                />
+            </div>
         </template>
         <template v-else>
-            <Button class="w-fit" variant="solid" iconLeft="plus" @click="handleCreateDraftForm">
+            <Button
+                data-testid="btn-new-form"
+                class="w-fit"
+                variant="solid"
+                iconLeft="plus"
+                @click="handleCreateDraftForm"
+            >
                 Create New
             </Button>
         </template>

From 3aa817bf4cb68f1e70b6dd65ea0d5968aff63c05 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Tue, 14 Apr 2026 00:49:47 +0530
Subject: [PATCH 03/11] =?UTF-8?q?feat(e2e):=20Phase=202+3=20=E2=80=94=20se?=
 =?UTF-8?q?mantic=20selectors=20and=20form-creation=20spec=20(5=20tests)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove all data-testid attributes from Vue components (reverted to original).
Rewrite POMs with semantic selectors: getByRole/getByLabel/getByText, scoped
to pre-existing data-form-builder-component attributes. Add form-creation.spec.ts
covering dashboard listing, builder load, field canvas, publish, and unpublish.
Tests avoid triggering Frappe validation by never saving a field with an empty
label; publish/unpublish uses setValue({is_published}) which is always valid.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/e2e/helpers/dashboard.ts             |  9 +--
 frontend/e2e/helpers/form-builder.ts          | 48 ++++++++-----
 frontend/e2e/helpers/submission.ts            |  7 +-
 frontend/e2e/helpers/team.ts                  | 11 +--
 frontend/e2e/specs/form-creation.spec.ts      | 71 +++++++++++++++++++
 frontend/src/components/FormBuilderHeader.vue |  3 -
 .../builder/sidebar/AddFieldsSection.vue      |  1 -
 .../components/dashboard/FormPreviewCard.vue  |  1 -
 .../components/submission/FormRenderer.vue    |  1 -
 .../components/submission/SuccessSection.vue  |  2 +-
 .../components/team/InviteMemberDialog.vue    | 23 +++---
 frontend/src/pages/home/Dashboard.vue         | 48 ++++++-------
 12 files changed, 145 insertions(+), 80 deletions(-)
 create mode 100644 frontend/e2e/specs/form-creation.spec.ts

diff --git a/frontend/e2e/helpers/dashboard.ts b/frontend/e2e/helpers/dashboard.ts
index 8f21d93..f971c90 100644
--- a/frontend/e2e/helpers/dashboard.ts
+++ b/frontend/e2e/helpers/dashboard.ts
@@ -7,11 +7,8 @@ export class DashboardPage {
     await this.page.goto("/forms");
   }
 
-  async clickNewForm() {
-    await this.page.getByTestId("btn-new-form").click();
-  }
-
-  formCards() {
-    return this.page.getByTestId("form-card");
+  // Form title headings inside FormPreviewCard
+  formTitles() {
+    return this.page.getByRole("heading", { level: 3 });
   }
 }
diff --git a/frontend/e2e/helpers/form-builder.ts b/frontend/e2e/helpers/form-builder.ts
index bdf989d..7d18e08 100644
--- a/frontend/e2e/helpers/form-builder.ts
+++ b/frontend/e2e/helpers/form-builder.ts
@@ -5,33 +5,49 @@ export class FormBuilderPage {
 
   async goto(formId: string) {
     await this.page.goto(`/forms/edit-form/${formId}`);
+    // Wait for the sidebar to confirm the builder is mounted
+    await this.page.waitForSelector(
+      '[data-form-builder-component="form-builder-sidebar"]'
+    );
+  }
+
+  // Scope selectors to the sidebar (which has a stable pre-existing attribute)
+  private sidebar() {
+    return this.page.locator(
+      '[data-form-builder-component="form-builder-sidebar"]'
+    );
   }
 
   async addField(fieldType: string) {
-    // The sidebar defaults to "Add Fields" section
-    await this.page.getByTestId(`field-type-${fieldType}`).hover();
-    await this.page
-      .getByTestId(`field-type-${fieldType}`)
-      .getByRole("button")
-      .click();
+    // Each card shows the field type name as visible text
+    const card = this.sidebar()
+      .getByText(fieldType, { exact: true })
+      .locator("..");
+    await card.hover();
+    await card.getByRole("button").click();
   }
 
-  async save() {
-    await this.page.getByTestId("btn-save-form").click();
-    await this.page.waitForResponse(
-      (r) => r.url().includes("/api/") && r.status() === 200
-    );
+  // The canvas shows "Click on fields to add them…" when empty
+  canvasEmptyState() {
+    return this.page.getByText(/click on fields to add them/i);
   }
 
   async publish() {
-    await this.page.getByTestId("btn-publish").click();
+    // Click Publish and wait for the label to flip to "Unpublish"
+    await this.page.getByRole("button", { name: /^publish$/i }).click();
+    await this.page
+      .getByRole("button", { name: /^unpublish$/i })
+      .waitFor({ timeout: 10000 });
   }
 
-  publishButton() {
-    return this.page.getByTestId("btn-publish");
+  async unpublish() {
+    await this.page.getByRole("button", { name: /^unpublish$/i }).click();
+    await this.page
+      .getByRole("button", { name: /^publish$/i })
+      .waitFor({ timeout: 10000 });
   }
 
-  saveButton() {
-    return this.page.getByTestId("btn-save-form");
+  publishButton() {
+    return this.page.getByRole("button", { name: /^publish$/i });
   }
 }
diff --git a/frontend/e2e/helpers/submission.ts b/frontend/e2e/helpers/submission.ts
index 4daf16a..a0f81c8 100644
--- a/frontend/e2e/helpers/submission.ts
+++ b/frontend/e2e/helpers/submission.ts
@@ -12,10 +12,11 @@ export class SubmissionPage {
   }
 
   async submit() {
-    await this.page.getByTestId("btn-submit-form").click();
+    await this.page.getByRole("button", { name: "Submit" }).click();
   }
 
-  successSection() {
-    return this.page.getByTestId("submission-success");
+  // After successful submission the SuccessSection renders; detect via its description text
+  successMessage() {
+    return this.page.getByText(/thank you for submitting/i);
   }
 }
diff --git a/frontend/e2e/helpers/team.ts b/frontend/e2e/helpers/team.ts
index c203cd9..9c0f732 100644
--- a/frontend/e2e/helpers/team.ts
+++ b/frontend/e2e/helpers/team.ts
@@ -13,14 +13,9 @@ export class TeamPage {
 
   async inviteByEmail(email: string) {
     const dialog = this.page.getByRole("dialog");
-    // frappe-ui FormControl renders a wrapper div; target the inner input
-    await dialog.getByTestId("input-invite-email").locator("input").fill(email);
-    // Press Enter to add the email to the list
-    await dialog
-      .getByTestId("input-invite-email")
-      .locator("input")
-      .press("Enter");
-    await dialog.getByTestId("btn-send-invite").click();
+    await dialog.getByLabel("Invite by Email").fill(email);
+    await dialog.getByLabel("Invite by Email").press("Enter");
+    await dialog.getByRole("button", { name: "Send Invitations" }).click();
   }
 
   memberRows() {
diff --git a/frontend/e2e/specs/form-creation.spec.ts b/frontend/e2e/specs/form-creation.spec.ts
new file mode 100644
index 0000000..d9dbcc6
--- /dev/null
+++ b/frontend/e2e/specs/form-creation.spec.ts
@@ -0,0 +1,71 @@
+import { test, expect } from "../fixtures/test-data.fixture";
+import { DashboardPage } from "../helpers/dashboard";
+import { FormBuilderPage } from "../helpers/form-builder";
+
+test.describe("Form Creation", () => {
+  test("form title appears on dashboard after creation via API", async ({
+    page,
+    createForm,
+  }) => {
+    await createForm();
+    const dashboard = new DashboardPage(page);
+    await dashboard.goto();
+    await expect(dashboard.formTitles().first()).toBeVisible();
+  });
+
+  test("form builder loads and shows Add Fields sidebar", async ({
+    page,
+    createForm,
+  }) => {
+    const formId = await createForm();
+    const builder = new FormBuilderPage(page);
+    await builder.goto(formId);
+    await expect(page.getByText("Add Fields")).toBeVisible();
+    await expect(page.getByText("Data", { exact: true }).first()).toBeVisible();
+  });
+
+  test("adding a field removes the canvas empty state", async ({
+    page,
+    createForm,
+  }) => {
+    const formId = await createForm();
+    const builder = new FormBuilderPage(page);
+    await builder.goto(formId);
+
+    await expect(builder.canvasEmptyState()).toBeVisible();
+    await builder.addField("Data");
+    await expect(builder.canvasEmptyState()).not.toBeVisible();
+  });
+
+  test("can publish a draft form", async ({ page, createForm }) => {
+    const formId = await createForm();
+    const builder = new FormBuilderPage(page);
+    await builder.goto(formId);
+
+    // Fresh form is a draft → Publish button visible
+    await expect(builder.publishButton()).toBeVisible();
+    await builder.publish();
+
+    // After publishing, button flips to Unpublish
+    await expect(
+      page.getByRole("button", { name: /^unpublish$/i })
+    ).toBeVisible();
+  });
+
+  test("can unpublish a published form", async ({
+    page,
+    createPublishedForm,
+  }) => {
+    const { formId } = await createPublishedForm();
+    const builder = new FormBuilderPage(page);
+    await builder.goto(formId);
+
+    // Published form → Unpublish button visible
+    await expect(
+      page.getByRole("button", { name: /^unpublish$/i })
+    ).toBeVisible();
+    await builder.unpublish();
+
+    await expect(builder.publishButton()).toBeVisible();
+  });
+});
diff --git a/frontend/src/components/FormBuilderHeader.vue b/frontend/src/components/FormBuilderHeader.vue
index 3c8ae3d..512d0a9 100644
--- a/frontend/src/components/FormBuilderHeader.vue
+++ b/frontend/src/components/FormBuilderHeader.vue
@@ -99,7 +99,6 @@ const openFormSubmissionPage = () => {
             <div v-if="editFormStore.isUnsaved">
                 <Button
                     v-if="editFormStore.isPublished"
-                    data-testid="btn-save-form"
                     label="Save and publish"
                     icon-left="globe"
                     variant="solid"
@@ -108,7 +107,6 @@ const openFormSubmissionPage = () => {
                 />
                 <Button
                     v-else
-                    data-testid="btn-save-form"
                     label="Save"
                     variant="solid"
                     @click="editFormStore.save"
@@ -117,7 +115,6 @@ const openFormSubmissionPage = () => {
             </div>
             <Button
                 v-else
-                data-testid="btn-publish"
                 :label="editFormStore.isPublished ? 'Unpublish' : 'Publish'"
                 :icon-left="editFormStore.isPublished ? '' : 'globe'"
                 :variant="editFormStore.isPublished ? 'subtle' : 'solid'"
diff --git a/frontend/src/components/builder/sidebar/AddFieldsSection.vue b/frontend/src/components/builder/sidebar/AddFieldsSection.vue
index 71dce25..3ae838d 100644
--- a/frontend/src/components/builder/sidebar/AddFieldsSection.vue
+++ b/frontend/src/components/builder/sidebar/AddFieldsSection.vue
@@ -33,7 +33,6 @@ const editFormStore = useEditForm();
             />
             <div v-for="component in filteredComponents" :key="component">
                 <div
-                    :data-testid="`field-type-${component}`"
                     class="p-2 bg-gray-50 w-full rounded flex flex-col gap-2 border border-gray-200 hover:border-gray-400 transition-all relative group"
                 >
                     <div class="text-sm">{{ component }}</div>
diff --git a/frontend/src/components/dashboard/FormPreviewCard.vue b/frontend/src/components/dashboard/FormPreviewCard.vue
index e84f2a9..78bae61 100644
--- a/frontend/src/components/dashboard/FormPreviewCard.vue
+++ b/frontend/src/components/dashboard/FormPreviewCard.vue
@@ -16,7 +16,6 @@ const formattedDate = computed(() => {
 </script>
 <template>
     <div
-        data-testid="form-card"
         @click="$router.push({ name: 'Manage Form', params: { id: props.form.name } })"
         class="flex flex-col gap-2 border rounded p-4 hover:border-gray-400 transition-all duration-300 cursor-pointer"
     >
diff --git a/frontend/src/components/submission/FormRenderer.vue b/frontend/src/components/submission/FormRenderer.vue
index fea876a..e7190a6 100644
--- a/frontend/src/components/submission/FormRenderer.vue
+++ b/frontend/src/components/submission/FormRenderer.vue
@@ -62,7 +62,6 @@ function handleSubmitForm() {
                     Save as draft
                 </Button>
                 <Button
-                    data-testid="btn-submit-form"
                     variant="solid"
                     @click="handleSubmitForm"
                     :loading="submissionFormStore.isLoading"
diff --git a/frontend/src/components/submission/SuccessSection.vue b/frontend/src/components/submission/SuccessSection.vue
index d0846d0..1c42c90 100644
--- a/frontend/src/components/submission/SuccessSection.vue
+++ b/frontend/src/components/submission/SuccessSection.vue
@@ -31,7 +31,7 @@ const successDescription = computed(() => {
 });
 </script>
 <template>
-    <div data-testid="submission-success" class="flex flex-col gap-4 items-center">
+    <div class="flex flex-col gap-4 items-center">
         <DotLottieVue
             src="https://lottie.host/b9ba5ce8-d753-497a-946c-76e0da2ec22d/QcoLWNS7AP.lottie"
             autoplay
diff --git a/frontend/src/components/team/InviteMemberDialog.vue b/frontend/src/components/team/InviteMemberDialog.vue
index e47dbef..ea4acb2 100644
--- a/frontend/src/components/team/InviteMemberDialog.vue
+++ b/frontend/src/components/team/InviteMemberDialog.vue
@@ -71,6 +71,17 @@ const open = defineModel<boolean>({ required: true, default: false });
         :options="{
             title: 'Invite members to your team',
             size: 'lg',
+            actions: [
+                {
+                    label: 'Send Invitations',
+                    disabled: inviteEmails.length === 0,
+                    variant: 'solid',
+                    iconLeft: 'send',
+                    onClick: () => {
+                        sendInvitationEmails();
+                    },
+                },
+            ],
         }"
     >
         <template #body-content>
@@ -78,7 +89,6 @@ const open = defineModel<boolean>({ required: true, default: false });
                 <div class="flex items-center gap-2">
                     <FormControl
                         v-model="emailInput"
-                        data-testid="input-invite-email"
                         label="Invite by Email"
                         type="email"
                         variant="outline"
@@ -104,16 +114,5 @@ const open = defineModel<boolean>({ required: true, default: false });
                 </ul>
             </div>
         </template>
-        <template #actions>
-            <Button
-                data-testid="btn-send-invite"
-                :disabled="inviteEmails.length === 0"
-                variant="solid"
-                icon-left="send"
-                @click="sendInvitationEmails"
-            >
-                Send Invitations
-            </Button>
-        </template>
     </Dialog>
 </template>
diff --git a/frontend/src/pages/home/Dashboard.vue b/frontend/src/pages/home/Dashboard.vue
index e8c2fd4..7cd93d2 100644
--- a/frontend/src/pages/home/Dashboard.vue
+++ b/frontend/src/pages/home/Dashboard.vue
@@ -37,37 +37,29 @@
             <p class="text-base">Manage and create forms</p>
         </div>
         <template v-if="user.user?.has_desk_access">
-            <div data-testid="btn-new-form" class="w-fit">
-                <Dropdown
-                    class="w-fit"
-                    :button="{
-                        label: 'Create',
-                        iconLeft: 'plus',
-                        variant: 'solid',
-                    }"
-                    :options="[
-                        {
-                            label: 'Create New',
-                            onClick: handleCreateDraftForm,
-                        },
-                        {
-                            label: 'Create from Existing DocType',
-                            onClick: () => {
-                                showSelectDoctypeDialog = true;
-                            },
+            <Dropdown
+                class="w-fit"
+                :button="{
+                    label: 'Create',
+                    iconLeft: 'plus',
+                    variant: 'solid',
+                }"
+                :options="[
+                    {
+                        label: 'Create New',
+                        onClick: handleCreateDraftForm,
+                    },
+                    {
+                        label: 'Create from Existing DocType',
+                        onClick: () => {
+                            showSelectDoctypeDialog = true;
                         },
-                    ]"
-                />
-            </div>
+                    },
+                ]"
+            />
         </template>
         <template v-else>
-            <Button
-                data-testid="btn-new-form"
-                class="w-fit"
-                variant="solid"
-                iconLeft="plus"
-                @click="handleCreateDraftForm"
-            >
+            <Button class="w-fit" variant="solid" iconLeft="plus" @click="handleCreateDraftForm">
                 Create New
             </Button>
         </template>

From 6464422be584582e8d4ffac1ab247b5820b6f31d Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Tue, 14 Apr 2026 01:21:35 +0530
Subject: [PATCH 04/11] =?UTF-8?q?feat(e2e):=20Phase=203+4=20=E2=80=94=20re?=
 =?UTF-8?q?maining=20specs,=20flake=20fixes,=20and=20CI=20workflow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Specs:
- form-submission.spec.ts — guest context submission + success message
- submission-view.spec.ts — empty state and post-submission row visibility
- team-invite.spec.ts — invite dialog open/fill/send flow

Fixture:
- submitForm fixture for creating a guest submission via API

Reliability fixes:
- smoke.spec.ts: reload on Frappe 500 under parallel startup load
- TeamPage.goto(): waitForLoadState("networkidle") so Vue API calls
  complete before assertions run
- TeamPage.openInviteDialog(): wait for email input to be visible (not
  just the dialog shell) before returning
- playwright.config.ts: retries=1 everywhere; github reporter added

CI:
- .github/workflows/ui-tests.yml: full Playwright E2E workflow running
  against a real Frappe bench on every PR and push to develop

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .github/workflows/ui-tests.yml             | 133 +++++++++++++++++++++
 frontend/e2e/fixtures/test-data.fixture.ts |  11 ++
 frontend/e2e/helpers/team.ts               |  10 +-
 frontend/e2e/specs/form-submission.spec.ts |  42 +++++++
 frontend/e2e/specs/smoke.spec.ts           |  11 +-
 frontend/e2e/specs/submission-view.spec.ts |  29 +++++
 frontend/e2e/specs/team-invite.spec.ts     |  38 ++++++
 frontend/playwright.config.ts              |   3 +-
 8 files changed, 272 insertions(+), 5 deletions(-)
 create mode 100644 .github/workflows/ui-tests.yml
 create mode 100644 frontend/e2e/specs/form-submission.spec.ts
 create mode 100644 frontend/e2e/specs/submission-view.spec.ts
 create mode 100644 frontend/e2e/specs/team-invite.spec.ts

diff --git a/.github/workflows/ui-tests.yml b/.github/workflows/ui-tests.yml
new file mode 100644
index 0000000..680bc0c
--- /dev/null
+++ b/.github/workflows/ui-tests.yml
@@ -0,0 +1,133 @@
+name: UI Tests
+
+on:
+  push:
+    branches:
+      - develop
+  pull_request:
+
+concurrency:
+  group: ui-tests-${{ github.event.number }}
+  cancel-in-progress: true
+
+jobs:
+  ui-tests:
+    runs-on: ubuntu-latest
+    name: Playwright E2E
+
+    services:
+      redis-cache:
+        image: redis:alpine
+        ports:
+          - 13000:6379
+      redis-queue:
+        image: redis:alpine
+        ports:
+          - 11000:6379
+      mariadb:
+        image: mariadb:10.6
+        env:
+          MYSQL_ROOT_PASSWORD: root
+        ports:
+          - 3306:3306
+        options: --health-cmd="mariadb-admin ping" --health-interval=5s --health-timeout=2s --health-retries=3
+
+    steps:
+      - name: Clone
+        uses: actions/checkout@v6
+
+      - name: Setup Python
+        uses: actions/setup-python@v6
+        with:
+          python-version: "3.14"
+
+      - name: Setup Node
+        uses: actions/setup-node@v6
+        with:
+          node-version: 24
+          check-latest: true
+
+      - name: Cache pip
+        uses: actions/cache@v5
+        with:
+          path: ~/.cache/pip
+          key: ${{ runner.os }}-pip-${{ hashFiles('**/*requirements.txt', '**/pyproject.toml', '**/setup.py', '**/setup.cfg') }}
+          restore-keys: |
+            ${{ runner.os }}-pip-
+            ${{ runner.os }}-
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: 'echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT'
+
+      - uses: actions/cache@v5
+        id: yarn-cache
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install MariaDB Client
+        run: |
+          sudo apt update
+          sudo apt-get install mariadb-client
+
+      - name: Setup Frappe bench
+        run: |
+          pip install frappe-bench
+          bench init --skip-redis-config-generation --skip-assets --python "$(which python)" ~/frappe-bench
+          mariadb --host 127.0.0.1 --port 3306 -u root -proot -e "SET GLOBAL character_set_server = 'utf8mb4'"
+          mariadb --host 127.0.0.1 --port 3306 -u root -proot -e "SET GLOBAL collation_server = 'utf8mb4_unicode_ci'"
+
+      - name: Install app
+        working-directory: /home/runner/frappe-bench
+        run: |
+          bench get-app frappe_factory_bot https://github.com/harshtandiya/frappe_factory_bot.git --branch main
+          bench get-app forms_pro $GITHUB_WORKSPACE
+          bench setup requirements --dev
+          bench new-site --db-root-password root --admin-password admin test_site
+          bench --site test_site install-app forms_pro
+          bench --site test_site set-config allow_tests true
+          bench build
+        env:
+          CI: "Yes"
+
+      - name: Start Frappe server
+        working-directory: /home/runner/frappe-bench
+        run: |
+          bench --site test_site set-config server_script_enabled true
+          bench serve --port 8001 &
+          npx wait-on http://localhost:8001 --timeout 60000
+        env:
+          CI: "Yes"
+
+      - name: Install Playwright browsers
+        working-directory: ${{ github.workspace }}/frontend
+        run: |
+          yarn install
+          npx playwright install --with-deps chromium
+
+      - name: Run Playwright tests
+        working-directory: ${{ github.workspace }}/frontend
+        run: yarn test:e2e
+        env:
+          BASE_URL: http://localhost:8001
+          TEST_ADMIN_PASSWORD: admin
+          CI: "true"
+
+      - name: Upload HTML report
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: frontend/e2e/playwright-report/
+          retention-days: 14
+
+      - name: Upload failure artifacts
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-results
+          path: frontend/e2e/test-results/
+          retention-days: 7
diff --git a/frontend/e2e/fixtures/test-data.fixture.ts b/frontend/e2e/fixtures/test-data.fixture.ts
index 1e880d5..4de5b5b 100644
--- a/frontend/e2e/fixtures/test-data.fixture.ts
+++ b/frontend/e2e/fixtures/test-data.fixture.ts
@@ -9,6 +9,7 @@ type TestDataFixtures = {
   getTeamId: () => Promise<string>;
   createForm: () => Promise<string>;
   createPublishedForm: () => Promise<{ formId: string; route: string }>;
+  submitForm: (formId: string) => Promise<void>;
 };
 
 async function fetchTeamId(apiContext: APIRequestContext): Promise<string> {
@@ -82,6 +83,16 @@ export const test = base.extend<TestDataFixtures>({
       await apiContext.delete(`/api/resource/Form/${id}`).catch(() => {});
     }
   },
+
+  // Creates a guest submission against an already-published form
+  submitForm: async ({ apiContext }, use) => {
+    await use(async (formId: string) => {
+      await apiContext.post(
+        "/api/method/forms_pro.api.submission.submit_form_response",
+        { data: { form_id: formId, form_data: [] } }
+      );
+    });
+  },
 });
 
 export { expect } from "@playwright/test";
diff --git a/frontend/e2e/helpers/team.ts b/frontend/e2e/helpers/team.ts
index 9c0f732..474d1f8 100644
--- a/frontend/e2e/helpers/team.ts
+++ b/frontend/e2e/helpers/team.ts
@@ -5,16 +5,24 @@ export class TeamPage {
 
   async goto() {
     await this.page.goto("/forms/team");
+    // Wait for the API calls (team members, etc.) to complete before proceeding
+    await this.page.waitForLoadState("networkidle");
   }
 
   async openInviteDialog() {
     await this.page.getByRole("button", { name: /invite member/i }).click();
+    // Wait until the dialog's email input is interactive, not just the dialog shell
+    await this.page
+      .getByRole("dialog")
+      .getByLabel("Invite by Email")
+      .waitFor({ state: "visible" });
   }
 
   async inviteByEmail(email: string) {
     const dialog = this.page.getByRole("dialog");
     await dialog.getByLabel("Invite by Email").fill(email);
-    await dialog.getByLabel("Invite by Email").press("Enter");
+    // Click "Add" to move the email into the pending invites list
+    await dialog.getByRole("button", { name: "Add" }).click();
     await dialog.getByRole("button", { name: "Send Invitations" }).click();
   }
 
diff --git a/frontend/e2e/specs/form-submission.spec.ts b/frontend/e2e/specs/form-submission.spec.ts
new file mode 100644
index 0000000..d014559
--- /dev/null
+++ b/frontend/e2e/specs/form-submission.spec.ts
@@ -0,0 +1,42 @@
+import { test, expect } from "../fixtures/test-data.fixture";
+import { SubmissionPage } from "../helpers/submission";
+
+test.describe("Form Submission", () => {
+  test("published form loads on the public submission page", async ({
+    page,
+    createPublishedForm,
+  }) => {
+    const { route } = await createPublishedForm();
+    const submissionPage = new SubmissionPage(page);
+    await submissionPage.goto(route);
+
+    // The public form renders a Submit button (form is in filling state)
+    await expect(page.getByRole("button", { name: "Submit" })).toBeVisible();
+  });
+
+  test("guest user can submit a published form", async ({
+    browser,
+    createPublishedForm,
+  }) => {
+    const { route } = await createPublishedForm();
+
+    // Fresh context = no session cookies → simulates a real guest user
+    const guestCtx = await browser.newContext();
+    const guestPage = await guestCtx.newPage();
+    const submissionPage = new SubmissionPage(guestPage);
+
+    await submissionPage.goto(route);
+    await expect(guestPage.getByRole("button", { name: "Submit" })).toBeVisible(
+      { timeout: 10000 }
+    );
+
+    await submissionPage.submit();
+
+    // Success section appears with the default thank-you copy
+    await expect(submissionPage.successMessage()).toBeVisible({
+      timeout: 10000,
+    });
+
+    await guestCtx.close();
+  });
+});
diff --git a/frontend/e2e/specs/smoke.spec.ts b/frontend/e2e/specs/smoke.spec.ts
index ed3a12d..c5bfc13 100644
--- a/frontend/e2e/specs/smoke.spec.ts
+++ b/frontend/e2e/specs/smoke.spec.ts
@@ -1,8 +1,13 @@
 import { test, expect } from "@playwright/test";
 
 test("authenticated user can reach the forms dashboard", async ({ page }) => {
-  await page.goto("/forms");
-  // If auth works, we land on the dashboard (not the login page)
+  const response = await page.goto("/forms");
+  // Frappe dev server can 500 on the very first request under parallel test startup
+  if (response?.status() === 500) {
+    await page.reload({ waitUntil: "networkidle" });
+  }
   await expect(page).not.toHaveURL(/login/);
-  await expect(page.getByText("Dashboard")).toBeVisible();
+  await expect(page.getByRole("heading", { name: "Dashboard" })).toBeVisible({
+    timeout: 15000,
+  });
 });
diff --git a/frontend/e2e/specs/submission-view.spec.ts b/frontend/e2e/specs/submission-view.spec.ts
new file mode 100644
index 0000000..018adb4
--- /dev/null
+++ b/frontend/e2e/specs/submission-view.spec.ts
@@ -0,0 +1,29 @@
+import { test, expect } from "../fixtures/test-data.fixture";
+
+test.describe("Submission Viewing", () => {
+  test("submissions page shows empty state when no submissions exist", async ({
+    page,
+    createPublishedForm,
+  }) => {
+    const { formId } = await createPublishedForm();
+    await page.goto(`/forms/manage/${formId}/submissions`);
+    await expect(page.getByText("No Submissions Yet")).toBeVisible();
+  });
+
+  test("admin sees a submission row after a form is submitted", async ({
+    page,
+    createPublishedForm,
+    submitForm,
+  }) => {
+    const { formId } = await createPublishedForm();
+    await submitForm(formId);
+
+    await page.goto(`/forms/manage/${formId}/submissions`);
+
+    // Empty state should be gone; the "Submitted" badge appears in a row
+    await expect(page.getByText("No Submissions Yet")).not.toBeVisible();
+    await expect(page.getByText("Submitted").first()).toBeVisible({
+      timeout: 10000,
+    });
+  });
+});
diff --git a/frontend/e2e/specs/team-invite.spec.ts b/frontend/e2e/specs/team-invite.spec.ts
new file mode 100644
index 0000000..40abd7e
--- /dev/null
+++ b/frontend/e2e/specs/team-invite.spec.ts
@@ -0,0 +1,38 @@
+import { test, expect } from "../fixtures/test-data.fixture";
+import { TeamPage } from "../helpers/team";
+
+test.describe("Team Management", () => {
+  test("team page loads and shows Invite Member button", async ({ page }) => {
+    const teamPage = new TeamPage(page);
+    await teamPage.goto();
+    await expect(
+      page.getByRole("button", { name: /invite member/i })
+    ).toBeVisible();
+  });
+
+  test("invite dialog opens with email input and send button", async ({
+    page,
+  }) => {
+    const teamPage = new TeamPage(page);
+    await teamPage.goto();
+    await teamPage.openInviteDialog();
+
+    const dialog = page.getByRole("dialog");
+    await expect(dialog.getByLabel("Invite by Email")).toBeVisible();
+    await expect(
+      dialog.getByRole("button", { name: "Send Invitations" })
+    ).toBeVisible();
+  });
+
+  test("team owner can invite a member by email", async ({ page }) => {
+    const teamPage = new TeamPage(page);
+    await teamPage.goto();
+    await teamPage.openInviteDialog();
+    await teamPage.inviteByEmail("testinvite@example.com");
+
+    // Success toast appears
+    await expect(page.getByText(/invitations sent successfully/i)).toBeVisible({
+      timeout: 10000,
+    });
+  });
+});
diff --git a/frontend/playwright.config.ts b/frontend/playwright.config.ts
index ed1d194..dc6e5e8 100644
--- a/frontend/playwright.config.ts
+++ b/frontend/playwright.config.ts
@@ -20,11 +20,12 @@ export default defineConfig({
     },
   ],
 
-  retries: process.env.CI ? 1 : 0,
+  retries: 1,
   workers: process.env.CI ? 2 : undefined,
 
   reporter: [
     ["list"],
     ["html", { outputFolder: "./e2e/playwright-report", open: "never" }],
+    ["github"],
   ],
 });

From 7c58625060d0ce1cc7b874f59b4364dadaa20cd5 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Tue, 14 Apr 2026 01:33:03 +0530
Subject: [PATCH 05/11] ci(ui-tests): log bench serve output on startup timeout

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .github/workflows/ui-tests.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/ui-tests.yml b/.github/workflows/ui-tests.yml
index 680bc0c..c16f5f1 100644
--- a/.github/workflows/ui-tests.yml
+++ b/.github/workflows/ui-tests.yml
@@ -97,8 +97,8 @@ jobs:
         working-directory: /home/runner/frappe-bench
         run: |
           bench --site test_site set-config server_script_enabled true
-          bench serve --port 8001 &
-          npx wait-on http://localhost:8001 --timeout 60000
+          bench serve --port 8001 > /tmp/bench-serve.log 2>&1 &
+          npx wait-on http://localhost:8001 --timeout 60000 || (echo "=== bench serve log ===" && cat /tmp/bench-serve.log && exit 1)
         env:
           CI: "Yes"
 

From 46993c182926497ef5256421f300edc6078c1a08 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Tue, 14 Apr 2026 23:02:22 +0530
Subject: [PATCH 06/11] =?UTF-8?q?ci(ui-tests):=20fix=20server=20startup=20?=
 =?UTF-8?q?=E2=80=94=20switch=20to=20bench=20start,=20add=20hostname,=20fi?=
 =?UTF-8?q?x=20action=20versions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace bench serve (silent crash) with bench start + Procfile (disable watch/schedule)
- Add forms.test to /etc/hosts and set host_name config; rename site test_site → forms.test
- Swap npx wait-on for a curl loop (no install overhead, same pattern as buzz CI)
- Fix non-existent action versions: checkout@v6→@v4, setup-python@v6→@v5, setup-node@v6→@v4
- Add timeout-minutes: 60, fix concurrency group for push events, add workflow_dispatch
- Add Playwright browser cache step and bench logs dump on failure

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .github/workflows/ui-tests.yml | 57 +++++++++++++++++++++++++---------
 1 file changed, 43 insertions(+), 14 deletions(-)

diff --git a/.github/workflows/ui-tests.yml b/.github/workflows/ui-tests.yml
index c16f5f1..2dd1f0d 100644
--- a/.github/workflows/ui-tests.yml
+++ b/.github/workflows/ui-tests.yml
@@ -5,14 +5,16 @@ on:
     branches:
       - develop
   pull_request:
+  workflow_dispatch:
 
 concurrency:
-  group: ui-tests-${{ github.event.number }}
+  group: ui-tests-${{ github.event.number || github.ref }}
   cancel-in-progress: true
 
 jobs:
   ui-tests:
     runs-on: ubuntu-latest
+    timeout-minutes: 60
     name: Playwright E2E
 
     services:
@@ -34,19 +36,22 @@ jobs:
 
     steps:
       - name: Clone
-        uses: actions/checkout@v6
+        uses: actions/checkout@v4
 
       - name: Setup Python
-        uses: actions/setup-python@v6
+        uses: actions/setup-python@v5
         with:
           python-version: "3.14"
 
       - name: Setup Node
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
           node-version: 24
           check-latest: true
 
+      - name: Add to Hosts
+        run: echo "127.0.0.1 forms.test" | sudo tee -a /etc/hosts
+
       - name: Cache pip
         uses: actions/cache@v5
         with:
@@ -68,6 +73,14 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-yarn-
 
+      - name: Cache Playwright browsers
+        uses: actions/cache@v5
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ hashFiles('**/package.json') }}
+          restore-keys: |
+            ${{ runner.os }}-playwright-
+
       - name: Install MariaDB Client
         run: |
           sudo apt update
@@ -86,21 +99,28 @@ jobs:
           bench get-app frappe_factory_bot https://github.com/harshtandiya/frappe_factory_bot.git --branch main
           bench get-app forms_pro $GITHUB_WORKSPACE
           bench setup requirements --dev
-          bench new-site --db-root-password root --admin-password admin test_site
-          bench --site test_site install-app forms_pro
-          bench --site test_site set-config allow_tests true
+          bench new-site --db-root-password root --admin-password admin forms.test
+          bench --site forms.test install-app forms_pro
           bench build
         env:
           CI: "Yes"
 
-      - name: Start Frappe server
+      - name: Configure Site for UI Tests
         working-directory: /home/runner/frappe-bench
         run: |
-          bench --site test_site set-config server_script_enabled true
-          bench serve --port 8001 > /tmp/bench-serve.log 2>&1 &
-          npx wait-on http://localhost:8001 --timeout 60000 || (echo "=== bench serve log ===" && cat /tmp/bench-serve.log && exit 1)
-        env:
-          CI: "Yes"
+          bench --site forms.test set-config allow_tests true
+          bench --site forms.test set-config server_script_enabled true
+          bench --site forms.test set-config host_name "http://forms.test:8000"
+
+      - name: Start Frappe Server
+        working-directory: /home/runner/frappe-bench
+        run: |
+          sed -i 's/^watch:/# watch:/g' Procfile
+          sed -i 's/^schedule:/# schedule:/g' Procfile
+          bench start &> /tmp/bench_start.log &
+          echo "Waiting for Frappe server to start..."
+          timeout 90 bash -c 'until curl -s http://forms.test:8000 > /dev/null; do sleep 2; done' || (echo "=== bench start log ===" && cat /tmp/bench_start.log && exit 1)
+          echo "Frappe server is ready!"
 
       - name: Install Playwright browsers
         working-directory: ${{ github.workspace }}/frontend
@@ -112,7 +132,7 @@ jobs:
         working-directory: ${{ github.workspace }}/frontend
         run: yarn test:e2e
         env:
-          BASE_URL: http://localhost:8001
+          BASE_URL: http://forms.test:8000
           TEST_ADMIN_PASSWORD: admin
           CI: "true"
 
@@ -131,3 +151,12 @@ jobs:
           name: playwright-results
           path: frontend/e2e/test-results/
           retention-days: 7
+
+      - name: Show bench logs on failure
+        if: failure()
+        run: |
+          echo "=== bench start log ==="
+          cat /tmp/bench_start.log || true
+          echo ""
+          echo "=== Frappe logs ==="
+          cat /home/runner/frappe-bench/logs/*.log || true

From 927cd77539d0e5a475e3f4b71281746bfb229667 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Tue, 14 Apr 2026 23:12:17 +0530
Subject: [PATCH 07/11] =?UTF-8?q?ci(ui-tests):=20setup=20E2E=20test=20data?=
 =?UTF-8?q?=20=E2=80=94=20give=20Admin=20Forms=20Pro=20role=20and=20defaul?=
 =?UTF-8?q?t=20team?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`before_tests()` already added the role to Administrator, but the
`on_update` hook that creates the default team checks `has_value_changed`
on a freshly-fetched doc (which is always False), so no team was ever
created. `_ensure_admin_has_default_team()` closes that gap explicitly.

A new "Setup E2E test data" CI step calls `bench execute
forms_pro.install.before_tests` before the server starts, so the
test user has a team available when fixtures call `get_user_teams`.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .github/workflows/ui-tests.yml |  4 ++++
 forms_pro/install.py           | 11 +++++++++++
 2 files changed, 15 insertions(+)

diff --git a/.github/workflows/ui-tests.yml b/.github/workflows/ui-tests.yml
index 2dd1f0d..89e2e34 100644
--- a/.github/workflows/ui-tests.yml
+++ b/.github/workflows/ui-tests.yml
@@ -112,6 +112,10 @@ jobs:
           bench --site forms.test set-config server_script_enabled true
           bench --site forms.test set-config host_name "http://forms.test:8000"
 
+      - name: Setup E2E test data
+        working-directory: /home/runner/frappe-bench
+        run: bench --site forms.test execute forms_pro.install.before_tests
+
       - name: Start Frappe Server
         working-directory: /home/runner/frappe-bench
         run: |
diff --git a/forms_pro/install.py b/forms_pro/install.py
index f408d42..39eb690 100644
--- a/forms_pro/install.py
+++ b/forms_pro/install.py
@@ -22,6 +22,17 @@ def create_user_forms_module():
 def before_tests():
     give_admin_forms_pro_role()
     create_test_user()
+    _ensure_admin_has_default_team()
+
+
+def _ensure_admin_has_default_team():
+    from forms_pro.overrides.roles import create_default_team_for_user
+    from forms_pro.utils.teams import get_user_teams
+
+    if get_user_teams("Administrator"):
+        return
+    admin = frappe.get_doc("User", "Administrator")
+    create_default_team_for_user(admin)
 
 
 def give_admin_forms_pro_role():

From 5a73019e81f3ff88d0a26e17faf7d5e21e3a4b04 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Tue, 14 Apr 2026 23:24:36 +0530
Subject: [PATCH 08/11] fix(form-generator): replace clear_cache() with
 targeted doctype cache clear
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

frappe.clear_cache() flushes Redis entirely, including session and CSRF
token data. In the E2E test suite this causes all POST API calls after
the first form creation to fail with CSRFTokenError, because the token
captured during global-setup is invalidated server-side.

Replace with frappe.clear_document_cache("DocType", name) which only
evicts the specific newly-created DocType from the document cache —
sufficient for the new schema to be reloaded on next access, and does
not touch sessions or CSRF tokens.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 forms_pro/utils/form_generator.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/forms_pro/utils/form_generator.py b/forms_pro/utils/form_generator.py
index 8bae1ba..14fa51d 100644
--- a/forms_pro/utils/form_generator.py
+++ b/forms_pro/utils/form_generator.py
@@ -98,7 +98,7 @@ def generate(self) -> None:
         self._initialize_doctype()
         self._add_status_field()
         self._initialize_form_document()
-        frappe.clear_cache()
+        frappe.clear_document_cache("DocType", self.doctype.name)
 
     def _initialize_doctype(self) -> None:
         if self.doctype:

From 3274546896aa46758bccdc6efa0942281897b6f9 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Tue, 14 Apr 2026 23:46:43 +0530
Subject: [PATCH 09/11] ci(ui-tests): set ignore_csrf=1 for test site

Frappe's DocType.on_update() calls frappe.clear_cache() internally
whenever a DocType is saved. This flushes session/CSRF data from Redis,
invalidating the CSRF token captured in Playwright's storageState.json.
All POST API calls after the first form creation then fail with
CSRFTokenError.

ignore_csrf=1 is the standard Frappe configuration for CI/test sites
and skips CSRF validation entirely, which is correct here.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .github/workflows/ui-tests.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/ui-tests.yml b/.github/workflows/ui-tests.yml
index 89e2e34..5b17fab 100644
--- a/.github/workflows/ui-tests.yml
+++ b/.github/workflows/ui-tests.yml
@@ -111,6 +111,7 @@ jobs:
           bench --site forms.test set-config allow_tests true
           bench --site forms.test set-config server_script_enabled true
           bench --site forms.test set-config host_name "http://forms.test:8000"
+          bench --site forms.test set-config ignore_csrf 1
 
       - name: Setup E2E test data
         working-directory: /home/runner/frappe-bench

From 10720fe50bee593b610925caa66b02dd80e08a8b Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Wed, 15 Apr 2026 00:03:14 +0530
Subject: [PATCH 10/11] ci(ui-tests): mute emails so invite test does not need
 an email account

Sets mute_emails=1 in site config so Frappe returns a dummy outgoing
account instead of throwing OutgoingEmailError when no real account is
configured, allowing the team-invite E2E test to succeed.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .github/workflows/ui-tests.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/ui-tests.yml b/.github/workflows/ui-tests.yml
index 5b17fab..5b59a48 100644
--- a/.github/workflows/ui-tests.yml
+++ b/.github/workflows/ui-tests.yml
@@ -112,6 +112,7 @@ jobs:
           bench --site forms.test set-config server_script_enabled true
           bench --site forms.test set-config host_name "http://forms.test:8000"
           bench --site forms.test set-config ignore_csrf 1
+          bench --site forms.test set-config mute_emails 1
 
       - name: Setup E2E test data
         working-directory: /home/runner/frappe-bench

From c92f4cd358418ae3208d74027933797fbb4eda20 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Wed, 15 Apr 2026 15:56:36 +0530
Subject: [PATCH 11/11] ci(ui-tests): run E2E tests as the shared Forms Pro
 test user

- Switch global-setup login from Administrator to FORMS_PRO_TEST_USER
  (test_forms_pro_user@example.com / testforms123) so E2E tests run
  under a least-privileged Forms Pro User, matching real-user conditions
- Fix create_test_user() to strip the System User role Frappe auto-assigns
  on insert, leaving only the Forms Pro User role
- Set a known password via update_password() so Playwright can log in
- Add frontend/e2e/tsconfig.json with @types/node so process.env
  references in global-setup.ts type-check correctly
- Install @types/node dev dependency

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .github/workflows/ui-tests.yml |  3 ++-
 forms_pro/install.py           |  7 +++++++
 frontend/e2e/global-setup.ts   |  4 ++--
 frontend/e2e/tsconfig.json     | 14 ++++++++++++++
 frontend/package.json          |  1 +
 frontend/yarn.lock             | 12 ++++++++++++
 6 files changed, 38 insertions(+), 3 deletions(-)
 create mode 100644 frontend/e2e/tsconfig.json

diff --git a/.github/workflows/ui-tests.yml b/.github/workflows/ui-tests.yml
index 5b59a48..a819bb3 100644
--- a/.github/workflows/ui-tests.yml
+++ b/.github/workflows/ui-tests.yml
@@ -139,7 +139,8 @@ jobs:
         run: yarn test:e2e
         env:
           BASE_URL: http://forms.test:8000
-          TEST_ADMIN_PASSWORD: admin
+          TEST_USER_EMAIL: test_forms_pro_user@example.com
+          TEST_USER_PASSWORD: testforms123
           CI: "true"
 
       - name: Upload HTML report
diff --git a/forms_pro/install.py b/forms_pro/install.py
index 39eb690..99707c1 100644
--- a/forms_pro/install.py
+++ b/forms_pro/install.py
@@ -42,6 +42,8 @@ def give_admin_forms_pro_role():
 
 
 def create_test_user():
+    from frappe.utils.password import update_password
+
     if frappe.db.exists("User", FORMS_PRO_TEST_USER):
         return
 
@@ -50,5 +52,10 @@ def create_test_user():
     user.first_name = "Test"
     user.last_name = "Forms Pro User"
     user.insert(ignore_permissions=True)
+
+    # Frappe auto-assigns System User on insert; replace with only Forms Pro User
+    user.roles = []
     user.append("roles", {"role": FORMS_PRO_ROLE})
     user.save(ignore_permissions=True)
+
+    update_password(FORMS_PRO_TEST_USER, "testforms123")
diff --git a/frontend/e2e/global-setup.ts b/frontend/e2e/global-setup.ts
index aa32093..1fc09fd 100644
--- a/frontend/e2e/global-setup.ts
+++ b/frontend/e2e/global-setup.ts
@@ -18,8 +18,8 @@ export default async function globalSetup(_config: FullConfig) {
   await page.goto(baseURL);
   await page.request.post(`${baseURL}/api/method/login`, {
     form: {
-      usr: "Administrator",
-      pwd: process.env.TEST_ADMIN_PASSWORD ?? "admin",
+      usr: process.env.TEST_USER_EMAIL ?? "test_forms_pro_user@example.com",
+      pwd: process.env.TEST_USER_PASSWORD ?? "testforms123",
     },
   });
 
diff --git a/frontend/e2e/tsconfig.json b/frontend/e2e/tsconfig.json
new file mode 100644
index 0000000..61b5dac
--- /dev/null
+++ b/frontend/e2e/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2022"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "types": ["node", "@playwright/test"],
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "isolatedModules": true
+  },
+  "include": ["./**/*.ts", "../playwright.config.ts"]
+}
diff --git a/frontend/package.json b/frontend/package.json
index 5fdf6cc..00fa9dc 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -33,6 +33,7 @@
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
     "@playwright/test": "^1.59.1",
+    "@types/node": "^25.6.0",
     "@vitejs/plugin-vue": "^6.0.5",
     "@vitest/coverage-v8": "^4.1.4",
     "autoprefixer": "^10.4.2",
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 9ef788e..44c501f 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -862,6 +862,13 @@
   resolved "https://registry.yarnpkg.com/@types/mdurl/-/mdurl-2.0.0.tgz#d43878b5b20222682163ae6f897b20447233bdfd"
   integrity sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==
 
+"@types/node@^25.6.0":
+  version "25.6.0"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-25.6.0.tgz#4e09bad9b469871f2d0f68140198cbd714f4edca"
+  integrity sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ==
+  dependencies:
+    undici-types "~7.19.0"
+
 "@types/trusted-types@^2.0.7":
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11"
@@ -3271,6 +3278,11 @@ ufo@^1.6.1:
   resolved "https://registry.yarnpkg.com/ufo/-/ufo-1.6.1.tgz#ac2db1d54614d1b22c1d603e3aef44a85d8f146b"
   integrity sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==
 
+undici-types@~7.19.0:
+  version "7.19.2"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-7.19.2.tgz#1b67fc26d0f157a0cba3a58a5b5c1e2276b8ba2a"
+  integrity sha512-qYVnV5OEm2AW8cJMCpdV20CDyaN3g0AjDlOGf1OW4iaDEx8MwdtChUp4zu4H0VP3nDRF/8RKWH+IPp9uW0YGZg==
+
 undici@^7.24.5:
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/undici/-/undici-7.24.7.tgz#af9535341bbe80625ca403a02418477a5c6a8760"