refactor: standardize test IDs in E2E testing

frontend/e2e/letter.spec.ts

@@ -27,16 +27,15 @@ test.describe("Letter Drafting (Real Backend)", () => {
 
     logger.info(`>> [Draft] Current URL after click: ${page.url()}`);
 
-    // Wait for the recipient input to be present in the DOM
+    // Editor page
+    await expect(page.getByTestId("recipient-input")).toBeVisible();
     const recipientInput = page.getByTestId("recipient-input");
-    await recipientInput.waitFor({ state: "visible", timeout: 20000 });
 
     const recipientName = "Dear Friend";
     await recipientInput.fill(recipientName);
 
     // Initial load: verify textarea value (populated by Fabric when focused)
     const canvasInput = page.locator("textarea");
-    await canvasInput.waitFor({ state: "attached" });
     await canvasInput.focus();
     await expect(canvasInput).toHaveValue(/Take a deep breath/i);
 
@@ -50,7 +49,7 @@ test.describe("Letter Drafting (Real Backend)", () => {
     await page.getByTestId("draft-btn").click();
 
     // Verify Success Modal/Alert
-    await expect(page.getByText(/your letter is saved/i)).toBeVisible();
+    await expect(page.getByTestId("save-success-toast")).toBeVisible();
 
     // Verify URL updated with a UUID
     await expect(page).toHaveURL(/\/quill\/[0-9a-f-]{36}/);
@@ -62,13 +61,7 @@ test.describe("Letter Drafting (Real Backend)", () => {
     await page.goto(savedUrl);
 
     // Wait for initial load overlay to appear and then definitely disappear
-    await page
+    await expect(page.getByTestId("opening-draft-overlay")).toBeHidden();
-      .getByText(/opening your draft/i)
-      .waitFor({ state: "visible", timeout: 2000 })
-      .catch(() => {});
-    await expect(page.getByText(/opening your draft/i)).toBeHidden({
-      timeout: 10000,
-    });
 
     // Check recipient
     await expect(page.getByTestId("recipient-input")).toHaveValue(recipientName);
@@ -77,9 +70,7 @@ test.describe("Letter Drafting (Real Backend)", () => {
     // We wait for the content to appear in the textarea.
     // toHaveValue will poll until it matches or timeouts.
     await canvasInput.focus();
-    await expect(canvasInput).toHaveValue(/This is a secret draft/i, {
+    await expect(canvasInput).toHaveValue(/This is a secret draft/i);
-      timeout: 10000,
-    });
     await expect(canvasInput).toHaveValue(/It should persist/i);
   });
 
@@ -96,7 +87,6 @@ test.describe("Letter Drafting (Real Backend)", () => {
     await page.getByTestId("write-letter-btn").click();
 
     const recipientInput = page.getByTestId("recipient-input");
-    await recipientInput.waitFor({ state: "visible", timeout: 10000 });
     await recipientInput.fill("A Secret Guest");
 
     const canvasInput = page.locator("textarea");
@@ -110,40 +100,36 @@ test.describe("Letter Drafting (Real Backend)", () => {
 
     // Should show sealed confirmation modal
     logger.info(">> [Seal] Verifying sealed modal...");
-    await expect(page.getByText(/your letter is sealed/i)).toBeVisible({
+    await expect(page.getByTestId("post-seal-modal")).toBeVisible();
-      timeout: 10000,
-    });
 
     // Navigate to Reader via "View letter"
     await page.getByTestId("view-letter-btn").click();
 
     // Should be on Reader URL
-    await expect(page).toHaveURL(/\/read\/[a-f0-9-]{36}$/, { timeout: 15000 });
+    await expect(page).toHaveURL(/\/read\/[a-f0-9-]{36}$/);
 
     // Open the envelope to reveal the letter
-    await expect(page.getByText(/breaking the seal/i)).toBeHidden({
+    await expect(page.getByTestId("decryption-overlay")).toBeHidden();
-      timeout: 10000,
-    });
     // Flip the envelope to show the seal and reveal the letter
     await revealEnvelope(page);
-    await expect(page.getByTestId("envelope-letter")).toBeHidden({ timeout: 20000 });
+    await expect(page.getByTestId("envelope-letter")).toBeHidden();
 
     // Share on demand
     logger.info(">> [Seal] Clicking Share button in Reader...");
     await page.getByTestId("share-letter-btn").click();
 
     // Verify share modal with a valid link
-    await expect(page.getByText(/send this letter/i)).toBeVisible();
+    await expect(page.getByTestId("share-letter-modal")).toBeVisible();
     const linkInput = page.locator("#share-link-input");
     const linkValue = await linkInput.inputValue();
     expect(linkValue).toContain("/read/");
     expect(linkValue).toContain("#");
     logger.info(`>> [Seal] Sharing link: ${linkValue}`);
 
-    await expect(page.getByRole("button", { name: /copy/i })).toBeVisible();
+    await expect(page.getByTestId("copy-link-btn")).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 page.getByTestId("modal-close-btn").click();
-    await expect(page.getByText(/send this letter/i)).toBeHidden();
+    await expect(page.getByTestId("share-letter-modal")).toBeHidden();
   });
 
   test("should allow author to access sealed letter from drawer without sharing key", async ({
@@ -161,7 +147,6 @@ test.describe("Letter Drafting (Real Backend)", () => {
     await page.getByTestId("write-letter-btn").click();
 
     const recipientInput = page.getByTestId("recipient-input");
-    await recipientInput.waitFor({ state: "visible" });
     await recipientInput.fill(recipientName);
 
     const canvasInput = page.locator("textarea");
@@ -173,34 +158,30 @@ test.describe("Letter Drafting (Real Backend)", () => {
     await page.getByTestId("seal-confirm-btn").click();
 
     // Sealed modal should appear — click "Keep it" to go to Drawer
-    await expect(page.getByText(/your letter is sealed/i)).toBeVisible({
+    await expect(page.getByTestId("post-seal-modal")).toBeVisible();
-      timeout: 10000,
-    });
     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...");
-    const keptSection = page.locator("#kept");
+    await page.getByTestId("drawer-section-kept").click();
-    await keptSection.getByRole("button", { name: /kept/i }).click();
 
     // Find the sealed letter in the drawer by recipient name and click it
     logger.info(">> [Drawer] Clicking sealed letter in drawer...");
     const sealedItem = page
-      .getByRole("button", { name: new RegExp(recipientName, "i") })
+      .getByTestId(/^letter-item-/)
+      .filter({ hasText: recipientName })
       .first();
     await sealedItem.click();
 
     // Verify it opens the Reader without a hash
     logger.info(">> [Drawer] Verifying Reader page...");
     // Give it a bit more time for decryption
-    await expect(page).toHaveURL(/\/read\/[a-f0-9-]{36}$/, { timeout: 15000 });
+    await expect(page).toHaveURL(/\/read\/[a-f0-9-]{36}$/);
     // Reveal and check decrypted content in Reader
-    await expect(page.getByText(/breaking the seal/i)).toBeHidden({
+    await expect(page.getByTestId("decryption-overlay")).toBeHidden();
-      timeout: 10000,
-    });
     // Flip the envelope and reveal the letter
     await revealEnvelope(page);
-    await expect(page.getByTestId("envelope-letter")).toBeHidden({ timeout: 20000 });
+    await expect(page.getByTestId("envelope-letter")).toBeHidden();
 
     // 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

@@ -38,7 +38,7 @@ async function registerAndLogin(
 
   await page.goto(activationLink);
 
-  await expect(page.getByText(/account activated/i)).toBeVisible();
+  await expect(page.getByTestId("activation-success-header")).toBeVisible();
   await page.getByTestId("start-writing-btn").click();
 
   // Dismiss the Welcom Modal and Perform Login

frontend/src/components/drawer/DrawerSection.tsx

@@ -35,6 +35,7 @@ export function DrawerSection({
       <button
         type="button"
         onClick={onClick}
+        data-testid={`drawer-section-${id}`}
         className={`w-full p-[24px_28px] cursor-pointer flex items-center gap-5 transition-all duration-2000 ease-in-out outline-none focus-visible:ring-2 focus-visible:ring-primary/50 border border-base-content/10 text-left bg-linear-to-r from-transparent to-base-100/40`}
       >
         <div className="flex-1">

frontend/src/components/drawer/LetterItem.tsx

@@ -33,6 +33,7 @@ export function LetterItem({
     <button
       type="button"
       onClick={handleNavigate}
+      data-testid={`letter-item-${id}`}
       className={`${isLocked ? "pointer-events-none" : ""} p-4 border-base-content/3 flex items-start gap-4 hover:bg-base-300 transition-all delay-75 duration-100 group text-left cursor-pointer w-9/12 mx-auto hover:scale-120 hover:h-24 hover:-translate-y-3 hover:pb-4 hover:border-x-5 hover:border-t-5 border-t-2 hover:-mb-2`}
     >
       <div className="text-[0.85rem] italic text-base-content/40 flex-1 truncate group-hover:text-base-content/60 transition-none animate-[opacity_200ms_linear_forwards]">

frontend/src/components/editor/PostSealModal.tsx

@@ -15,7 +15,7 @@ export function PostSealModal({
   type = "KEPT",
 }: PostSealModalProps) {
   return (
-    <Modal isOpen={!!sealedTargetId}>
+    <Modal isOpen={!!sealedTargetId} data-testid="post-seal-modal">
       <LockIcon size={32} weight="duotone" className="text-primary mt-3" />
       <h3 className="font-serif text-2xl">Your letter is sealed</h3>
       <p className="text-base-content/60">

frontend/src/components/reader/ShareModal.tsx

@@ -14,7 +14,11 @@ export function ShareModal({ shareLink, setShareLink }: ShareModalProps) {
   };
   return (
     <>
-      <Modal isOpen={!!shareLink} onClose={() => setShareLink(null)}>
+      <Modal
+        isOpen={!!shareLink}
+        onClose={() => setShareLink(null)}
+        data-testid="share-letter-modal"
+      >
         <div className="flex flex-col items-center justify-center text-center gap-6 py-4">
           <div className="space-y-2">
             <PaperPlaneTiltIcon
@@ -47,6 +51,7 @@ export function ShareModal({ shareLink, setShareLink }: ShareModalProps) {
             <button
               type="button"
               onClick={copyToClipboard}
+              data-testid="copy-link-btn"
               className="btn btn-primary font-sans btn-sm rounded-tl-xl rounded-bl-xl rounded-tr-full rounded-br-full"
             >
               Copy

frontend/src/components/ui/Modal.tsx

@@ -5,17 +5,27 @@ interface ModalProps {
   isOpen: boolean;
   onClose?: () => void;
   children: ReactNode;
+  "data-testid"?: string;
 }
 
-export function Modal({ isOpen, onClose, children }: ModalProps) {
+export function Modal({
+  isOpen,
+  onClose,
+  children,
+  "data-testid": testId,
+}: ModalProps) {
   if (!isOpen) return null;
 
   return (
-    <div className="modal modal-open modal-middle backdrop-blur-md before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-10 before:pointer-events-none before:bg-[url('assets/noise.gif')]">
+    <div
+      data-testid={testId}
+      className="modal modal-open modal-middle backdrop-blur-md before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-10 before:pointer-events-none before:bg-[url('assets/noise.gif')]"
+    >
       <div className="modal-box relative bg-base-100/60 flex flex-col items-center text-center gap-6">
         {onClose && (
           <button
             type="button"
+            data-testid="modal-close-btn"
             className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2 z-20"
             onClick={onClose}
             aria-label="Close"

frontend/src/pages/Activate.tsx

@@ -7,96 +7,96 @@ import { endpoints, replacePathParams } from "../config/endpoints";
 import { ROUTES } from "../config/routes";
 
 export default function Activate() {
-  const { uidb64, token } = useParams();
+    const { uidb64, token } = useParams();
-  const [status, setStatus] = useState<"loading" | "success" | "error">(
+    const [status, setStatus] = useState<"loading" | "success" | "error">(
-    "loading",
+        "loading",
-  );
+    );
-  const hasCalled = useRef(false);
+    const hasCalled = useRef(false);
-  const navigate = useNavigate();
+    const navigate = useNavigate();
 
-  useEffect(() => {
+    useEffect(() => {
-    if (!(uidb64 && token) || hasCalled.current) return;
+        if (!(uidb64 && token) || hasCalled.current) return;
-    hasCalled.current = true;
+        hasCalled.current = true;
 
-    const activateAccount = async () => {
+        const activateAccount = async () => {
-      try {
+            try {
-        const url = replacePathParams(endpoints.ACTIVATE, {
+                const url = replacePathParams(endpoints.ACTIVATE, {
-          uidb64,
+                    uidb64,
-          token,
+                    token,
-        });
+                });
-        await publicApi.get(url);
+                await publicApi.get(url);
-        setStatus("success");
+                setStatus("success");
-      } catch (_err) {
+            } catch (_err) {
-        setStatus("error");
+                setStatus("error");
-      }
-    };
-
-    activateAccount();
-  }, [uidb64, token]);
-
-  return (
-    <div className="glass-card w-full max-w-sm p-8 text-center fade-zoom">
-      {status === "loading" && (
-        <div className="flex flex-col items-center gap-4 py-8">
-          <span className="loading loading-spinner loading-lg text-primary" />
-          <p className="text-sm opacity-70">Activating your account...</p>
-        </div>
-      )}
-
-      {status === "success" && (
-        <div className="flex flex-col items-center gap-6 duration-500">
-          <div className="bg-success/10 p-4 rounded-full">
-            <CheckCircleIcon
-              size={64}
-              weight="duotone"
-              className="text-success"
-            />
-          </div>
-          <h2 className="font-display text-xl text-success">
-            Account Activated!
-          </h2>
-          <p className="opacity-70 leading-relaxed">
-            Welcome to <Logo scale={1} />
-            <br />
-            Your identity is now verified and ready for timeless letters.
-          </p>
-          <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, {
-                state: { firstTime: true },
-                replace: true,
-              })
             }
-          >
+        };
-            Start Writing
-          </button>
-        </div>
-      )}
 
-      {status === "error" && (
+        activateAccount();
-        <div className="flex flex-col items-center gap-6 animate-in fade-in zoom-in duration-500">
+    }, [uidb64, token]);
-          <div className="bg-error/10 p-4 rounded-full">
+
-            <XCircleIcon size={64} weight="duotone" className="text-error" />
+    return (
-          </div>
+        <div className="glass-card w-full max-w-sm p-8 text-center fade-zoom">
-          <h2 className="font-display text-xl text-error">Activation Failed</h2>
+            {status === "loading" && (
-          <p className="opacity-70 leading-relaxed">
+                <div className="flex flex-col items-center gap-4 py-8">
-            The link might be expired or already used. Please try registering
+                    <span className="loading loading-spinner loading-lg text-primary" />
-            again.
+                    <p className="text-sm opacity-70">Activating your account...</p>
-          </p>
+                </div>
-          <div className="divider opacity-10 my-0"></div>
+            )}
-          <button
+
-            type="button"
+            {status === "success" && (
-            className="btn btn-ghost w-full"
+                <div className="flex flex-col items-center gap-6 duration-500">
-            onClick={() => navigate(ROUTES.ONBOARD)}
+                    <div className="bg-success/10 p-4 rounded-full">
-          >
+                        <CheckCircleIcon
-            Register Again
+                            size={64}
-          </button>
+                            weight="duotone"
+                            className="text-success"
+                        />
+                    </div>
+                    <h2 data-testid="activation-success-header" className="font-display text-xl text-success">
+                        You're in.
+                    </h2>
+                    <p className="opacity-70 leading-relaxed">
+                        Welcome to <Logo scale={1} />
+                        <br />
+                        Just one more step and you can start writing timeless letters.
+                    </p>
+                    <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, {
+                                state: { firstTime: true },
+                                replace: true,
+                            })
+                        }
+                    >
+                        I'm ready
+                    </button>
+                </div>
+            )}
+
+            {status === "error" && (
+                <div className="flex flex-col items-center gap-6 animate-in fade-in zoom-in duration-500">
+                    <div className="bg-error/10 p-4 rounded-full">
+                        <XCircleIcon size={64} weight="duotone" className="text-error" />
+                    </div>
+                    <h2 className="font-display text-xl text-error">Activation Failed</h2>
+                    <p className="opacity-70 leading-relaxed">
+                        The link might be expired or already used. Please try registering
+                        again.
+                    </p>
+                    <div className="divider opacity-10 my-0"></div>
+                    <button
+                        type="button"
+                        className="btn btn-ghost w-full"
+                        onClick={() => navigate(ROUTES.ONBOARD)}
+                    >
+                        Register Again
+                    </button>
+                </div>
+            )}
         </div>
-      )}
+    );
-    </div>
-  );
 }

frontend/src/pages/Editor.tsx

@@ -376,7 +376,10 @@ export default function Editor() {
                 weight="bold"
                 className="animate-spin text-primary"
               />
-              <p className="text-xxs uppercase tracking-widester font-bold text-base-content/40">
+              <p
+                data-testid="opening-draft-overlay"
+                className="text-xxs uppercase tracking-widester font-bold text-base-content/40"
+              >
                 Opening your draft...
               </p>
             </div>
@@ -406,6 +409,7 @@ export default function Editor() {
             {saveOverlay === "SAVED" && (
               <div
                 role="alert"
+                data-testid="save-success-toast"
                 className={`alert alert-success shadow-lg transition-all ease-in-out duration-2000 ${
                   showSaveOverlay
                     ? "opacity-100 scale-100 translate-y-0"

frontend/src/pages/Reader.tsx

@@ -217,7 +217,10 @@ export default function Reader() {
           <Logo />
           <div className="flex flex-col items-center gap-2">
             <span className="loading loading-ring loading-md text-primary/40"></span>
-            <p className="text-xs uppercase tracking-widest text-base-content/20 animate-pulse">
+            <p
+              data-testid="decryption-overlay"
+              className="text-xs uppercase tracking-widest text-base-content/20 animate-pulse"
+            >
               Breaking the seal...
             </p>
           </div>