test: replace role texts by testids

frontend/src/components/drawer/PasskeyModal.tsx

@@ -41,10 +41,15 @@ export function PasskeyModal() {
             required
             type="password"
             placeholder="password"
+            data-testid="passkey-input"
             className="font-sans validator input input-bordered rounded-r-none"
           />
           <div className="validator-message text-xs text-error"></div>
-          <button type="submit" className="btn btn-primary rounded-l-none">
+          <button
+            type="submit"
+            data-testid="passkey-submit-btn"
+            className="btn btn-primary rounded-l-none"
+          >
             Unlock
           </button>
         </form>

frontend/src/components/editor/ToolBar.tsx

@@ -194,6 +194,7 @@ export function ToolBar({
         </div>
         <button
           type="button"
+          data-testid="vault-trigger-btn"
           className="btn btn-neutral btn-sm rounded-full px-6 group"
           onClick={() => setConfirmModal("VAULT")}
         >
@@ -299,6 +300,7 @@ export function VaultConfirmModal({
         <div className="w-full flex justify-center gap-8 mt-4">
           <button
             type="button"
+            data-testid="vault-cancel-btn"
             className="btn btn-ghost btn-sm mt-4"
             onClick={() => setConfirmModal(null)}
           >
@@ -307,6 +309,7 @@ export function VaultConfirmModal({
           <button
             className="btn btn-primary btn-sm mt-4"
             type="submit"
+            data-testid="vault-confirm-btn"
             form="vault-form"
           >
             Take it

frontend/src/components/ui/FormField.tsx

@@ -33,7 +33,8 @@ export default function FormField({
         data-testid={testId}
         type={type}
         placeholder={placeholder}
-                className={`input input-bordered focus:input-primary ${error ? "input-error" : ""
+        className={`input input-bordered focus:input-primary ${
+          error ? "input-error" : ""
         }`}
         onFocus={handleFocus}
       />

frontend/src/pages/Drawer.test.tsx

@@ -94,7 +94,7 @@ describe("Drawer Page", () => {
     );
 
     expect(screen.getByTestId("passkey-modal-title")).toBeInTheDocument();
-    expect(screen.getByPlaceholderText(/password/i)).toBeInTheDocument();
+    expect(screen.getByTestId("passkey-input")).toBeInTheDocument();
   });
 
   it("renders the welcome letter when firstTime state is present", () => {

frontend/src/pages/Editor.test.tsx

@@ -97,25 +97,22 @@ describe("Editor Page", () => {
     fireEvent.click(sealBtn);
 
     // Click Vault to show confirm modal
-    const vaultBtn = screen.getByRole("button", { name: /vault/i });
+    const vaultBtn = screen.getByTestId("vault-trigger-btn");
     fireEvent.click(vaultBtn);
 
     // Set date and submit vault form
-    const dateInput = container.querySelector('input[name="vault-date"]');
+    const dateInput = document.body.querySelector('input[name="vault-date"]');
     if (!dateInput) throw new Error("Date input not found");
     fireEvent.change(dateInput, { target: { value: "2026-12-31" } });
 
-    const confirmVaultBtn = container.querySelector(
-      'button[form="vault-form"]',
-    );
-    if (!confirmVaultBtn) throw new Error("Confirm vault button not found");
+    const confirmVaultBtn = screen.getByTestId("vault-confirm-btn");
     fireEvent.click(confirmVaultBtn);
 
     // Wait for save to complete and check readOnly
     expect(await screen.findByTestId("save-success-toast")).toBeInTheDocument();
 
     expect(canvas.getAttribute("data-readonly")).toBe("true");
-    expect(screen.getByLabelText(/recipient/i)).toBeDisabled();
+    expect(screen.getByTestId("recipient-input")).toBeDisabled();
   });
 
   it("should set canvas to readOnly when status is SEALED", async () => {
@@ -135,7 +132,7 @@ describe("Editor Page", () => {
       }),
     );
 
-    const { container } = render(
+    render(
       <MemoryRouter initialEntries={["/write/test-id"]}>
         <Routes>
           <Route path="/write/:public_id" element={<Editor />} />
@@ -149,19 +146,17 @@ describe("Editor Page", () => {
 
     const canvas = screen.getByTestId("canvas");
 
-    const toolbar = container.querySelector("#writer-toolbar");
-    const sealBtn = toolbar?.querySelector(".btn-primary");
-    if (!sealBtn) throw new Error("Seal button not found");
+    const sealBtn = screen.getByTestId("seal-trigger-btn");
     fireEvent.click(sealBtn);
 
     // The secondary seal button appears (it has btn-accent class)
-    const secondarySealBtn = container.querySelector(".btn-accent");
+    const secondarySealBtn = screen.getByTestId("seal-confirm-btn");
     if (!secondarySealBtn) throw new Error("Secondary seal button not found");
     fireEvent.click(secondarySealBtn);
 
     expect(await screen.findByTestId("save-success-toast")).toBeInTheDocument();
 
     expect(canvas.getAttribute("data-readonly")).toBe("true");
-    expect(screen.getByLabelText(/recipient/i)).toBeDisabled();
+    expect(screen.getByTestId("recipient-input")).toBeDisabled();
   });
 });

frontend/src/pages/Login.test.tsx

@@ -27,9 +27,9 @@ describe("Login Page", () => {
       </MemoryRouter>,
     );
 
-    await userEvent.type(screen.getByLabelText(/email/i), "test@example.com");
-    await userEvent.type(screen.getByLabelText(/password/i), "password123");
-    await userEvent.click(screen.getByRole("button", { name: /sign in/i }));
+    await userEvent.type(screen.getByTestId("email-input"), "test@example.com");
+    await userEvent.type(screen.getByTestId("password-input"), "password123");
+    await userEvent.click(screen.getByTestId("login-submit-btn"));
 
     expect(await screen.findByTestId("login-error-message")).toHaveTextContent(
       /technical issues/i,
@@ -87,9 +87,9 @@ describe("Login Page", () => {
       </MemoryRouter>,
     );
 
-    await userEvent.type(screen.getByLabelText(/email/i), "test@example.com");
-    await userEvent.type(screen.getByLabelText(/password/i), "password123");
-    await userEvent.click(screen.getByRole("button", { name: /sign in/i }));
+    await userEvent.type(screen.getByTestId("email-input"), "test@example.com");
+    await userEvent.type(screen.getByTestId("password-input"), "password123");
+    await userEvent.click(screen.getByTestId("login-submit-btn"));
 
     const expectedTestId =
       nextRoute.toLowerCase() === "drawer" ? "drawer-page" : "reader-page";

frontend/src/pages/Login.tsx

@@ -140,7 +140,8 @@ export default function Login() {
               className="link link-primary"
             >
               Start here
-                        </button>.
+            </button>
+            .
           </div>
         </form>
       </div>

frontend/src/pages/Register.tsx

@@ -174,7 +174,8 @@ export default function Register() {
               className="link link-primary"
             >
               Continue where you left off
-                        </button>.
+            </button>
+            .
           </div>
         </form>
       </div>