From e19a82e2e4fb9f5481e427a1b8bb94c301826f1c Mon Sep 17 00:00:00 2001 From: ShubhamPalriwala Date: Tue, 12 Dec 2023 13:38:24 +0530 Subject: [PATCH] feat: (e2e) onboarding tests and quick login method --- apps/web/playwright/lib/user.ts | 17 ---------- apps/web/playwright/onboarding.spec.ts | 45 ++++++++++++++++++++++++++ apps/web/playwright/signup.spec.ts | 41 ++++++----------------- apps/web/playwright/utils.ts | 45 ++++++++++++++++++++++++++ 4 files changed, 99 insertions(+), 49 deletions(-) delete mode 100644 apps/web/playwright/lib/user.ts create mode 100644 apps/web/playwright/onboarding.spec.ts create mode 100644 apps/web/playwright/utils.ts diff --git a/apps/web/playwright/lib/user.ts b/apps/web/playwright/lib/user.ts deleted file mode 100644 index 26839dfbec..0000000000 --- a/apps/web/playwright/lib/user.ts +++ /dev/null @@ -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; -}; diff --git a/apps/web/playwright/onboarding.spec.ts b/apps/web/playwright/onboarding.spec.ts new file mode 100644 index 0000000000..bd57f6b491 --- /dev/null +++ b/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(); + }); +}); diff --git a/apps/web/playwright/signup.spec.ts b/apps/web/playwright/signup.spec.ts index 90435e78c9..58d586a440 100644 --- a/apps/web/playwright/signup.spec.ts +++ b/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(); }); }); diff --git a/apps/web/playwright/utils.ts b/apps/web/playwright/utils.ts new file mode 100644 index 0000000000..4e97d9791f --- /dev/null +++ b/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 => { + 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(); +};