frontend/e2e/letter.spec.ts

@@ -1,6 +1,7 @@
 import { expect, test } from "@playwright/test";
 import pino from "pino";
 import { AuthHelper } from "./utils/auth";
+import { revealEnvelope } from "./utils/envelope";
 
 const logger = pino({
   transport: {
@@ -22,12 +23,12 @@ test.describe("Letter Drafting (Real Backend)", () => {
     await AuthHelper.registerAndLogin(page, email, name, password);
 
     logger.info(">> [Draft] Navigating to Editor via UI...");
-    await page.getByRole("button", { name: /write something/i }).click();
+    await page.getByTestId("write-letter-btn").click();
 
     logger.info(`>> [Draft] Current URL after click: ${page.url()}`);
 
     // Wait for the recipient input to be present in the DOM
-    const recipientInput = page.locator("#recipient");
+    const recipientInput = page.getByTestId("recipient-input");
     await recipientInput.waitFor({ state: "visible", timeout: 20000 });
 
     const recipientName = "Dear Friend";
@@ -46,7 +47,7 @@ test.describe("Letter Drafting (Real Backend)", () => {
     await page.keyboard.press("Enter");
     await page.keyboard.type("It should persist.");
     logger.info(">> [Draft] Clicking Draft...");
-    await page.getByRole("button", { name: /draft/i }).click();
+    await page.getByTestId("draft-btn").click();
 
     // Verify Success Modal/Alert
     await expect(page.getByText(/your letter is saved/i)).toBeVisible();
@@ -70,7 +71,7 @@ test.describe("Letter Drafting (Real Backend)", () => {
     });
 
     // Check recipient
-    await expect(page.locator("#recipient")).toHaveValue(recipientName);
+    await expect(page.getByTestId("recipient-input")).toHaveValue(recipientName);
 
     // Check canvas content
     // We wait for the content to appear in the textarea.
@@ -92,9 +93,9 @@ test.describe("Letter Drafting (Real Backend)", () => {
     await AuthHelper.registerAndLogin(page, email, name, password);
 
     logger.info(">> [Seal] Navigating to Editor via UI...");
-    await page.locator("#write-letter-btn").click();
+    await page.getByTestId("write-letter-btn").click();
 
-    const recipientInput = page.locator("#recipient");
+    const recipientInput = page.getByTestId("recipient-input");
     await recipientInput.waitFor({ state: "visible", timeout: 10000 });
     await recipientInput.fill("A Secret Guest");
 
@@ -104,14 +105,8 @@ test.describe("Letter Drafting (Real Backend)", () => {
 
     // Click Seal (open menu, then confirm)
     logger.info(">> [Seal] Clicking Seal...");
-    await page
+    await page.getByTestId("seal-trigger-btn").click();
-      .getByRole("button", { name: /seal/i })
+    await page.getByTestId("seal-confirm-btn").click();
-      .filter({ visible: true })
-      .click();
-    await page
-      .getByRole("button", { name: /seal/i })
-      .filter({ visible: true })
-      .click();
 
     // Should show sealed confirmation modal
     logger.info(">> [Seal] Verifying sealed modal...");
@@ -120,7 +115,7 @@ test.describe("Letter Drafting (Real Backend)", () => {
     });
 
     // Navigate to Reader via "View letter"
-    await page.getByRole("button", { name: /view letter/i }).click();
+    await page.getByTestId("view-letter-btn").click();
 
     // Should be on Reader URL
     await expect(page).toHaveURL(/\/read\/[a-f0-9-]{36}$/, { timeout: 15000 });
@@ -129,18 +124,13 @@ test.describe("Letter Drafting (Real Backend)", () => {
     await expect(page.getByText(/breaking the seal/i)).toBeHidden({
       timeout: 10000,
     });
-    // Flip the envelope to show the seal
+    // Flip the envelope to show the seal and reveal the letter
-    await page.locator("#env-front").click();
+    await revealEnvelope(page);
-    await page.waitForTimeout(2500); // Wait for flip transition
+    await expect(page.getByTestId("envelope-letter")).toBeHidden({ timeout: 20000 });
-
-    await page.getByAltText("Seal").click();
-    await page.waitForTimeout(1500);
-    await page.locator("#letter").click({ position: { x: 30, y: 15 } });
-    await expect(page.locator("#letter")).toBeHidden({ timeout: 20000 });
 
     // Share on demand
     logger.info(">> [Seal] Clicking Share button in Reader...");
-    await page.locator("#share-letter-btn").click();
+    await page.getByTestId("share-letter-btn").click();
 
     // Verify share modal with a valid link
     await expect(page.getByText(/send this letter/i)).toBeVisible();
@@ -151,6 +141,7 @@ test.describe("Letter Drafting (Real Backend)", () => {
     logger.info(`>> [Seal] Sharing link: ${linkValue}`);
 
     await expect(page.getByRole("button", { name: /copy/i })).toBeVisible();
+    // Assuming Close button in ShareModal might need a testid too, but for now let's use text if unique or add testid
     await page.getByRole("button", { name: /close/i }).click();
     await expect(page.getByText(/send this letter/i)).toBeHidden();
   });
@@ -167,9 +158,9 @@ test.describe("Letter Drafting (Real Backend)", () => {
     await AuthHelper.registerAndLogin(page, email, name, password);
 
     logger.info(">> [Drawer] Creating and sealing a letter...");
-    await page.getByRole("button", { name: /write something/i }).click();
+    await page.getByTestId("write-letter-btn").click();
 
-    const recipientInput = page.locator("#recipient");
+    const recipientInput = page.getByTestId("recipient-input");
     await recipientInput.waitFor({ state: "visible" });
     await recipientInput.fill(recipientName);
 
@@ -178,20 +169,14 @@ test.describe("Letter Drafting (Real Backend)", () => {
     await canvasInput.fill(letterContent);
 
     // Click Seal (open menu, then confirm)
-    await page
+    await page.getByTestId("seal-trigger-btn").click();
-      .getByRole("button", { name: /seal/i })
+    await page.getByTestId("seal-confirm-btn").click();
-      .filter({ visible: true })
-      .click();
-    await page
-      .getByRole("button", { name: /seal/i })
-      .filter({ visible: true })
-      .click();
 
     // Sealed modal should appear — click "Keep it" to go to Drawer
     await expect(page.getByText(/your letter is sealed/i)).toBeVisible({
       timeout: 10000,
     });
-    await page.getByRole("button", { name: /keep it to myself/i }).click();
+    await page.getByTestId("keep-it-btn").click();
 
     // Open "Kept" section - search for the section with id='kept' and click its toggle button
     logger.info(">> [Drawer] Opening Kept section...");
@@ -213,24 +198,9 @@ test.describe("Letter Drafting (Real Backend)", () => {
     await expect(page.getByText(/breaking the seal/i)).toBeHidden({
       timeout: 10000,
     });
-    // Check recipient on the front of the envelope
+    // Flip the envelope and reveal the letter
-    await expect(page.getByText(new RegExp(recipientName, "i"))).toBeVisible();
+    await revealEnvelope(page);
-
+    await expect(page.getByTestId("envelope-letter")).toBeHidden({ timeout: 20000 });
-    // Flip the envelope to the back
-    await page.getByText(new RegExp(recipientName, "i")).click();
-    // Wait for flip transition (2s)
-    await page.waitForTimeout(2500);
-
-    // Reveal the letter: click seal then click letter
-    await page.getByAltText("Seal").click();
-    // Wait for flap transition
-    await page.waitForTimeout(1500);
-
-    // Click the letter to pull it out
-    await page.locator("#letter").click({ position: { x: 30, y: 15 } });
-
-    // Wait for reveal transition
-    await expect(page.locator("#letter")).toBeHidden({ timeout: 20000 });
 
     // Also check if we are redirected to the Reader if we manually go to the Editor URL
     const readerUrl = page.url();

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.getByTestId("pen-name-input").fill(fullName);
-  await page.getByLabel("Email", { exact: true }).fill(email);
+  await page.getByTestId("email-input").fill(email);
-  await page.getByLabel("Password", { exact: true }).fill(password);
+  await page.getByTestId("password-input").fill(password);
-  await page.getByLabel(/confirm password/i).fill(password);
+  await page.getByTestId("confirm-password-input").fill(password);
-  await page.getByRole("button", { name: /^register$/i }).click();
+  await page.getByTestId("register-submit-btn").click();
 
   await expect(page).toHaveURL(/\/verify-email/);
 
@@ -38,50 +39,22 @@ 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 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 page.getByTestId("welcome-dismiss-btn").click();
-  await welcomeButton.waitFor({ state: "visible", timeout: 10000 });
+  await expect(page.getByTestId("welcome-dismiss-btn")).toBeHidden();
-  await welcomeButton.click();
-  await expect(welcomeButton).toBeHidden();
 
-  await page.getByLabel("Email", { exact: true }).fill(email);
+  await page.getByTestId("email-input").fill(email);
-  await page.getByLabel("Password", { exact: true }).fill(password);
+  await page.getByTestId("password-input").fill(password);
-  await page.getByRole("button", { name: /sign in/i }).click();
+  await page.getByTestId("login-submit-btn").click();
 
   await expect(page).toHaveURL(/\/drawer/);
   await handleWelcomeLetter(page);
   logger.info(`[Auth] Successfully authenticated ${email}`);
 }
 
-/**
+export const AuthHelper = { registerAndLogin };
- * 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 };

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();
+}

frontend/src/components/drawer/WelcomeLetterOverlay.tsx

@@ -1,11 +1,11 @@
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, motion } from "motion/react";
 import { useEffect, useRef, useState } from "react";
 import { getWelcomeLetterContent } from "../../config/welcomeLetter";
 import { formatDate } from "../../utils/dateFormat";
 import { type CanvasTools, ComposeCanvas } from "../editor/ComposeCanvas";
 import { EnvelopeReveal } from "../reader/EnvelopeReveal";
 
-interface WelcomeLetterOverlayProps {
+export interface WelcomeLetterOverlayProps {
     onComplete: () => void;
     userName: string;
 }
@@ -64,6 +64,7 @@ export function WelcomeLetterOverlay({
                     <div className="flex justify-center mt-12">
                         <button
                             type="button"
+                            data-testid="dismiss-welcome-letter-btn"
                             onClick={onComplete}
                             className="btn btn-accent opacity-80 px-12 shadow-lg"
                         >

frontend/src/components/editor/PostSealModal.tsx

@@ -53,6 +53,7 @@ export function PostSealModal({
           <>
             <button
               type="button"
+              data-testid="keep-it-btn"
               className="btn btn-ghost btn-sm"
               onClick={() => navigate(ROUTES.DRAWER)}
             >
@@ -60,6 +61,7 @@ export function PostSealModal({
             </button>
             <button
               type="button"
+              data-testid="view-letter-btn"
               className="btn btn-primary btn-sm"
               onClick={() => navigate(PATHS.read(sealedTargetId!))}
             >

frontend/src/components/editor/ToolBar.tsx

@@ -140,6 +140,7 @@ export function ToolBar({
       <div className="flex items-center gap-2">
         <button
           type="button"
+          data-testid="draft-btn"
           className="btn btn-ghost btn-sm text-xxs group tracking-widester uppercase font-bold text-base-content/60 hover:text-base-content"
           title="Store in your private drawer"
           onClick={() => onSave("DRAFT")}
@@ -155,6 +156,7 @@ export function ToolBar({
         {/*Seal */}
         <button
           type="button"
+          data-testid="seal-trigger-btn"
           className={`btn btn-primary btn-sm rounded-full px-6 group ${sealBtnClicked ? "invisible" : "visible"}`}
           onClick={() => setSealBtnClicked(true)}
         >
@@ -176,6 +178,7 @@ export function ToolBar({
       >
         <button
           type="button"
+          data-testid="seal-confirm-btn"
           className="btn btn-accent btn-sm rounded-full px-6 group"
           onClick={() => onSave("SEALED")}
         >

frontend/src/components/login/WelcomeModal.tsx

@@ -65,6 +65,7 @@ export default function WelcomeModal({
           <div className="modal-action w-full">
             <button
               type="button"
+              data-testid="welcome-dismiss-btn"
               onClick={() => setShowWelcome(false)}
               className="btn btn-primary w-full shadow-lg"
             >

frontend/src/components/reader/EnvelopeReveal.tsx

@@ -80,6 +80,7 @@ export function EnvelopeReveal({
             />
           </div>
           <img
+            data-testid="wax-seal"
             className={
               "translate-y-24 delay-2000 absolute z-6 peer-has-checked:pointer-events-none peer-has-checked:opacity-0 peer-has-checked:delay-0 transition-opacity duration-1000 cursor-pointer"
             }
@@ -91,6 +92,7 @@ export function EnvelopeReveal({
           <button
             type="button"
             id="letter"
+            data-testid="envelope-letter"
             className={`absolute mx-auto transition-all peer-has-checked:delay-800 peer-has-checked:duration-1000 duration-1000 mt-2 h-55 w-105 bg-paper peer-has-checked:-mt-12 hover:-mt-24 cursor-pointer ${revealLetter ? "duration-1000 peer-has-checked:duration-3000 w-screen max-w-4xl h-screen z-101 -translate-y-90" : "peer-has-checked:z-1"}`}
             onClick={handleClick}
           ></button>
@@ -112,6 +114,7 @@ export function EnvelopeReveal({
 
         <button
           id="env-front"
+          data-testid="envelope-front"
           type="button"
           disabled={!isInteractive}
           className={`text-left p-10 absolute inset-0 backface-hidden w-110 bg-base-200 z-99 rounded-md -translate-x-2 ${isFlipped ? "pointer-events-none" : ""}`}

frontend/src/components/ui/FormField.tsx

@@ -7,6 +7,7 @@ interface FormFieldProps {
   registration: UseFormRegisterReturn;
   error?: string;
   handleFocus?: () => void;
+  "data-testid"?: string;
 }
 
 export default function FormField({
@@ -16,6 +17,7 @@ export default function FormField({
   registration,
   error,
   handleFocus,
+  "data-testid": testId,
 }: FormFieldProps) {
   return (
     <div className="form-control">
@@ -28,6 +30,7 @@ export default function FormField({
       <input
         {...registration}
         id={registration.name}
+        data-testid={testId}
         type={type}
         placeholder={placeholder}
         className={`input input-bordered focus:input-primary ${

frontend/src/pages/Activate.tsx

@@ -63,6 +63,7 @@ export default function Activate() {
           <div className="divider opacity-10 my-0"></div>
           <button
             type="button"
+            data-testid="start-writing-btn"
             className="btn btn-primary w-full shadow-lg"
             onClick={() =>
               navigate(ROUTES.LOGIN, {

frontend/src/pages/Drawer.test.tsx

@@ -2,13 +2,14 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { mockUser } from "../../test/fixtures/user.fixture";
+import type { WelcomeLetterOverlayProps } from "../components/drawer/WelcomeLetterOverlay";
 import { useLetters } from "../hooks/useLetters";
 import { useAuthStore } from "../store/useAuthStore";
 import Drawer from "./Drawer";
 
 vi.mock("../hooks/useLetters");
 vi.mock("../components/drawer/WelcomeLetterOverlay", () => ({
-  WelcomeLetterOverlay: ({ onComplete }: any) => (
+    WelcomeLetterOverlay: ({ onComplete }: WelcomeLetterOverlayProps) => (
         <div data-testid="welcome-letter-overlay">
             <button
                 type="button"

frontend/src/pages/Drawer.tsx

@@ -159,6 +159,7 @@ export default function Drawer() {
       <button
         type="button"
         id="write-letter-btn"
+        data-testid="write-letter-btn"
         className="group mt-15 z-10 bg-transparent border border-dashed border-base-content/10 px-8 py-4 text-base-content/40 italic cursor-pointer transition-all hover:border-primary/40 hover:text-base-content/60 hover:bg-primary/5 hover:-translate-y-0.5 flex items-center gap-2 focus-visible:ring-2 focus-visible:ring-primary/50 duration-500"
         onClick={() => navigate(PATHS.write(""))}
       >

frontend/src/pages/Editor.tsx

@@ -459,6 +459,7 @@ export default function Editor() {
               </label>
               <input
                 id="recipient"
+                data-testid="recipient-input"
                 type="text"
                 placeholder={toPlaceholderList[placeholderIndex]}
                 value={recipient}

frontend/src/pages/Login.tsx

@@ -97,6 +97,7 @@ export default function Login() {
             label="Email"
             type="email"
             placeholder="f.kafka@wrongtrain.com"
+            data-testid="email-input"
             registration={register("email")}
             error={errors.email?.message}
             handleFocus={() => setSaajanMessage("I remember you.")}
@@ -106,6 +107,7 @@ export default function Login() {
             label="Password"
             type="password"
             placeholder="••••••••"
+            data-testid="password-input"
             registration={register("password")}
             error={errors.password?.message}
             handleFocus={() =>
@@ -119,6 +121,7 @@ export default function Login() {
               name="login"
               disabled={isLoading}
               aria-label="Sign In"
+              data-testid="login-submit-btn"
               className="btn btn-primary w-full shadow-lg"
             >
               {isLoading ? (

frontend/src/pages/Reader.tsx

@@ -306,6 +306,7 @@ export default function Reader() {
         <div className="flex justify-center gap-2 mt-8 z-10 relative">
           <button
             id="share-letter-btn"
+            data-testid="share-letter-btn"
             type="button"
             className="btn btn-ghost btn-sm text-base-content/30 hover:text-base-content hover:bg-base-content/10 gap-1.5"
             onClick={handleShare}
@@ -317,6 +318,7 @@ export default function Reader() {
           </button>
           <button
             id="burn-letter-btn"
+            data-testid="burn-letter-btn"
             type="button"
             className="btn btn-ghost btn-sm text-error/40 hover:text-error hover:bg-error/10 gap-1.5"
             onClick={() => setShowBurnModal(true)}

frontend/src/pages/Register.tsx

@@ -89,6 +89,7 @@ export default function Register() {
                     <FormField
                         label="Pen Name"
                         placeholder="Word Smith"
+                        data-testid="pen-name-input"
                         registration={register("full_name")}
                         error={errors.full_name?.message}
                         handleFocus={() =>
@@ -100,6 +101,7 @@ export default function Register() {
                         label="Email"
                         type="email"
                         placeholder="f.kafka@wrongtrain.com"
+                        data-testid="email-input"
                         registration={register("email")}
                         error={errors.email?.message}
                         handleFocus={() =>
@@ -113,6 +115,7 @@ export default function Register() {
                         label="Password"
                         type="password"
                         placeholder="••••••••"
+                        data-testid="password-input"
                         registration={register("password")}
                         error={errors.password?.message}
                         handleFocus={() =>
@@ -126,6 +129,7 @@ export default function Register() {
                         label="Confirm Password"
                         type="password"
                         placeholder="••••••••"
+                        data-testid="confirm-password-input"
                         registration={register("confirm_password")}
                         error={errors.confirm_password?.message}
                         handleFocus={() =>
@@ -150,6 +154,7 @@ export default function Register() {
                             type="submit"
                             disabled={isLoading}
                             aria-label="Register"
+                            data-testid="register-submit-btn"
                             className="btn btn-primary w-full shadow-lg"
                         >
                             {isLoading ? (