refactor/optimize e2e test (#3)

how fast i'll go 🏄‍♂️

---------

Co-authored-by: me <ramvignesh-b@github.com>
Reviewed-on: #3

frontend/e2e/utils/auth.ts

@@ -1,6 +1,7 @@
 import { expect, type Page } from "@playwright/test";
 import pino from "pino";
 import { MailpitHelper } from "./mailpit";
+import { handleWelcomeLetter } from "./envelope";
 
 const logger = pino({
   transport: {
@@ -23,11 +24,11 @@ async function registerAndLogin(
   // Register the User
   logger.info(`[Auth] Registering user: ${email}`);
   await page.goto("/onboard");
-  await page.getByLabel(/pen name/i).fill(fullName);
-  await page.getByLabel("Email", { exact: true }).fill(email);
-  await page.getByLabel("Password", { exact: true }).fill(password);
-  await page.getByLabel(/confirm password/i).fill(password);
-  await page.getByRole("button", { name: /^register$/i }).click();
+  await page.getByTestId("pen-name-input").fill(fullName);
+  await page.getByTestId("email-input").fill(email);
+  await page.getByTestId("password-input").fill(password);
+  await page.getByTestId("confirm-password-input").fill(password);
+  await page.getByTestId("register-submit-btn").click();
 
   await expect(page).toHaveURL(/\/verify-email/);
 
@@ -37,51 +38,23 @@ async function registerAndLogin(
 
   await page.goto(activationLink);
 
-  await expect(page.getByText(/account activated/i)).toBeVisible();
-  await page.getByRole("button", { name: /start writing/i }).click();
+  await expect(page.getByTestId("activation-success-header")).toBeVisible();
+  await page.getByTestId("start-writing-btn").click();
 
   // Dismiss the Welcom Modal and Perform Login
   logger.info(`[Auth] Logging in...`);
   await expect(page).toHaveURL(/\/login/);
 
-  const welcomeButton = page.getByRole("button", { name: /I'll remember/i });
-  await welcomeButton.waitFor({ state: "visible", timeout: 10000 });
-  await welcomeButton.click();
-  await expect(welcomeButton).toBeHidden();
+  await page.getByTestId("welcome-dismiss-btn").click();
+  await expect(page.getByTestId("welcome-dismiss-btn")).toBeHidden();
 
-  await page.getByLabel("Email", { exact: true }).fill(email);
-  await page.getByLabel("Password", { exact: true }).fill(password);
-  await page.getByRole("button", { name: /sign in/i }).click();
+  await page.getByTestId("email-input").fill(email);
+  await page.getByTestId("password-input").fill(password);
+  await page.getByTestId("login-submit-btn").click();
 
   await expect(page).toHaveURL(/\/drawer/);
   await handleWelcomeLetter(page);
   logger.info(`[Auth] Successfully authenticated ${email}`);
 }
 
-/**
- * Handles and dismisses the first welocme letter
- */
-async function handleWelcomeLetter(page: Page) {
-  logger.info("[Auth] Handling Welcome Letter...");
-  // Click envelope to flip
-  const envelope = page.locator("#env-front");
-  await envelope.waitFor({ state: "visible", timeout: 10000 });
-  await envelope.click();
-
-  // Click seal to open flap
-  const seal = page.getByAltText("Seal");
-  await seal.waitFor({ state: "visible" });
-  await seal.click();
-
-  // Click letter to reveal
-   await page.locator("#letter").click({ position: { x: 30, y: 15 } });
-
-  // Click "I'll see you" button
-  const completeButton = page.getByRole("button", { name: /I'll see you/i });
-  await completeButton.waitFor({ state: "visible", timeout: 10000 });
-  await completeButton.click();
-
-  await expect(completeButton).toBeHidden();
-}
-
-export const AuthHelper = { registerAndLogin, handleWelcomeLetter };
+export const AuthHelper = { registerAndLogin };

frontend/e2e/utils/envelope.ts

@@ -0,0 +1,38 @@
+import { type Page, expect } from "@playwright/test";
+import pino from "pino";
+
+const logger = pino({
+  transport: {
+    target: "pino-pretty",
+    options: {
+      colorize: true,
+    },
+  },
+});
+
+/**
+ * Reveal a letter from an envelope.
+ */
+export async function revealEnvelope(page: Page) {
+  logger.info("[Envelope] Revealing envelope...");
+  // Click envelope to flip
+  await page.getByTestId("envelope-front").click();
+
+  // Click seal to open flap
+  await page.getByTestId("wax-seal").click();
+
+  // Click letter to reveal
+  await page.getByTestId("envelope-letter").click({ position: { x: 30, y: 15 } });
+}
+
+/**
+ * Handles and dismisses the first welcome letter
+ */
+export async function handleWelcomeLetter(page: Page) {
+  logger.info("[Envelope] Handling Welcome Letter...");
+  await revealEnvelope(page);
+
+  // Click "I'll see you" button
+  await page.getByTestId("dismiss-welcome-letter-btn").click();
+  await expect(page.getByTestId("dismiss-welcome-letter-btn")).toBeHidden();
+}