feat: (e2e) onboarding tests and quick login method

apps/web/playwright/lib/user.ts

@@ -1,17 +0,0 @@
-import { randomBytes } from "crypto";
-
-let user: {
-  name: string;
-  email: string;
-  password: string;
-} | null;
-
-export const getUser = () => {
-  if (!user) {
-    const name = randomBytes(4).toString("hex");
-    const email = `${name}@gmail.com`;
-    const password = "Test@123";
-    user = { name, email, password };
-  }
-  return user;
-};

apps/web/playwright/onboarding.spec.ts

@@ -0,0 +1,45 @@
+import { getTeam, getUser, signUpAndLogin } from "./utils";
+import { test, expect } from "@playwright/test";
+
+const { role, productName, useCase } = getTeam();
+
+test.describe("Onboarding Flow Test", async () => {
+  test.beforeEach(async ({ page }) => {
+    const { name, email, password } = getUser();
+    await signUpAndLogin(page, name, email, password);
+    await page.waitForURL("/onboarding");
+    await expect(page).toHaveURL("/onboarding");
+  });
+
+  test("Step by Step", async ({ page }) => {
+    await page.getByRole("button", { name: "Begin (1 min)" }).click();
+    await page.getByLabel(role).check();
+    await page.getByRole("button", { name: "Next" }).click();
+
+    await expect(page.getByLabel(useCase)).toBeVisible();
+    await page.getByLabel(useCase).check();
+    await page.getByRole("button", { name: "Next" }).click();
+
+    await expect(page.getByPlaceholder("e.g. Formbricks")).toBeVisible();
+    await page.getByPlaceholder("e.g. Formbricks").fill(productName);
+
+    await page.locator(".h-6").click();
+    await page.getByLabel("Hue").click();
+
+    await page.locator("div").filter({ hasText: "Create your team's product." }).nth(1).click();
+    await page.getByRole("button", { name: "Done" }).click();
+
+    await page.waitForURL(/\/environments\/[^/]+\/surveys/);
+    await expect(page).toHaveURL(/\/environments\/[^/]+\/surveys/);
+    await expect(page.getByText(productName)).toBeVisible();
+  });
+
+  test("Skip", async ({ page }) => {
+    await page.getByRole("button", { name: "I'll do it later" }).click();
+    await page.getByRole("button", { name: "I'll do it later" }).click();
+
+    await page.waitForURL(/\/environments\/[^/]+\/surveys/);
+    await expect(page).toHaveURL(/\/environments\/[^/]+\/surveys/);
+    await expect(page.getByText("My Product")).toBeVisible();
+  });
+});

apps/web/playwright/signup.spec.ts

@@ -1,5 +1,5 @@
-import { getUser } from "@/playwright/lib/user";
-import { test } from "@playwright/test";
+import { getUser } from "./utils";
+import { test, expect } from "@playwright/test";
 
 const { name, email, password } = getUser();
 
@@ -11,74 +11,51 @@ test.describe("Email Signup Flow Test", async () => {
   });
 
   test("Valid User", async ({ page }) => {
-    await page.waitForSelector('input[name="name"]');
     await page.fill('input[name="name"]', name);
-    await page.press('input[name="name"]', "Tab");
-
     await page.fill('input[name="email"]', email);
-    await page.press('input[name="email"]', "Tab");
-
     await page.fill('input[name="password"]', password);
     await page.press('input[name="password"]', "Enter");
-
     await page.waitForURL("/auth/signup-without-verification-success");
+    await expect(page).toHaveURL("/auth/signup-without-verification-success");
   });
 
   test("Email is taken", async ({ page }) => {
-    await page.waitForSelector('input[name="name"]');
     await page.fill('input[name="name"]', name);
-    await page.press('input[name="name"]', "Tab");
-
     await page.fill('input[name="email"]', email);
-    await page.press('input[name="email"]', "Tab");
-
     await page.fill('input[name="password"]', password);
     await page.press('input[name="password"]', "Enter");
 
     let alertMessage = "user with this email address already exists";
-
     await (await page.waitForSelector(`text=${alertMessage}`)).isVisible();
   });
 
   test("No Name", async ({ page }) => {
-    await page.waitForSelector('input[name="name"]');
     await page.fill('input[name="name"]', "");
-    await page.press('input[name="name"]', "Tab");
-
     await page.fill('input[name="email"]', email);
-    await page.press('input[name="email"]', "Tab");
-
     await page.fill('input[name="password"]', password);
     await page.press('input[name="password"]', "Enter");
 
-    await page.getByText("Continue with Email").isDisabled();
+    const button = page.getByText("Continue with Email");
+    await expect(button).toBeDisabled();
   });
 
   test("Invalid Email", async ({ page }) => {
-    await page.waitForSelector('input[name="name"]');
     await page.fill('input[name="name"]', name);
-    await page.press('input[name="name"]', "Tab");
-
     await page.fill('input[name="email"]', "invalid");
-    await page.press('input[name="email"]', "Tab");
-
     await page.fill('input[name="password"]', password);
     await page.press('input[name="password"]', "Enter");
 
-    await page.getByText("Continue with Email").isDisabled();
+    const button = page.getByText("Continue with Email");
+    await expect(button).toBeDisabled();
   });
 
   test("Invalid Password", async ({ page }) => {
-    await page.waitForSelector('input[name="name"]');
     await page.fill('input[name="name"]', name);
-    await page.press('input[name="name"]', "Tab");
-
     await page.fill('input[name="email"]', email);
-    await page.press('input[name="email"]', "Tab");
-
     await page.fill('input[name="password"]', "invalid");
     await page.press('input[name="password"]', "Enter");
 
-    await page.getByText("Continue with Email").isDisabled();
+    const button = page.getByText("Continue with Email");
+    await expect(button).toBeDisabled();
   });
 });

apps/web/playwright/utils.ts

@@ -0,0 +1,45 @@
+import { randomBytes } from "crypto";
+import { Page } from "playwright";
+
+export const getUser = () => {
+  const name = randomBytes(4).toString("hex");
+  const email = `${name}@gmail.com`;
+  const password = `T${name}@123`;
+  return { name, email, password };
+};
+
+export const getTeam = () => {
+  let roles = ["Project Manager", "Engineer", "Founder", "Marketing Specialist"];
+  let useCases = [
+    "Increase conversion",
+    "Improve user retention",
+    "Increase user adoption",
+    "Sharpen marketing messaging",
+    "Support sales",
+  ];
+  const productName = randomBytes(8).toString("hex");
+  const role = roles[Math.floor(Math.random() * roles.length)];
+  const useCase = useCases[Math.floor(Math.random() * useCases.length)];
+  return { role, useCase, productName };
+};
+
+export const signUpAndLogin = async (
+  page: Page,
+  name: string,
+  email: string,
+  password: string
+): Promise<void> => {
+  await page.goto("/auth/login");
+  await page.getByRole("link", { name: "Create an account" }).click();
+  await page.getByRole("button", { name: "Continue with Email" }).click();
+  await page.getByPlaceholder("Full Name").fill(name);
+  await page.getByPlaceholder("work@email.com").fill(email);
+  await page.getByPlaceholder("*******").fill(password);
+  await page.press('input[name="password"]', "Enter");
+  await page.getByRole("link", { name: "Login" }).click();
+  await page.getByRole("button", { name: "Login with Email" }).click();
+  await page.getByPlaceholder("work@email.com").fill(email);
+  await page.getByPlaceholder("*******").click();
+  await page.getByPlaceholder("*******").fill(password);
+  await page.getByRole("button", { name: "Login with Email" }).click();
+};