diff --git a/.gitignore b/.gitignore
index 2bac87140..faca41e70 100644
--- a/.gitignore
+++ b/.gitignore
@@ -195,3 +195,4 @@ localhost+*.pem
 # Claude Code runtime state — local only, never commit
 .claude/scheduled_tasks.lock
 .claude/scheduled_tasks.json
+.lens/
diff --git a/examples/lens-fixture/cms.config.ts b/examples/lens-fixture/cms.config.ts
new file mode 100644
index 000000000..a43eb7ee5
--- /dev/null
+++ b/examples/lens-fixture/cms.config.ts
@@ -0,0 +1,35 @@
+import { defineConfig, defineCollection } from "@webhouse/cms";
+
+/**
+ * Lens fixture site — a deterministic local-only tenant used by the Lens
+ * visual-regression manifest (lens.manifest.json) so admin surfaces have
+ * stable, predictable content to render and capture. Registered locally as
+ * site slug `lens-fixture-site` (org `lens`). Not a real customer site.
+ */
+export default defineConfig({
+  collections: [
+    defineCollection({
+      name: "posts",
+      label: "Posts",
+      fields: [
+        { name: "title", type: "text", label: "Title", required: true },
+        { name: "excerpt", type: "textarea", label: "Excerpt" },
+        { name: "content", type: "richtext", label: "Content" },
+        { name: "date", type: "date", label: "Publish Date" },
+      ],
+    }),
+    defineCollection({
+      name: "pages",
+      label: "Pages",
+      urlPrefix: "/",
+      fields: [
+        { name: "title", type: "text", label: "Title", required: true },
+        { name: "content", type: "richtext", label: "Content" },
+      ],
+    }),
+  ],
+  storage: {
+    adapter: "filesystem",
+    filesystem: { contentDir: "content" },
+  },
+});
diff --git a/examples/lens-fixture/content/posts/second-post.json b/examples/lens-fixture/content/posts/second-post.json
new file mode 100644
index 000000000..d8fa674a6
--- /dev/null
+++ b/examples/lens-fixture/content/posts/second-post.json
@@ -0,0 +1,12 @@
+{
+  "slug": "second-post",
+  "status": "draft",
+  "data": {
+    "title": "A Second Fixture Post",
+    "excerpt": "A draft post so the content list shows mixed statuses.",
+    "content": "A second deterministic post, kept as a draft so the collection list renders both a published and a draft row.",
+    "date": "2026-01-02"
+  },
+  "id": "lens-fixture-post-second",
+  "_fieldMeta": {}
+}
diff --git a/examples/lens-fixture/content/posts/welcome.json b/examples/lens-fixture/content/posts/welcome.json
new file mode 100644
index 000000000..eb5ad3405
--- /dev/null
+++ b/examples/lens-fixture/content/posts/welcome.json
@@ -0,0 +1,12 @@
+{
+  "slug": "welcome",
+  "status": "published",
+  "data": {
+    "title": "Welcome to the Lens Fixture",
+    "excerpt": "A deterministic post used by Lens visual-regression baselines.",
+    "content": "This is fixture content for the Lens visual-regression suite. It never changes, so admin surfaces render predictably for stable screenshots.\n\n## Section one\n\nDeterministic body text for the content surface.",
+    "date": "2026-01-01"
+  },
+  "id": "lens-fixture-post-welcome",
+  "_fieldMeta": {}
+}
diff --git a/lens.manifest.json b/lens.manifest.json
new file mode 100644
index 000000000..8035278e9
--- /dev/null
+++ b/lens.manifest.json
@@ -0,0 +1,213 @@
+{
+  "project": "cms",
+  "base_url": "https://localhost:3010",
+  "diff_threshold": 0.01,
+  "auth": {
+    "adapter": "storageState",
+    "statePath": "./.lens/storage-state.json"
+  },
+  "surfaces": [
+    {
+      "name": "admin-login",
+      "path": "/admin/login",
+      "mode": "element",
+      "selector": "[data-testid=\"login-root\"]",
+      "waitFor": "[data-testid=\"login-root\"]",
+      "baseline_key": "admin-login",
+      "auth": null
+    },
+    {
+      "name": "admin-signup",
+      "path": "/admin/signup",
+      "mode": "element",
+      "selector": "[data-testid=\"signup-root\"]",
+      "waitFor": "[data-testid=\"signup-root\"]",
+      "baseline_key": "admin-signup",
+      "auth": null
+    },
+    {
+      "name": "admin-command",
+      "path": "/admin/lens-fixture-site/command",
+      "mode": "element",
+      "selector": "[data-testid=\"command-root\"]",
+      "waitFor": "[data-testid=\"command-root\"]",
+      "baseline_key": "admin-command"
+    },
+    {
+      "name": "admin-dashboard",
+      "path": "/admin/lens-fixture-site",
+      "mode": "element",
+      "selector": "[data-testid=\"dashboard-root\"]",
+      "waitFor": 2500,
+      "no_diff": true
+    },
+    {
+      "name": "admin-content",
+      "path": "/admin/lens-fixture-site/content/posts",
+      "mode": "element",
+      "selector": "[data-testid=\"content-root\"]",
+      "waitFor": 2500,
+      "no_diff": true
+    },
+    {
+      "name": "admin-media",
+      "path": "/admin/lens-fixture-site/media",
+      "mode": "element",
+      "selector": "[data-testid=\"media-root\"]",
+      "waitFor": 2500,
+      "no_diff": true
+    },
+    {
+      "name": "admin-forms",
+      "path": "/admin/lens-fixture-site/forms",
+      "mode": "element",
+      "selector": "[data-testid=\"forms-root\"]",
+      "waitFor": 2500,
+      "no_diff": true
+    },
+    {
+      "name": "admin-interactives",
+      "path": "/admin/lens-fixture-site/interactives",
+      "mode": "element",
+      "selector": "[data-testid=\"interactives-root\"]",
+      "waitFor": 2500,
+      "no_diff": true
+    },
+    {
+      "name": "admin-agents",
+      "path": "/admin/lens-fixture-site/agents",
+      "mode": "element",
+      "selector": "[data-testid=\"agents-root\"]",
+      "waitFor": 2500,
+      "no_diff": true
+    },
+    {
+      "name": "admin-curation",
+      "path": "/admin/lens-fixture-site/curation",
+      "mode": "element",
+      "selector": "[data-testid=\"curation-root\"]",
+      "waitFor": 2500,
+      "no_diff": true
+    },
+    {
+      "name": "admin-log",
+      "path": "/admin/lens-fixture-site/log",
+      "mode": "element",
+      "selector": "[data-testid=\"log-root\"]",
+      "waitFor": 2500,
+      "no_diff": true
+    },
+    {
+      "name": "admin-scheduled",
+      "path": "/admin/lens-fixture-site/scheduled",
+      "mode": "element",
+      "selector": "[data-testid=\"scheduled-root\"]",
+      "waitFor": 2500,
+      "no_diff": true
+    },
+    {
+      "name": "admin-backup",
+      "path": "/admin/lens-fixture-site/backup",
+      "mode": "element",
+      "selector": "[data-testid=\"backup-root\"]",
+      "waitFor": 2500,
+      "no_diff": true
+    },
+    {
+      "name": "admin-trash",
+      "path": "/admin/lens-fixture-site/trash",
+      "mode": "element",
+      "selector": "[data-testid=\"trash-root\"]",
+      "waitFor": 2500,
+      "no_diff": true
+    },
+    {
+      "name": "admin-seo",
+      "path": "/admin/lens-fixture-site/seo",
+      "mode": "element",
+      "selector": "[data-testid=\"seo-root\"]",
+      "waitFor": 2500,
+      "no_diff": true
+    },
+    {
+      "name": "admin-lighthouse",
+      "path": "/admin/lens-fixture-site/lighthouse",
+      "mode": "element",
+      "selector": "[data-testid=\"lighthouse-root\"]",
+      "waitFor": 2500,
+      "no_diff": true
+    },
+    {
+      "name": "admin-link-checker",
+      "path": "/admin/lens-fixture-site/link-checker",
+      "mode": "element",
+      "selector": "[data-testid=\"link-checker-root\"]",
+      "waitFor": 2500,
+      "no_diff": true
+    },
+    {
+      "name": "admin-performance",
+      "path": "/admin/lens-fixture-site/performance",
+      "mode": "element",
+      "selector": "[data-testid=\"performance-root\"]",
+      "waitFor": 2500,
+      "no_diff": true
+    },
+    {
+      "name": "admin-sites",
+      "path": "/admin/lens-fixture-site/sites",
+      "mode": "element",
+      "selector": "[data-testid=\"sites-root\"]",
+      "waitFor": 2500,
+      "no_diff": true
+    },
+    {
+      "name": "admin-organizations",
+      "path": "/admin/lens-fixture-site/organizations",
+      "mode": "element",
+      "selector": "[data-testid=\"organizations-root\"]",
+      "waitFor": 2500,
+      "no_diff": true
+    },
+    {
+      "name": "admin-visibility",
+      "path": "/admin/lens-fixture-site/visibility",
+      "mode": "element",
+      "selector": "[data-testid=\"visibility-root\"]",
+      "waitFor": 2500,
+      "no_diff": true
+    },
+    {
+      "name": "admin-favorites",
+      "path": "/admin/lens-fixture-site/favorites",
+      "mode": "element",
+      "selector": "[data-testid=\"favorites-root\"]",
+      "waitFor": 2500,
+      "no_diff": true
+    },
+    {
+      "name": "admin-preview",
+      "path": "/admin/lens-fixture-site/preview",
+      "mode": "element",
+      "selector": "[data-testid=\"preview-root\"]",
+      "waitFor": 2500,
+      "no_diff": true
+    },
+    {
+      "name": "admin-settings",
+      "path": "/admin/lens-fixture-site/settings",
+      "mode": "element",
+      "selector": "[data-testid=\"settings-root\"]",
+      "waitFor": 2500,
+      "no_diff": true
+    },
+    {
+      "name": "admin-account",
+      "path": "/admin/lens-fixture-site/account",
+      "mode": "element",
+      "selector": "[data-testid=\"account-root\"]",
+      "waitFor": 2500,
+      "no_diff": true
+    }
+  ]
+}
diff --git a/packages/cms-admin/public/home.html b/packages/cms-admin/public/home.html
index 837513b04..f1e3f0b5b 100644
--- a/packages/cms-admin/public/home.html
+++ b/packages/cms-admin/public/home.html
@@ -645,36 +645,36 @@
 
 <!-- NAV -->
 <nav id="nav">
-  <a href="/" class="nav-logo">
+  <a data-testid="landing-nav-logo-link" href="/" class="nav-logo">
     <img class="nav-icon" src="/webhouse-icon.svg" alt="" />
     <img class="nav-wordmark" src="/webhouse-wordmark-dark.svg" alt="webhouse.app" />
   </a>
   <div class="nav-links">
-    <a href="#features">Features</a>
-    <a href="#architecture">Architecture</a>
-    <a href="#mcp">MCP</a>
-    <a href="https://docs.webhouse.app" target="_blank">Docs</a>
-    <a href="https://github.com/webhousecode/cms" target="_blank">GitHub</a>
-    <a href="/login">Log In</a>
-    <a href="/signup" class="nav-cta">Sign Up</a>
+    <a data-testid="landing-nav-features-link" href="#features">Features</a>
+    <a data-testid="landing-nav-architecture-link" href="#architecture">Architecture</a>
+    <a data-testid="landing-nav-mcp-link" href="#mcp">MCP</a>
+    <a data-testid="landing-nav-docs-link" href="https://docs.webhouse.app" target="_blank">Docs</a>
+    <a data-testid="landing-nav-github-link" href="https://github.com/webhousecode/cms" target="_blank">GitHub</a>
+    <a data-testid="landing-nav-login-link" href="/login">Log In</a>
+    <a data-testid="landing-nav-signup-button" href="/signup" class="nav-cta">Sign Up</a>
   </div>
-  <button class="nav-hamburger" id="nav-hamburger" aria-label="Open menu">
+  <button data-testid="nav-hamburger-button" class="nav-hamburger" id="nav-hamburger" aria-label="Open menu">
     <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
   </button>
 </nav>
 
 <!-- MOBILE MENU -->
 <div class="nav-mobile-menu" id="mobile-menu">
-  <button class="nav-mobile-close" id="mobile-close" aria-label="Close menu">
+  <button data-testid="nav-mobile-close-button" class="nav-mobile-close" id="mobile-close" aria-label="Close menu">
     <svg width="28" height="28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg>
   </button>
-  <a href="#features" class="mobile-nav-link">Features</a>
-  <a href="#architecture" class="mobile-nav-link">Architecture</a>
-  <a href="#mcp" class="mobile-nav-link">MCP</a>
-  <a href="https://docs.webhouse.app" target="_blank" class="mobile-nav-link">Docs</a>
-  <a href="https://github.com/webhousecode/cms" target="_blank">GitHub</a>
-  <a href="/login">Log In</a>
-  <a href="/signup" class="mobile-cta">Sign Up</a>
+  <a data-testid="landing-mobile-features-link" href="#features" class="mobile-nav-link">Features</a>
+  <a data-testid="landing-mobile-architecture-link" href="#architecture" class="mobile-nav-link">Architecture</a>
+  <a data-testid="landing-mobile-mcp-link" href="#mcp" class="mobile-nav-link">MCP</a>
+  <a data-testid="landing-mobile-docs-link" href="https://docs.webhouse.app" target="_blank" class="mobile-nav-link">Docs</a>
+  <a data-testid="landing-mobile-github-link" href="https://github.com/webhousecode/cms" target="_blank">GitHub</a>
+  <a data-testid="landing-mobile-login-link" href="/login">Log In</a>
+  <a data-testid="landing-mobile-signup-button" href="/signup" class="mobile-cta">Sign Up</a>
 </div>
 
 <!-- HERO -->
@@ -701,11 +701,11 @@
   <p class="hero-tagline reveal reveal-delay-2">AI-native content engine</p>
 
   <div class="hero-actions reveal reveal-delay-3">
-    <a href="/signup" class="btn-primary">
+    <a data-testid="hero-signup-button" href="/signup" class="btn-primary">
       <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
       Get Started Free
     </a>
-    <a href="/login" class="btn-secondary">
+    <a data-testid="hero-login-button" href="/login" class="btn-secondary">
       Log In →
     </a>
   </div>
@@ -841,11 +841,11 @@ <h3>cms-mcp-server</h3>
   <h2 class="cta-title reveal reveal-delay-1">Describe what you want.<br>Get a <span style="color: var(--gold);">production-ready</span> site.</h2>
   <p class="cta-subtitle reveal reveal-delay-2">Then keep iterating with AI or by hand.</p>
   <div class="hero-actions reveal reveal-delay-3" style="justify-content: center;">
-    <a href="/signup" class="btn-primary">
+    <a data-testid="cta-signup-button" href="/signup" class="btn-primary">
       <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
       Create Free Account
     </a>
-    <a href="https://github.com/webhousecode/cms" class="btn-secondary" target="_blank">
+    <a data-testid="cta-github-button" href="https://github.com/webhousecode/cms" class="btn-secondary" target="_blank">
       <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
       View on GitHub →
     </a>
@@ -869,11 +869,11 @@ <h2 class="cta-title reveal reveal-delay-1">Describe what you want.<br>Get a <sp
     <span>© 2026 WebHouse · webhouse.app</span>
   </div>
   <div class="footer-links">
-    <a href="https://docs.webhouse.app" target="_blank">Docs</a>
-    <a href="https://github.com/webhousecode" target="_blank">GitHub</a>
-    <a href="https://www.npmjs.com/package/@webhouse/cms" target="_blank">npm</a>
-    <a href="https://www.linkedin.com/company/webhouse" target="_blank">LinkedIn</a>
-    <a href="mailto:info@webhouse.net">Contact</a>
+    <a data-testid="landing-footer-docs-link" href="https://docs.webhouse.app" target="_blank">Docs</a>
+    <a data-testid="landing-footer-github-link" href="https://github.com/webhousecode" target="_blank">GitHub</a>
+    <a data-testid="landing-footer-npm-link" href="https://www.npmjs.com/package/@webhouse/cms" target="_blank">npm</a>
+    <a data-testid="landing-footer-linkedin-link" href="https://www.linkedin.com/company/webhouse" target="_blank">LinkedIn</a>
+    <a data-testid="landing-footer-contact-link" href="mailto:info@webhouse.net">Contact</a>
   </div>
 </footer>
 
diff --git a/packages/cms-admin/src/app/admin/(auth)/invite/[token]/page.tsx b/packages/cms-admin/src/app/admin/(auth)/invite/[token]/page.tsx
index 7eea0e655..6be64f217 100644
--- a/packages/cms-admin/src/app/admin/(auth)/invite/[token]/page.tsx
+++ b/packages/cms-admin/src/app/admin/(auth)/invite/[token]/page.tsx
@@ -172,6 +172,7 @@ export default function InviteAcceptPage() {
                 This invitation link is invalid or has expired.
               </p>
               <a
+                data-testid="invite-go-to-login"
                 href="/admin/login"
                 style={{ fontSize: "0.8rem", color: "hsl(38 80% 55%)", textDecoration: "none" }}
               >
@@ -243,6 +244,7 @@ export default function InviteAcceptPage() {
                   )}
 
                   <button
+                    data-testid="invite-accept-existing"
                     type="button"
                     onClick={handleAcceptExisting}
                     disabled={submitting}
@@ -263,10 +265,11 @@ export default function InviteAcceptPage() {
                 </div>
               ) : (
                 /* ── New user: name + password form ── */
-                <form onSubmit={handleSubmitNew} style={{ display: "flex", flexDirection: "column", gap: "0.875rem" }}>
+                <form data-testid="invite-form" onSubmit={handleSubmitNew} style={{ display: "flex", flexDirection: "column", gap: "0.875rem" }}>
                   <div style={{ display: "flex", flexDirection: "column", gap: "0.35rem" }}>
                     <label style={{ fontSize: "0.75rem", fontWeight: 500, color: "hsl(0 0% 70%)" }}>Your name</label>
                     <input
+                      data-testid="invite-name-input"
                       type="text"
                       value={name}
                       onChange={(e) => setName(e.target.value)}
@@ -282,6 +285,7 @@ export default function InviteAcceptPage() {
                   <div style={{ display: "flex", flexDirection: "column", gap: "0.35rem" }}>
                     <label style={{ fontSize: "0.75rem", fontWeight: 500, color: "hsl(0 0% 70%)" }}>Choose a password</label>
                     <input
+                      data-testid="invite-password-input"
                       type="password"
                       value={password}
                       onChange={(e) => setPassword(e.target.value)}
@@ -306,6 +310,7 @@ export default function InviteAcceptPage() {
                   )}
 
                   <button
+                    data-testid="invite-create-account"
                     type="submit"
                     disabled={submitting}
                     style={{
diff --git a/packages/cms-admin/src/app/admin/(auth)/login/page.tsx b/packages/cms-admin/src/app/admin/(auth)/login/page.tsx
index 9d19729ea..a676a6679 100644
--- a/packages/cms-admin/src/app/admin/(auth)/login/page.tsx
+++ b/packages/cms-admin/src/app/admin/(auth)/login/page.tsx
@@ -202,16 +202,18 @@ function LoginForm() {
   }
 
   return (
-    <div style={{
-      position: "fixed",
-      inset: 0,
-      zIndex: 200,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      background: "linear-gradient(135deg, hsl(0 0% 5%) 0%, hsl(0 0% 10%) 50%, hsl(35 20% 10%) 100%)",
-      overflow: "hidden",
-    }}>
+    <div
+      data-testid="login-root"
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: 200,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "linear-gradient(135deg, hsl(0 0% 5%) 0%, hsl(0 0% 10%) 50%, hsl(35 20% 10%) 100%)",
+        overflow: "hidden",
+      }}>
       {/* Subtle grid pattern */}
       <div style={{
         position: "absolute",
@@ -252,7 +254,7 @@ function LoginForm() {
           </div>
 
           {totpRequired ? (
-            <form onSubmit={handleTotpSubmit} style={{ display: "flex", flexDirection: "column", gap: "0.875rem" }}>
+            <form data-testid="login-totp-form" onSubmit={handleTotpSubmit} style={{ display: "flex", flexDirection: "column", gap: "0.875rem" }}>
               <div>
                 <label style={{ fontSize: "0.75rem", fontWeight: 500, color: "hsl(0 0% 70%)" }}>
                   Authenticator code
@@ -261,6 +263,7 @@ function LoginForm() {
                   Enter the 6-digit code from your authenticator app, or a backup code.
                 </p>
                 <input
+                  data-testid="login-totp-input"
                   type="text"
                   inputMode="numeric"
                   autoComplete="one-time-code"
@@ -278,6 +281,7 @@ function LoginForm() {
               </div>
               {error && <p style={{ fontSize: "0.8rem", color: "hsl(0 70% 60%)", background: "hsl(0 50% 15% / 0.5)", padding: "0.5rem 0.75rem", borderRadius: "6px", margin: 0 }}>{error}</p>}
               <button
+                data-testid="login-totp-submit"
                 type="submit"
                 disabled={loading}
                 style={{
@@ -290,6 +294,7 @@ function LoginForm() {
                 {loading ? "Verifying…" : "Verify"}
               </button>
               <button
+                data-testid="login-totp-back"
                 type="button"
                 onClick={() => { setTotpRequired(false); setTotpCode(""); setError(""); }}
                 style={{
@@ -303,10 +308,11 @@ function LoginForm() {
             </form>
           ) : (
           <>
-          <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: "0.875rem" }}>
+          <form data-testid="login-password-form" onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: "0.875rem" }}>
             <div style={{ display: "flex", flexDirection: "column", gap: "0.35rem" }}>
               <label style={{ fontSize: "0.75rem", fontWeight: 500, color: "hsl(0 0% 70%)" }}>Email</label>
               <input
+                data-testid="login-email-input"
                 type="email"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
@@ -332,6 +338,7 @@ function LoginForm() {
             <div style={{ display: "flex", flexDirection: "column", gap: "0.35rem" }}>
               <label style={{ fontSize: "0.75rem", fontWeight: 500, color: "hsl(0 0% 70%)" }}>Password</label>
               <input
+                data-testid="login-password-input"
                 type="password"
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
@@ -365,6 +372,7 @@ function LoginForm() {
             )}
 
             <button
+              data-testid="login-submit"
               type="submit"
               disabled={loading}
               style={{
@@ -384,6 +392,7 @@ function LoginForm() {
             </button>
 
             <button
+              data-testid="login-passkey-button"
               type="button"
               onClick={handlePasskeyLogin}
               disabled={loading}
@@ -418,6 +427,7 @@ function LoginForm() {
                 <div style={{ flex: 1, height: "1px", background: "hsl(0 0% 20%)" }} />
               </div>
               <a
+                data-testid="login-github-link"
                 href={`/api/auth/github?login=true`}
                 style={{
                   display: "flex", alignItems: "center", justifyContent: "center", gap: "0.5rem",
@@ -479,6 +489,7 @@ function LoginForm() {
                   {qrStatus === "expired" ? "Expired" : "Rejected"}
                 </span>
                 <button
+                  data-testid="login-qr-refresh-button"
                   onClick={() => window.location.reload()}
                   style={{
                     fontSize: "0.7rem", padding: "0.3rem 0.7rem", borderRadius: "4px",
@@ -508,6 +519,7 @@ function LoginForm() {
           Powered by <span style={{ color: "hsl(38 80% 55%)", fontWeight: 500 }}>@webhouse/cms</span>
           {" · "}
           <a
+            data-testid="login-docs-link"
             href="https://docs.webhouse.app"
             target="_blank"
             rel="noopener noreferrer"
diff --git a/packages/cms-admin/src/app/admin/(auth)/setup/page.tsx b/packages/cms-admin/src/app/admin/(auth)/setup/page.tsx
index 287936743..8732c3706 100644
--- a/packages/cms-admin/src/app/admin/(auth)/setup/page.tsx
+++ b/packages/cms-admin/src/app/admin/(auth)/setup/page.tsx
@@ -55,16 +55,18 @@ export default function SetupPage() {
   }
 
   return (
-    <div style={{
-      position: "fixed",
-      inset: 0,
-      zIndex: 200,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      background: "linear-gradient(135deg, hsl(0 0% 5%) 0%, hsl(0 0% 10%) 50%, hsl(35 20% 10%) 100%)",
-      overflow: "hidden",
-    }}>
+    <div
+      data-testid="setup-root"
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: 200,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "linear-gradient(135deg, hsl(0 0% 5%) 0%, hsl(0 0% 10%) 50%, hsl(35 20% 10%) 100%)",
+        overflow: "hidden",
+      }}>
       {/* Subtle grid pattern */}
       <div style={{
         position: "absolute",
@@ -103,10 +105,11 @@ export default function SetupPage() {
           <p style={{ fontSize: "0.8rem", color: "hsl(0 0% 50%)", margin: 0 }}>Create your admin account to get started</p>
         </div>
 
-        <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: "0.875rem" }}>
+        <form data-testid="setup-form" onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: "0.875rem" }}>
           <div style={{ display: "flex", flexDirection: "column", gap: "0.35rem" }}>
             <label style={{ fontSize: "0.75rem", fontWeight: 500, color: "hsl(0 0% 70%)" }}>Name</label>
             <input
+              data-testid="setup-name-input"
               type="text"
               value={name}
               onChange={(e) => setName(e.target.value)}
@@ -122,6 +125,7 @@ export default function SetupPage() {
           <div style={{ display: "flex", flexDirection: "column", gap: "0.35rem" }}>
             <label style={{ fontSize: "0.75rem", fontWeight: 500, color: "hsl(0 0% 70%)" }}>Email</label>
             <input
+              data-testid="setup-email-input"
               type="email"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
@@ -136,6 +140,7 @@ export default function SetupPage() {
           <div style={{ display: "flex", flexDirection: "column", gap: "0.35rem" }}>
             <label style={{ fontSize: "0.75rem", fontWeight: 500, color: "hsl(0 0% 70%)" }}>Password</label>
             <input
+              data-testid="setup-password-input"
               type="password"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
@@ -153,6 +158,7 @@ export default function SetupPage() {
           )}
 
           <button
+            data-testid="setup-submit-button"
             type="submit"
             disabled={loading}
             style={{ padding: "0.6rem", borderRadius: "7px", border: "none", background: loading ? "hsl(0 0% 25%)" : "hsl(38 92% 50%)", color: loading ? "hsl(0 0% 50%)" : "hsl(38 30% 10%)", fontSize: "0.875rem", fontWeight: 600, cursor: loading ? "wait" : "pointer", marginTop: "0.25rem", transition: "opacity 150ms" }}
@@ -167,6 +173,7 @@ export default function SetupPage() {
           <div style={{ flex: 1, height: "1px", background: "hsl(0 0% 20%)" }} />
         </div>
         <a
+          data-testid="setup-github-link"
           href="/api/auth/github?login=true"
           style={{
             display: "flex", alignItems: "center", justifyContent: "center", gap: "0.5rem",
diff --git a/packages/cms-admin/src/app/admin/(auth)/signup/page.tsx b/packages/cms-admin/src/app/admin/(auth)/signup/page.tsx
index a128e775d..7d5ff87d3 100644
--- a/packages/cms-admin/src/app/admin/(auth)/signup/page.tsx
+++ b/packages/cms-admin/src/app/admin/(auth)/signup/page.tsx
@@ -71,16 +71,18 @@ function SignupForm() {
   }
 
   return (
-    <div style={{
-      position: "fixed",
-      inset: 0,
-      zIndex: 200,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      background: "linear-gradient(135deg, hsl(0 0% 5%) 0%, hsl(0 0% 10%) 50%, hsl(35 20% 10%) 100%)",
-      overflow: "auto",
-    }}>
+    <div
+      data-testid="signup-root"
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: 200,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "linear-gradient(135deg, hsl(0 0% 5%) 0%, hsl(0 0% 10%) 50%, hsl(35 20% 10%) 100%)",
+        overflow: "auto",
+      }}>
       {/* Grid pattern */}
       <div style={{
         position: "fixed",
@@ -148,10 +150,11 @@ function SignupForm() {
 
           {/* ── STEP 1: Account ── */}
           {step === 1 && (
-            <form onSubmit={handleStep1} style={{ display: "flex", flexDirection: "column", gap: "0.875rem" }}>
+            <form data-testid="signup-step1-form" onSubmit={handleStep1} style={{ display: "flex", flexDirection: "column", gap: "0.875rem" }}>
               <div style={fieldGap}>
                 <label style={labelStyle}>Email</label>
                 <input
+                  data-testid="signup-email-input"
                   type="email"
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
@@ -167,6 +170,7 @@ function SignupForm() {
               <div style={fieldGap}>
                 <label style={labelStyle}>Password</label>
                 <input
+                  data-testid="signup-password-input"
                   type="password"
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
@@ -182,6 +186,7 @@ function SignupForm() {
               <div style={fieldGap}>
                 <label style={labelStyle}>Project name</label>
                 <input
+                  data-testid="signup-project-input"
                   type="text"
                   value={projectName}
                   onChange={(e) => setProjectName(e.target.value)}
@@ -193,7 +198,7 @@ function SignupForm() {
                 />
               </div>
 
-              <button type="submit" style={{
+              <button data-testid="signup-step1-submit" type="submit" style={{
                 padding: "0.6rem",
                 borderRadius: "7px",
                 border: "none",
@@ -209,20 +214,21 @@ function SignupForm() {
 
               <p style={{ textAlign: "center", fontSize: "0.8rem", color: "hsl(0 0% 45%)", margin: 0 }}>
                 Already have an account?{" "}
-                <a href="/login" style={{ color: "hsl(38 80% 55%)", textDecoration: "none" }}>Sign in</a>
+                <a data-testid="signup-login-link" href="/login" style={{ color: "hsl(38 80% 55%)", textDecoration: "none" }}>Sign in</a>
               </p>
             </form>
           )}
 
           {/* ── STEP 2: Personalize ── */}
           {step === 2 && (
-            <form onSubmit={handleStep2} style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+            <form data-testid="signup-step2-form" onSubmit={handleStep2} style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
               {/* Site type — card select */}
               <div style={fieldGap}>
                 <label style={labelStyle}>What are you building?</label>
                 <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "6px" }}>
                   {siteTypes.map((t) => (
                     <button
+                      data-testid={`signup-site-type-${t.value}`}
                       key={t.value}
                       type="button"
                       onClick={() => setSiteType(t.value)}
@@ -257,6 +263,7 @@ function SignupForm() {
                 <div style={{ display: "flex", gap: "6px" }}>
                   {experienceLevels.map((l) => (
                     <button
+                      data-testid={`signup-experience-${l.value}`}
                       key={l.value}
                       type="button"
                       onClick={() => setExperience(l.value)}
@@ -290,6 +297,7 @@ function SignupForm() {
                   <span style={{ color: "hsl(0 0% 35%)" }}>(optional)</span>
                 </label>
                 <textarea
+                  data-testid="signup-description-input"
                   value={description}
                   onChange={(e) => setDescription(e.target.value)}
                   placeholder="A photography portfolio with a blog and contact page"
@@ -309,6 +317,7 @@ function SignupForm() {
 
               <div style={{ display: "flex", gap: "8px", marginTop: "0.25rem" }}>
                 <button
+                  data-testid="signup-step2-back"
                   type="button"
                   onClick={() => setStep(1)}
                   style={{
@@ -323,7 +332,7 @@ function SignupForm() {
                 >
                   Back
                 </button>
-                <button type="submit" style={{
+                <button data-testid="signup-step2-submit" type="submit" style={{
                   flex: 1,
                   padding: "0.6rem",
                   borderRadius: "7px",
@@ -365,6 +374,7 @@ function SignupForm() {
                 when your account is ready.
               </p>
               <a
+                data-testid="signup-home-link"
                 href="/"
                 style={{
                   display: "inline-block",
diff --git a/packages/cms-admin/src/app/admin/(workspace)/account/mobile-pairing/client.tsx b/packages/cms-admin/src/app/admin/(workspace)/account/mobile-pairing/client.tsx
index e5dd484b2..45600fcac 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/account/mobile-pairing/client.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/account/mobile-pairing/client.tsx
@@ -81,6 +81,7 @@ export function MobilePairingClient() {
           <>
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img
+              data-testid="mobile-pairing-qr"
               src={data.qrDataUrl}
               alt="Mobile pairing QR code"
               width={260}
@@ -105,6 +106,7 @@ export function MobilePairingClient() {
         )}
 
         <button
+          data-testid="mobile-pairing-generate-button"
           type="button"
           onClick={generate}
           disabled={loading}
diff --git a/packages/cms-admin/src/app/admin/(workspace)/account/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/account/page.tsx
index 44140276a..45caeda4d 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/account/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/account/page.tsx
@@ -27,7 +27,7 @@ export default async function AccountPage({
   ];
 
   return (
-    <>
+    <div data-testid="account-root">
       <ActionBar>
         <ActionBarBreadcrumb items={["Account"]} />
       </ActionBar>
@@ -101,7 +101,7 @@ export default async function AccountPage({
           </div>
         )}
       </div>
-    </>
+    </div>
   );
 }
 
diff --git a/packages/cms-admin/src/app/admin/(workspace)/agents/[id]/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/agents/[id]/page.tsx
index 44e02c04a..b0fa4b730 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/agents/[id]/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/agents/[id]/page.tsx
@@ -483,11 +483,12 @@ export default function AgentDetailPage() {
         </div>
       )}
 
-      <form id="agent-form" onSubmit={handleSubmit} className="space-y-6">
+      <form data-testid="agent-form" id="agent-form" onSubmit={handleSubmit} className="space-y-6">
         {/* Name */}
         <div>
           <label style={labelStyle}>Agent Name</label>
           <input
+            data-testid="agent-name-input"
             type="text"
             value={name}
             onChange={(e) => setName(e.target.value)}
@@ -512,6 +513,7 @@ export default function AgentDetailPage() {
               System Prompt
             </label>
             <button
+              data-testid="agent-generate-prompt"
               type="button"
               onClick={handleGeneratePrompt}
               disabled={generating}
@@ -526,6 +528,7 @@ export default function AgentDetailPage() {
             </button>
           </div>
           <textarea
+            data-testid="agent-system-prompt"
             value={systemPrompt}
             onChange={(e) => setSystemPrompt(e.target.value)}
             rows={6}
@@ -592,6 +595,7 @@ export default function AgentDetailPage() {
               >
                 {availableCollections.find((c) => c.name === col)?.label ?? col}
                 <button
+                  data-testid={`agent-target-collection-remove-${col}`}
                   type="button"
                   onClick={() => setTargetCollections((prev) => prev.filter((c) => c !== col))}
                   style={{ background: "none", border: "none", cursor: "pointer", padding: 0, color: "inherit", display: "flex", lineHeight: 1 }}
@@ -644,6 +648,7 @@ export default function AgentDetailPage() {
                     />
                   ) : (
                     <input
+                      data-testid={`agent-field-default-value-${i}`}
                       type={fieldDef?.type === "number" ? "number" : "text"}
                       value={fd.value}
                       onChange={(e) => setFieldDefaults((prev) => prev.map((f, j) => j === i ? { ...f, value: e.target.value } : f))}
@@ -653,13 +658,14 @@ export default function AgentDetailPage() {
                   )}
                   {confirmDeleteDefault === i ? (
                     <span style={{ display: "flex", alignItems: "center", gap: "0.25rem" }}>
-                      <button type="button" onClick={() => { setFieldDefaults((prev) => prev.filter((_, j) => j !== i)); setConfirmDeleteDefault(null); }}
+                      <button data-testid={`agent-field-default-delete-confirm-${i}`} type="button" onClick={() => { setFieldDefaults((prev) => prev.filter((_, j) => j !== i)); setConfirmDeleteDefault(null); }}
                         style={{ fontSize: "0.6rem", padding: "0.15rem 0.4rem", borderRadius: "3px", border: "none", background: "var(--destructive)", color: "#fff", cursor: "pointer" }}>Sure?</button>
-                      <button type="button" onClick={() => setConfirmDeleteDefault(null)}
+                      <button data-testid={`agent-field-default-delete-cancel-${i}`} type="button" onClick={() => setConfirmDeleteDefault(null)}
                         style={{ fontSize: "0.6rem", padding: "0.15rem 0.4rem", borderRadius: "3px", border: "1px solid var(--border)", background: "transparent", color: "var(--foreground)", cursor: "pointer" }}>No</button>
                     </span>
                   ) : (
                     <button
+                      data-testid={`agent-field-default-delete-${i}`}
                       type="button"
                       onClick={() => setConfirmDeleteDefault(i)}
                       style={{ padding: "0.3rem", color: "var(--destructive)", background: "none", border: "none", cursor: "pointer", borderRadius: "4px" }}
@@ -672,6 +678,7 @@ export default function AgentDetailPage() {
               );
             })}
             <button
+              data-testid="agent-field-default-add"
               type="button"
               onClick={() => setFieldDefaults((prev) => [...prev, { key: "", value: "" }])}
               className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
@@ -714,6 +721,7 @@ export default function AgentDetailPage() {
               <div>
                 <label style={labelStyle}>Max per run</label>
                 <input
+                  data-testid="agent-max-per-run"
                   type="number"
                   min={1}
                   max={10}
@@ -771,6 +779,7 @@ export default function AgentDetailPage() {
             <div>
               <label style={labelStyle}>Daily</label>
               <input
+                data-testid="agent-daily-budget"
                 type="number"
                 min={0}
                 step={0.01}
@@ -783,6 +792,7 @@ export default function AgentDetailPage() {
             <div>
               <label style={labelStyle}>Weekly</label>
               <input
+                data-testid="agent-weekly-budget"
                 type="number"
                 min={0}
                 step={0.01}
@@ -795,6 +805,7 @@ export default function AgentDetailPage() {
             <div>
               <label style={labelStyle}>Monthly</label>
               <input
+                data-testid="agent-monthly-budget"
                 type="number"
                 min={0}
                 step={0.01}
@@ -821,6 +832,7 @@ export default function AgentDetailPage() {
             Run agent now
           </p>
           <textarea
+            data-testid="agent-run-prompt"
             value={runPrompt}
             onChange={(e) => setRunPrompt(e.target.value)}
             rows={2}
@@ -829,6 +841,7 @@ export default function AgentDetailPage() {
           />
           <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
             <button
+              data-testid="agent-run-button"
               type="button"
               onClick={handleRun}
               disabled={running || !runPrompt.trim()}
@@ -852,6 +865,7 @@ export default function AgentDetailPage() {
       {!readOnly && (
         <div className="mt-6 pt-6 border-t border-border">
           <button
+            data-testid="agent-delete-trigger"
             type="button"
             onClick={() => setShowDelete(true)}
             className="flex items-center gap-1.5 text-sm text-destructive hover:opacity-80 transition-opacity"
@@ -893,6 +907,7 @@ export default function AgentDetailPage() {
             </p>
             <div className="flex gap-2 justify-end">
               <button
+                data-testid="agent-delete-cancel"
                 type="button"
                 onClick={() => setShowDelete(false)}
                 className="px-4 py-2 text-sm rounded-md border border-border bg-transparent hover:bg-secondary transition-colors"
@@ -900,6 +915,7 @@ export default function AgentDetailPage() {
                 Cancel
               </button>
               <button
+                data-testid="agent-delete-confirm"
                 type="button"
                 onClick={handleDelete}
                 disabled={deleting}
@@ -967,6 +983,7 @@ function FieldAutocomplete({
   return (
     <div ref={containerRef} style={{ position: "relative", ...style }}>
       <input
+        data-testid="agent-field-autocomplete-input"
         type="text"
         value={query}
         onChange={(e) => { setQuery(e.target.value); setOpen(true); }}
@@ -1009,6 +1026,7 @@ function FieldAutocomplete({
         }}>
           {filtered.map((s) => (
             <button
+              data-testid={`agent-field-autocomplete-option-${s.name}`}
               key={s.name}
               type="button"
               onMouseDown={(e) => { e.preventDefault(); commit(s.name); }}
diff --git a/packages/cms-admin/src/app/admin/(workspace)/agents/new/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/agents/new/page.tsx
index 1363b1bad..3ef85296f 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/agents/new/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/agents/new/page.tsx
@@ -257,6 +257,7 @@ export default function NewAgentPage() {
           </span>
           {formFilled && (
             <button
+              data-testid="agent-toggle-form-button"
               type="button"
               onClick={() => setFormCollapsed((v) => !v)}
               style={{ display: "flex", alignItems: "center", gap: "0.3rem", fontSize: "0.72rem", color: "var(--muted-foreground)", background: "none", border: "none", cursor: "pointer", padding: 0 }}
@@ -270,6 +271,7 @@ export default function NewAgentPage() {
         {/* Input area */}
         <div style={{ padding: "0 1rem 1rem", display: "flex", flexDirection: "column", gap: "0.625rem" }}>
           <textarea
+            data-testid="agent-describe-textarea"
             ref={textareaRef}
             value={description}
             onChange={(e) => setDescription(e.target.value)}
@@ -293,6 +295,7 @@ export default function NewAgentPage() {
 
           <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
             <button
+              data-testid="agent-generate-button"
               type="button"
               onClick={handleDescribe}
               disabled={aiLoading || !description.trim()}
@@ -343,6 +346,7 @@ export default function NewAgentPage() {
               <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: "0.625rem" }}>
                 {localTemplates.map((t) => (
                   <button
+                    data-testid={`agent-template-local-${t.id}`}
                     key={t.id}
                     type="button"
                     onClick={() => applyTemplate(t)}
@@ -374,6 +378,7 @@ export default function NewAgentPage() {
               <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: "0.625rem" }}>
                 {marketplaceTemplates.map((t) => (
                   <button
+                    data-testid={`agent-template-marketplace-${t.id}`}
                     key={t.id}
                     type="button"
                     onClick={() => applyTemplate(t)}
@@ -411,11 +416,12 @@ export default function NewAgentPage() {
 
       {/* ── Manual form (collapsible after AI fill) ─────────────── */}
       {!formCollapsed && (
-      <form id="agent-form-anchor" onSubmit={handleSubmit} className="space-y-6">
+      <form data-testid="agent-form" id="agent-form-anchor" onSubmit={handleSubmit} className="space-y-6">
         {/* Name */}
         <div>
           <label style={labelStyle}>Agent Name</label>
           <input
+            data-testid="agent-form-name-input"
             type="text"
             value={name}
             onChange={(e) => setName(e.target.value)}
@@ -441,6 +447,7 @@ export default function NewAgentPage() {
               System Prompt
             </label>
             <button
+              data-testid="agent-generate-prompt-button"
               type="button"
               onClick={handleGeneratePrompt}
               disabled={generating}
@@ -455,6 +462,7 @@ export default function NewAgentPage() {
             </button>
           </div>
           <textarea
+            data-testid="agent-form-prompt-textarea"
             value={systemPrompt}
             onChange={(e) => setSystemPrompt(e.target.value)}
             rows={6}
@@ -531,6 +539,7 @@ export default function NewAgentPage() {
               <div>
                 <label style={labelStyle}>Max per run</label>
                 <input
+                  data-testid="agent-form-max-per-run-input"
                   type="number"
                   min={1}
                   max={10}
@@ -551,6 +560,7 @@ export default function NewAgentPage() {
         )}
 
         <button
+          data-testid="agent-form-submit-button"
           type="submit"
           disabled={saving}
           className="w-full flex items-center justify-center gap-2 py-2.5 rounded-lg bg-primary text-primary-foreground font-semibold text-sm hover:opacity-90 transition-opacity disabled:opacity-60"
diff --git a/packages/cms-admin/src/app/admin/(workspace)/agents/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/agents/page.tsx
index 617e9a7eb..61cb81e9e 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/agents/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/agents/page.tsx
@@ -14,7 +14,7 @@ export default async function AgentsPage() {
   const canManageAgents = perms.includes("agents.manage");
 
   return (
-    <>
+    <div data-testid="agents-root">
       <TabTitle value="Agents" />
       <ActionBar helpArticleId="agents-intro"
         actions={canManageAgents ? (
@@ -30,6 +30,6 @@ export default async function AgentsPage() {
       <div className="p-8 max-w-5xl">
         <AgentsTabs agents={agents} readOnly={siteRole === "viewer"} />
       </div>
-    </>
+    </div>
   );
 }
diff --git a/packages/cms-admin/src/app/admin/(workspace)/approve/[id]/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/approve/[id]/page.tsx
index 6305b239a..a95c35c82 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/approve/[id]/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/approve/[id]/page.tsx
@@ -64,6 +64,7 @@ export default function ApproveQrPage({ params }: { params: Promise<{ id: string
         </p>
         <div style={{ display: "flex", gap: "0.5rem", justifyContent: "center" }}>
           <button
+            data-testid="qr-approve-button"
             onClick={() => decide(false)}
             disabled={busy}
             style={{
@@ -75,6 +76,7 @@ export default function ApproveQrPage({ params }: { params: Promise<{ id: string
             {busy ? "..." : "Approve"}
           </button>
           <button
+            data-testid="qr-reject-button"
             onClick={() => decide(true)}
             disabled={busy}
             style={{
diff --git a/packages/cms-admin/src/app/admin/(workspace)/backup/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/backup/page.tsx
index 4e9cc2e07..fd92bfdc7 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/backup/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/backup/page.tsx
@@ -108,7 +108,7 @@ export default function BackupPage() {
   }
 
   return (
-    <>
+    <div data-testid="backup-root">
       <TabTitle value="Backup" />
       <ActionBar helpArticleId="backup-intro"
         actions={
@@ -220,6 +220,7 @@ export default function BackupPage() {
                 <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
                   {/* Download */}
                   <a
+                    data-testid="backup-download-link"
                     href={`/api/admin/backups/${snap.id}`}
                     download
                     title="Download zip"
@@ -239,17 +240,18 @@ export default function BackupPage() {
                       <span style={{ fontSize: "0.65rem", color: "var(--destructive)", fontWeight: 500, padding: "0 2px" }}>
                         {restoring === snap.id ? "Restoring..." : "Restore?"}
                       </span>
-                      <button type="button" onClick={() => handleRestore(snap.id)} disabled={restoring === snap.id}
+                      <button data-testid="backup-restore-confirm-yes" type="button" onClick={() => handleRestore(snap.id)} disabled={restoring === snap.id}
                         style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px",
                           border: "none", background: "var(--destructive)", color: "#fff",
                           cursor: "pointer", lineHeight: 1 }}>Yes</button>
-                      <button type="button" onClick={() => setConfirmRestore(null)}
+                      <button data-testid="backup-restore-confirm-no" type="button" onClick={() => setConfirmRestore(null)}
                         style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px",
                           border: "1px solid var(--border)", background: "transparent",
                           color: "var(--foreground)", cursor: "pointer", lineHeight: 1 }}>No</button>
                     </span>
                   ) : (
                     <button
+                      data-testid="backup-restore-button"
                       type="button"
                       onClick={() => setConfirmRestore(snap.id)}
                       title="Restore from this backup"
@@ -269,17 +271,18 @@ export default function BackupPage() {
                   {confirmDelete === snap.id ? (
                     <span style={{ display: "flex", alignItems: "center", gap: "0.25rem" }}>
                       <span style={{ fontSize: "0.65rem", color: "var(--destructive)", fontWeight: 500, padding: "0 2px" }}>Remove?</span>
-                      <button type="button" onClick={() => handleDelete(snap.id)} disabled={deleting === snap.id}
+                      <button data-testid="backup-delete-confirm-yes" type="button" onClick={() => handleDelete(snap.id)} disabled={deleting === snap.id}
                         style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px",
                           border: "none", background: "var(--destructive)", color: "#fff",
                           cursor: "pointer", lineHeight: 1 }}>Yes</button>
-                      <button type="button" onClick={() => setConfirmDelete(null)}
+                      <button data-testid="backup-delete-confirm-no" type="button" onClick={() => setConfirmDelete(null)}
                         style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px",
                           border: "1px solid var(--border)", background: "transparent",
                           color: "var(--foreground)", cursor: "pointer", lineHeight: 1 }}>No</button>
                     </span>
                   ) : (
                     <button
+                      data-testid="backup-delete-button"
                       type="button"
                       onClick={() => setConfirmDelete(snap.id)}
                       title="Delete this backup"
@@ -301,6 +304,6 @@ export default function BackupPage() {
         </div>
       )}
     </div>
-    </>
+    </div>
   );
 }
diff --git a/packages/cms-admin/src/app/admin/(workspace)/command/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/command/page.tsx
index 6362ffeff..4254a00be 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/command/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/command/page.tsx
@@ -97,7 +97,7 @@ export default function CommandPage() {
     budgetPct > 90 ? "bg-red-500" : budgetPct > 70 ? "bg-yellow-500" : "bg-green-500";
 
   return (
-    <>
+    <div data-testid="command-root">
     <ActionBar helpArticleId="cockpit-intro"
       actions={!readOnly ? (
         <ActionButton variant="primary" onClick={handleSave} disabled={saving}
@@ -253,7 +253,7 @@ export default function CommandPage() {
             <h2 className="font-semibold text-foreground">Budget</h2>
             <div>
               <label style={labelStyle}>Monthly budget (USD)</label>
-              <input
+              <input data-testid="command-monthly-budget-input"
                 type="number"
                 min={0}
                 step={1}
@@ -311,7 +311,7 @@ export default function CommandPage() {
 
           {/* Sync */}
           {!readOnly && (
-            <button
+            <button data-testid="command-sync-button"
               type="button"
               onClick={handleSync}
               disabled={syncing}
@@ -327,7 +327,7 @@ export default function CommandPage() {
       </div>
       </fieldset>
     </div>
-    </>
+    </div>
   );
 }
 
@@ -343,7 +343,7 @@ function SegmentedControl({
   return (
     <div className="flex border border-border rounded-lg overflow-hidden">
       {options.map((opt) => (
-        <button
+        <button data-testid="command-segment-button"
           key={opt.value}
           type="button"
           onClick={() => onChange(opt.value)}
diff --git a/packages/cms-admin/src/app/admin/(workspace)/content/[collection]/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/content/[collection]/page.tsx
index fe2f28319..39c7f52a6 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/content/[collection]/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/content/[collection]/page.tsx
@@ -18,18 +18,20 @@ export default async function CollectionPage({ params }: Props) {
   if (!colConfig) notFound();
 
   return (
-    <CollectionPageClient
-      collection={collection}
-      collectionLabel={colConfig.label ?? collection}
-      titleField={colConfig.fields[0]?.name ?? "title"}
-      fields={colConfig.fields}
-      readOnly={siteRole === "viewer"}
-      urlPrefix={colConfig.urlPrefix}
-      urlPattern={(colConfig as any).urlPattern}
-      localeStrategy={siteConfig.localeStrategy ?? "prefix-other"}
-      schemaEnabled={siteConfig.schemaEditEnabled}
-      defaultLocale={siteConfig.defaultLocale || config.defaultLocale}
-      siteLocales={siteConfig.locales?.length ? siteConfig.locales : config.locales}
-    />
+    <div data-testid="content-root">
+      <CollectionPageClient
+        collection={collection}
+        collectionLabel={colConfig.label ?? collection}
+        titleField={colConfig.fields[0]?.name ?? "title"}
+        fields={colConfig.fields}
+        readOnly={siteRole === "viewer"}
+        urlPrefix={colConfig.urlPrefix}
+        urlPattern={(colConfig as any).urlPattern}
+        localeStrategy={siteConfig.localeStrategy ?? "prefix-other"}
+        schemaEnabled={siteConfig.schemaEditEnabled}
+        defaultLocale={siteConfig.defaultLocale || config.defaultLocale}
+        siteLocales={siteConfig.locales?.length ? siteConfig.locales : config.locales}
+      />
+    </div>
   );
 }
diff --git a/packages/cms-admin/src/app/admin/(workspace)/curation/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/curation/page.tsx
index 302f4a62f..b46a0f41a 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/curation/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/curation/page.tsx
@@ -64,7 +64,7 @@ function renderMarkdown(md: string): string {
         return `<span style="display:inline-flex;align-items:center;gap:0.4rem;padding:0.4rem 0.7rem;margin:0.5rem 0;border:1px dashed var(--destructive);border-radius:6px;color:var(--destructive);font-size:0.75rem;">⚠ Invalid image URL <code style="opacity:0.7;">${url.slice(0, 60)}${url.length > 60 ? "…" : ""}</code></span>`;
       })
       // links: [text](url)
-      .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noreferrer" style="color:var(--primary);text-decoration:underline;">$1</a>')
+      .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a data-testid="curation-preview-link" href="$2" target="_blank" rel="noreferrer" style="color:var(--primary);text-decoration:underline;">$1</a>')
       // bold
       .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
       // italic
@@ -316,6 +316,7 @@ export default function CurationPage() {
   }
 
   return (
+    <div data-testid="curation-root">
     <fieldset disabled={readOnly} style={{ border: "none", padding: 0, margin: 0 }}>
     <div className="p-8 max-w-5xl">
       <TabTitle value="Curation Queue" />
@@ -330,6 +331,7 @@ export default function CurationPage() {
       <div className="flex gap-1 mb-6 border-b border-border">
         {TABS.map((t) => (
           <button
+            data-testid={`curation-tab-${t.id}`}
             key={t.id}
             type="button"
             onClick={() => switchTab(t.id)}
@@ -396,6 +398,7 @@ export default function CurationPage() {
 
                 <div className="flex items-center gap-1.5 shrink-0">
                   <button
+                    data-testid={`curation-speak-${item.id}`}
                     type="button"
                     title={speakingId === item.id ? "Stop" : "Read aloud"}
                     onClick={() => speakingId === item.id ? handleStop() : handleSpeak(item)}
@@ -406,6 +409,7 @@ export default function CurationPage() {
                   {/* Preview is available in all tabs (not just ready) so
                       curators can also see what was approved/rejected. */}
                   <button
+                    data-testid={`curation-preview-${item.id}`}
                     type="button"
                     onClick={() => setPreviewItem(item)}
                     title="Preview rendered content"
@@ -417,6 +421,7 @@ export default function CurationPage() {
                   {!readOnly && (tab === "ready" || tab === "in_review") && (
                     <>
                       <button
+                        data-testid={`curation-fields-${item.id}`}
                         type="button"
                         onClick={() => handleEditFields(item)}
                         title="Edit fields before approving"
@@ -426,6 +431,7 @@ export default function CurationPage() {
                         Fields
                       </button>
                       <button
+                        data-testid={`curation-approve-${item.id}`}
                         type="button"
                         title="Approve & Publish"
                         onClick={() => handleApprove(item.id)}
@@ -436,6 +442,7 @@ export default function CurationPage() {
                       </button>
                       {tab === "ready" && (
                         <button
+                          data-testid={`curation-edit-${item.id}`}
                           type="button"
                           onClick={() => handleEditFirst(item)}
                           className="flex items-center gap-1 px-2.5 py-1.5 rounded-md text-xs font-medium border border-border hover:bg-secondary transition-colors"
@@ -446,6 +453,7 @@ export default function CurationPage() {
                       )}
                       {tab === "in_review" && (
                         <button
+                          data-testid={`curation-open-editor-${item.id}`}
                           type="button"
                           onClick={() => handleEditFirst(item)}
                           className="flex items-center gap-1 px-2.5 py-1.5 rounded-md text-xs font-medium border border-border hover:bg-secondary transition-colors"
@@ -455,6 +463,7 @@ export default function CurationPage() {
                         </button>
                       )}
                       <button
+                        data-testid={`curation-reject-${item.id}`}
                         type="button"
                         title="Reject"
                         onClick={() => setRejectingId(item.id)}
@@ -479,6 +488,7 @@ export default function CurationPage() {
                   </span>
                   {/* Active = primary contentData (always first chip) */}
                   <button
+                    data-testid={`curation-model-active-${item.id}`}
                     type="button"
                     disabled
                     className="px-2 py-1 rounded-md text-[0.7rem] font-mono border border-primary text-primary bg-primary/10 cursor-default"
@@ -488,6 +498,7 @@ export default function CurationPage() {
                   </button>
                   {item.alternatives.map((alt, i) => (
                     <button
+                      data-testid={`curation-model-alt-${item.id}-${i}`}
                       key={`${alt.model}-${i}`}
                       type="button"
                       onClick={() => handlePickAlternative(item, i)}
@@ -510,6 +521,7 @@ export default function CurationPage() {
               {rejectingId === item.id && (
                 <div className="mt-3 flex gap-2">
                   <textarea
+                    data-testid={`curation-reject-feedback-${item.id}`}
                     value={rejectFeedback}
                     onChange={(e) => setRejectFeedback(e.target.value)}
                     placeholder="Feedback for the agent..."
@@ -518,6 +530,7 @@ export default function CurationPage() {
                   />
                   <div className="flex flex-col gap-1">
                     <button
+                      data-testid={`curation-reject-confirm-${item.id}`}
                       type="button"
                       onClick={() => handleReject(item.id)}
                       disabled={!rejectFeedback.trim()}
@@ -526,6 +539,7 @@ export default function CurationPage() {
                       Confirm
                     </button>
                     <button
+                      data-testid={`curation-reject-cancel-${item.id}`}
                       type="button"
                       onClick={() => {
                         setRejectingId(null);
@@ -552,6 +566,7 @@ export default function CurationPage() {
                         </label>
                         {field.type === "select" && field.options ? (
                           <select
+                            data-testid={`curation-field-select-${item.id}-${field.name}`}
                             value={String(editDraft[field.name] ?? "")}
                             onChange={(e) => setEditDraft((prev) => ({ ...prev, [field.name]: e.target.value }))}
                             style={{ flex: 1, padding: "0.25rem 0.5rem", borderRadius: "5px", border: "1px solid var(--border)", background: "var(--background)", color: "var(--foreground)", fontSize: "0.8rem" }}
@@ -563,6 +578,7 @@ export default function CurationPage() {
                           </select>
                         ) : field.type === "tags" ? (
                           <input
+                            data-testid={`curation-field-tags-${item.id}-${field.name}`}
                             type="text"
                             value={((editDraft[field.name] as string[]) ?? []).join(", ")}
                             onChange={(e) =>
@@ -584,6 +600,7 @@ export default function CurationPage() {
                           />
                         ) : (
                           <input
+                            data-testid={`curation-field-input-${item.id}-${field.name}`}
                             type={field.type === "date" ? "date" : field.type === "number" ? "number" : "text"}
                             value={String(editDraft[field.name] ?? "")}
                             onChange={(e) => setEditDraft((prev) => ({ ...prev, [field.name]: e.target.value }))}
@@ -594,6 +611,7 @@ export default function CurationPage() {
                     ))}
                   <div className="flex gap-2 pt-1">
                     <button
+                      data-testid={`curation-field-save-${item.id}`}
                       type="button"
                       onClick={() => handleSaveFields(item)}
                       className="px-3 py-1.5 rounded-md text-xs bg-primary text-primary-foreground hover:opacity-90"
@@ -601,6 +619,7 @@ export default function CurationPage() {
                       Save fields
                     </button>
                     <button
+                      data-testid={`curation-field-cancel-${item.id}`}
                       type="button"
                       onClick={() => setEditingId(null)}
                       className="px-3 py-1.5 rounded-md text-xs border border-border hover:bg-secondary"
@@ -626,6 +645,7 @@ export default function CurationPage() {
     {/* Preview modal — full rendered post for the selected queue item */}
     {previewItem && (
       <div
+        data-testid="curation-preview-modal-backdrop"
         onClick={() => setPreviewItem(null)}
         style={{
           position: "fixed", inset: 0, background: "rgba(0,0,0,0.7)", zIndex: 100,
@@ -634,6 +654,7 @@ export default function CurationPage() {
         }}
       >
         <div
+          data-testid="curation-preview-modal-content"
           onClick={(e) => e.stopPropagation()}
           style={{
             background: "var(--card)", color: "var(--foreground)",
@@ -643,6 +664,7 @@ export default function CurationPage() {
           }}
         >
           <button
+            data-testid="curation-preview-modal-close"
             type="button"
             onClick={() => setPreviewItem(null)}
             title="Close preview"
@@ -706,5 +728,6 @@ export default function CurationPage() {
       </div>
     )}
     </fieldset>
+    </div>
   );
 }
diff --git a/packages/cms-admin/src/app/admin/(workspace)/favorites/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/favorites/page.tsx
index aee45e7cd..6e8ff7d14 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/favorites/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/favorites/page.tsx
@@ -10,13 +10,13 @@ export default async function FavoritesPage() {
   if (!session) redirect("/admin/login");
 
   return (
-    <>
+    <div data-testid="favorites-root">
       <ActionBar>
         <ActionBarBreadcrumb items={["Favorites"]} />
       </ActionBar>
       <div className="p-8">
         <FavoritesList />
       </div>
-    </>
+    </div>
   );
 }
diff --git a/packages/cms-admin/src/app/admin/(workspace)/forms/[name]/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/forms/[name]/page.tsx
index f0de370f3..ea35af5a9 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/forms/[name]/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/forms/[name]/page.tsx
@@ -77,6 +77,7 @@ export default function FormInboxPage({ params }: { params: Promise<{ name: stri
       <ActionBar>
         <ActionBarBreadcrumb items={["Forms", name]} />
         <a
+          data-testid="form-inbox-export"
           href={`/api/admin/forms/${name}/export`}
           download
           style={{
@@ -102,6 +103,7 @@ export default function FormInboxPage({ params }: { params: Promise<{ name: stri
         <div style={{ display: "flex", gap: "0.5rem", marginBottom: "1rem" }}>
           {(["all", "new", "read", "archived"] as const).map((f) => (
             <button
+              data-testid={`form-filter-${f}`}
               key={f}
               onClick={() => setFilter(f)}
               style={{
@@ -134,6 +136,7 @@ export default function FormInboxPage({ params }: { params: Promise<{ name: stri
             <div style={{ flex: "1 1 0", minWidth: 0, display: "flex", flexDirection: "column", gap: "0.25rem" }}>
               {subs.map((sub) => (
                 <button
+                  data-testid={`form-submission-${sub.id}`}
                   key={sub.id}
                   onClick={() => {
                     setSelected(sub.id);
@@ -205,6 +208,7 @@ export default function FormInboxPage({ params }: { params: Promise<{ name: stri
                 <div style={{ marginTop: "1.25rem", display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
                   {selectedSub.status !== "archived" && (
                     <button
+                      data-testid="form-submission-archive"
                       onClick={() => archive(selectedSub.id)}
                       style={{ fontSize: "0.7rem", padding: "0.3rem 0.7rem", borderRadius: 4, border: "1px solid var(--border)", background: "var(--card)", color: "var(--foreground)", cursor: "pointer" }}
                     >
@@ -215,12 +219,14 @@ export default function FormInboxPage({ params }: { params: Promise<{ name: stri
                     <>
                       <span style={{ fontSize: "0.65rem", color: "var(--destructive)", fontWeight: 500, padding: "0 2px", alignSelf: "center" }}>Delete?</span>
                       <button
+                        data-testid="form-submission-delete-confirm"
                         onClick={() => deleteSub(selectedSub.id)}
                         style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "none", background: "var(--destructive)", color: "#fff", cursor: "pointer", lineHeight: 1 }}
                       >
                         Yes
                       </button>
                       <button
+                        data-testid="form-submission-delete-cancel"
                         onClick={() => setConfirmDelete(null)}
                         style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "1px solid var(--border)", background: "transparent", color: "var(--foreground)", cursor: "pointer", lineHeight: 1 }}
                       >
@@ -229,6 +235,7 @@ export default function FormInboxPage({ params }: { params: Promise<{ name: stri
                     </>
                   ) : (
                     <button
+                      data-testid="form-submission-delete"
                       onClick={() => setConfirmDelete(selectedSub.id)}
                       style={{ fontSize: "0.7rem", padding: "0.3rem 0.7rem", borderRadius: 4, border: "1px solid var(--destructive)", background: "transparent", color: "var(--destructive)", cursor: "pointer" }}
                     >
diff --git a/packages/cms-admin/src/app/admin/(workspace)/forms/builder/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/forms/builder/page.tsx
index 0c512ef13..d98018d4b 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/forms/builder/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/forms/builder/page.tsx
@@ -152,6 +152,7 @@ export default function FormBuilderPage() {
           <div>
             <label style={{ fontSize: "0.75rem", fontWeight: 600, display: "block", marginBottom: "0.25rem" }}>Form ID</label>
             <input
+              data-testid="form-builder-name-input"
               value={name}
               onChange={(e) => setName(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ""))}
               placeholder="contact"
@@ -162,7 +163,7 @@ export default function FormBuilderPage() {
           </div>
           <div>
             <label style={{ fontSize: "0.75rem", fontWeight: 600, display: "block", marginBottom: "0.25rem" }}>Label</label>
-            <input value={label} onChange={(e) => setLabel(e.target.value)} placeholder="Contact Form" style={inputStyle} />
+            <input data-testid="form-builder-label-input" value={label} onChange={(e) => setLabel(e.target.value)} placeholder="Contact Form" style={inputStyle} />
           </div>
         </div>
 
@@ -173,22 +174,22 @@ export default function FormBuilderPage() {
             {fields.map((f, idx) => (
               <div key={idx} style={{ display: "flex", gap: "0.5rem", alignItems: "center", padding: "0.5rem 0.65rem", border: "1px solid var(--border)", borderRadius: 6, background: "var(--card)" }}>
                 <GripVertical size={14} style={{ color: "var(--muted-foreground)", flexShrink: 0, cursor: "grab" }} />
-                <input value={f.label} onChange={(e) => updateField(idx, { label: e.target.value })} placeholder="Label" style={{ ...inputStyle, flex: "1 1 120px" }} />
-                <input value={f.name} onChange={(e) => updateField(idx, { name: e.target.value })} placeholder="field_name" style={{ ...inputStyle, flex: "0 1 120px", fontFamily: "var(--font-mono, monospace)", fontSize: "0.78rem" }} />
-                <select value={f.type} onChange={(e) => updateField(idx, { type: e.target.value })} style={{ ...inputStyle, flex: "0 0 100px" }}>
+                <input data-testid={`form-field-label-${idx}`} value={f.label} onChange={(e) => updateField(idx, { label: e.target.value })} placeholder="Label" style={{ ...inputStyle, flex: "1 1 120px" }} />
+                <input data-testid={`form-field-name-${idx}`} value={f.name} onChange={(e) => updateField(idx, { name: e.target.value })} placeholder="field_name" style={{ ...inputStyle, flex: "0 1 120px", fontFamily: "var(--font-mono, monospace)", fontSize: "0.78rem" }} />
+                <select data-testid={`form-field-type-${idx}`} value={f.type} onChange={(e) => updateField(idx, { type: e.target.value })} style={{ ...inputStyle, flex: "0 0 100px" }}>
                   {FIELD_TYPES.map((t) => <option key={t.value} value={t.value}>{t.label}</option>)}
                 </select>
                 <label style={{ display: "flex", alignItems: "center", gap: "0.3rem", fontSize: "0.75rem", whiteSpace: "nowrap", cursor: "pointer" }}>
-                  <input type="checkbox" checked={f.required} onChange={(e) => updateField(idx, { required: e.target.checked })} />
+                  <input data-testid={`form-field-required-${idx}`} type="checkbox" checked={f.required} onChange={(e) => updateField(idx, { required: e.target.checked })} />
                   Req
                 </label>
-                <button onClick={() => removeField(idx)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--destructive)", padding: 4 }}>
+                <button data-testid={`form-field-delete-${idx}`} onClick={() => removeField(idx)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--destructive)", padding: 4 }}>
                   <Trash2 size={14} />
                 </button>
               </div>
             ))}
           </div>
-          <button onClick={addField} style={{ marginTop: "0.5rem", display: "inline-flex", alignItems: "center", gap: "0.3rem", fontSize: "0.78rem", padding: "0.35rem 0.7rem", borderRadius: 5, border: "1px solid var(--border)", background: "var(--card)", color: "var(--foreground)", cursor: "pointer" }}>
+          <button data-testid="form-add-field-button" onClick={addField} style={{ marginTop: "0.5rem", display: "inline-flex", alignItems: "center", gap: "0.3rem", fontSize: "0.78rem", padding: "0.35rem 0.7rem", borderRadius: 5, border: "1px solid var(--border)", background: "var(--card)", color: "var(--foreground)", cursor: "pointer" }}>
             <Plus size={14} /> Add field
           </button>
         </div>
@@ -196,39 +197,40 @@ export default function FormBuilderPage() {
         {/* Success message */}
         <div>
           <label style={{ fontSize: "0.75rem", fontWeight: 600, display: "block", marginBottom: "0.25rem" }}>Success message</label>
-          <input value={successMessage} onChange={(e) => setSuccessMessage(e.target.value)} style={inputStyle} />
+          <input data-testid="form-builder-success-message" value={successMessage} onChange={(e) => setSuccessMessage(e.target.value)} style={inputStyle} />
         </div>
 
         {/* Notifications */}
         <div>
           <label style={{ fontSize: "0.75rem", fontWeight: 600, display: "block", marginBottom: "0.25rem" }}>Notification emails (comma-separated)</label>
-          <input value={notifyEmails} onChange={(e) => setNotifyEmails(e.target.value)} placeholder="admin@example.com" style={inputStyle} />
+          <input data-testid="form-builder-notify-emails" value={notifyEmails} onChange={(e) => setNotifyEmails(e.target.value)} placeholder="admin@example.com" style={inputStyle} />
         </div>
 
         {/* Auto-reply */}
         <div style={{ border: "1px solid var(--border)", borderRadius: 8, padding: "1rem" }}>
           <label style={{ display: "flex", alignItems: "center", gap: "0.4rem", fontSize: "0.8rem", fontWeight: 600, cursor: "pointer" }}>
-            <input type="checkbox" checked={autoReplyEnabled} onChange={(e) => setAutoReplyEnabled(e.target.checked)} />
+            <input data-testid="form-builder-autoreply-toggle" type="checkbox" checked={autoReplyEnabled} onChange={(e) => setAutoReplyEnabled(e.target.checked)} />
             Send auto-reply to submitter
           </label>
           {autoReplyEnabled && (
             <div style={{ marginTop: "0.75rem", display: "flex", flexDirection: "column", gap: "0.5rem" }}>
               <div>
                 <label style={{ fontSize: "0.7rem", color: "var(--muted-foreground)" }}>Subject</label>
-                <input value={autoReplySubject} onChange={(e) => setAutoReplySubject(e.target.value)} style={inputStyle} />
+                <input data-testid="form-builder-autoreply-subject" value={autoReplySubject} onChange={(e) => setAutoReplySubject(e.target.value)} style={inputStyle} />
               </div>
               <div>
                 <label style={{ fontSize: "0.7rem", color: "var(--muted-foreground)" }}>Body (supports {"{{fieldName}}"} placeholders)</label>
-                <textarea value={autoReplyBody} onChange={(e) => setAutoReplyBody(e.target.value)} rows={4} style={{ ...inputStyle, resize: "vertical" }} />
+                <textarea data-testid="form-builder-autoreply-body" value={autoReplyBody} onChange={(e) => setAutoReplyBody(e.target.value)} rows={4} style={{ ...inputStyle, resize: "vertical" }} />
               </div>
             </div>
           )}
         </div>
 
         {/* Actions */}
-        {error && <p style={{ fontSize: "0.8rem", color: "var(--destructive)" }}>{error}</p>}
+        {error && <p data-testid="form-builder-error" style={{ fontSize: "0.8rem", color: "var(--destructive)" }}>{error}</p>}
         <div style={{ display: "flex", gap: "0.5rem" }}>
           <button
+            data-testid="form-builder-save-button"
             onClick={handleSave}
             disabled={saving}
             style={{
@@ -240,6 +242,7 @@ export default function FormBuilderPage() {
             {saving ? "Saving…" : isEdit ? "Update form" : "Create form"}
           </button>
           <button
+            data-testid="form-builder-cancel-button"
             onClick={() => router.push("/admin/forms")}
             style={{
               padding: "0.5rem 1.25rem", borderRadius: 6,
diff --git a/packages/cms-admin/src/app/admin/(workspace)/forms/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/forms/page.tsx
index 468cac7c3..20a5cbf99 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/forms/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/forms/page.tsx
@@ -27,7 +27,7 @@ export default function FormsListPage() {
   }, []);
 
   return (
-    <>
+    <div data-testid="forms-root">
       <ActionBar>
         <ActionBarBreadcrumb items={["Forms"]} />
         <Link
@@ -110,6 +110,6 @@ export default function FormsListPage() {
           </div>
         )}
       </div>
-    </>
+    </div>
   );
 }
diff --git a/packages/cms-admin/src/app/admin/(workspace)/interactives/[id]/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/interactives/[id]/page.tsx
index e5be499c1..207c5ec66 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/interactives/[id]/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/interactives/[id]/page.tsx
@@ -559,6 +559,7 @@ export default function InteractiveDetailPage() {
             {siteLocales.length > 1 && (detail.locale || defaultLocale) && (
               <div style={{ position: "relative" }}>
                 <button
+                  data-testid="interactive-locale-selector"
                   type="button"
                   onClick={() => siblings.length > 0 ? setLocaleDropdownOpen(o => !o) : undefined}
                   title={siblings.length > 0 ? "Switch between translations" : `Language: ${(detail.locale || defaultLocale).toUpperCase()}`}
@@ -790,6 +791,7 @@ export default function InteractiveDetailPage() {
           ))}
           {siblings.length > 0 && (
             <button
+              data-testid="interactive-side-by-side-toggle"
               type="button"
               onClick={() => { const v = !sideBySide; setSideBySide(v); try { localStorage.setItem("cms-side-by-side", v ? "1" : "0"); } catch {} }}
               style={{
@@ -813,6 +815,7 @@ export default function InteractiveDetailPage() {
             if (available.length === 0) return null;
             return (
               <button
+                data-testid="interactive-add-translation"
                 type="button"
                 disabled={translating}
                 onClick={async () => {
@@ -870,7 +873,7 @@ export default function InteractiveDetailPage() {
         }}>
           <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0.75rem 1rem", borderBottom: "1px solid var(--border)" }}>
             <span style={{ fontWeight: 600, fontSize: "0.875rem" }}>Properties</span>
-            <button type="button" onClick={() => setPropertiesOpen(false)} style={{ background: "transparent", border: "none", cursor: "pointer", color: "var(--muted-foreground)", fontSize: "1.1rem", lineHeight: 1 }}>×</button>
+            <button data-testid="interactive-properties-close" type="button" onClick={() => setPropertiesOpen(false)} style={{ background: "transparent", border: "none", cursor: "pointer", color: "var(--muted-foreground)", fontSize: "1.1rem", lineHeight: 1 }}>×</button>
           </div>
 
           <div style={{ flex: 1, overflowY: "auto", padding: "1rem", display: "flex", flexDirection: "column", gap: "1.25rem" }}>
@@ -885,6 +888,7 @@ export default function InteractiveDetailPage() {
               <p style={labelStyle}>Name</p>
               <div style={{ display: "flex", gap: "0.5rem" }}>
                 <input
+                  data-testid="interactive-properties-name-input"
                   type="text"
                   value={editName}
                   onChange={(e) => setEditName(e.target.value)}
@@ -898,6 +902,7 @@ export default function InteractiveDetailPage() {
                 />
                 {editName !== detail.name && (
                   <button
+                    data-testid="interactive-properties-name-save"
                     type="button"
                     onClick={() => renameTo(editName)}
                     style={{
diff --git a/packages/cms-admin/src/app/admin/(workspace)/interactives/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/interactives/page.tsx
index 42be4d5b0..e410e4caf 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/interactives/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/interactives/page.tsx
@@ -295,6 +295,7 @@ export default function InteractivesPage() {
   }
 
   return (
+    <div data-testid="interactives-root">
     <fieldset disabled={readOnly} style={{ border: "none", padding: 0, margin: 0 }}>
     <div
       className="flex flex-col"
@@ -309,6 +310,7 @@ export default function InteractivesPage() {
           <div style={{ display: "flex", border: "1px solid var(--border)", borderRadius: "6px", overflow: "hidden" }}>
             {(["grid", "list"] as ViewMode[]).map((v) => (
               <button
+                data-testid={`interactives-view-toggle-${v}`}
                 key={v}
                 type="button"
                 onClick={() => setView(v)}
@@ -326,6 +328,7 @@ export default function InteractivesPage() {
           {/* Create with AI button */}
           {!readOnly && (
             <button
+              data-testid="interactives-create-ai-button"
               type="button"
               onClick={() => setAiModalOpen(true)}
               className="flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-md border border-border bg-card text-foreground hover:bg-accent transition-colors"
@@ -338,6 +341,7 @@ export default function InteractivesPage() {
           {/* Upload button */}
           {!readOnly && (
             <button
+              data-testid="interactives-upload-button"
               type="button"
               onClick={() => inputRef.current?.click()}
               disabled={uploading}
@@ -356,6 +360,7 @@ export default function InteractivesPage() {
         <ActionBarBreadcrumb items={["Interactives"]} /></ActionBar>
 
       <input
+        data-testid="interactives-file-input"
         ref={inputRef}
         type="file"
         accept=".html,.htm"
@@ -370,6 +375,7 @@ export default function InteractivesPage() {
           <div style={{ position: "relative", flex: 1, minWidth: "180px" }}>
             <Search style={{ position: "absolute", left: "0.625rem", top: "50%", transform: "translateY(-50%)", width: "0.8rem", height: "0.8rem", color: "var(--muted-foreground)", pointerEvents: "none" }} />
             <input
+              data-testid="interactives-search-input"
               type="text"
               value={query}
               onChange={(e) => setQuery(e.target.value)}
@@ -384,6 +390,7 @@ export default function InteractivesPage() {
               { value: "draft" as const, label: "Draft", count: counts.draft, color: "rgb(234 179 8)" },
             ] as const).filter((o) => o.value === "all" || o.count > 0).map((opt) => (
               <button
+                data-testid={`interactives-status-filter-${opt.value}`}
                 key={opt.value}
                 type="button"
                 onClick={() => setStatusFilter(opt.value)}
@@ -411,7 +418,7 @@ export default function InteractivesPage() {
           <Zap style={{ width: "2.5rem", height: "2.5rem", opacity: 0.3 }} />
           <p style={{ fontSize: "0.875rem" }}>{query ? `No interactives matching "${query}"` : "No interactives yet"}</p>
           {!query && (
-            <button type="button" onClick={() => inputRef.current?.click()} style={{ fontSize: "0.8rem", padding: "0.5rem 1rem", borderRadius: "6px", border: "1px solid var(--border)", background: "transparent", cursor: "pointer" }}>
+            <button data-testid="interactives-empty-upload-button" type="button" onClick={() => inputRef.current?.click()} style={{ fontSize: "0.8rem", padding: "0.5rem 1rem", borderRadius: "6px", border: "1px solid var(--border)", background: "transparent", cursor: "pointer" }}>
               Upload HTML files or drag &amp; drop
             </button>
           )}
@@ -421,6 +428,7 @@ export default function InteractivesPage() {
         <div style={{ padding: "0 2rem 2rem", display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: "1rem" }}>
           {filtered.map((item) => (
             <div
+              data-testid={`interactives-grid-item-${item.id}`}
               key={item.id}
               className="group relative rounded-lg border border-border bg-card"
               style={{ cursor: "pointer", transition: "border-color 150ms" }}
@@ -446,7 +454,7 @@ export default function InteractivesPage() {
                     {item.locale && <span style={{ fontSize: "0.6rem", fontWeight: 600, padding: "0 4px", borderRadius: "3px", background: "rgba(247,187,46,0.12)", color: "#F7BB2E" }}>{item.locale.toUpperCase()}</span>}
                   </p>
                 </div>
-                <div onClick={(e) => e.stopPropagation()}>
+                <div data-testid={`interactives-item-menu-${item.id}`} onClick={(e) => e.stopPropagation()}>
                   <ItemDropdown item={item} onEdit={() => router.push(`/admin/interactives/${item.id}`)} onTogglePublish={() => togglePublish(item)} onClone={() => cloneItem(item)} onTrash={() => setConfirmTrash(item)} />
                 </div>
               </div>
@@ -462,7 +470,7 @@ export default function InteractivesPage() {
               <tr>
                 {([["Name", "name"], ["Status", "status"], ["Size", "size"], ["Updated", "updatedAt"]] as const).map(([label, sk]) => (
                   <th key={sk} style={thStyle}>
-                    <button
+                    <button data-testid="interactives-list-sort-button"
                       type="button"
                       onClick={() => toggleSort(sk)}
                       style={{ display: "inline-flex", alignItems: "center", gap: "0.25rem", background: "none", border: "none", cursor: "pointer", padding: 0, font: "inherit", color: sortKey === sk ? "var(--foreground)" : "inherit", fontWeight: sortKey === sk ? 600 : 500 }}
@@ -478,6 +486,7 @@ export default function InteractivesPage() {
             <tbody>
               {filtered.map((item, i) => (
                 <tr
+                  data-testid={`interactives-list-item-${item.id}`}
                   key={item.id}
                   style={{ borderTop: i === 0 ? "none" : "1px solid var(--border)", transition: "background 120ms", cursor: "pointer" }}
                   className="hover:bg-secondary/50"
@@ -506,7 +515,7 @@ export default function InteractivesPage() {
                   <td style={{ padding: "0.625rem 0.75rem", fontSize: "0.8rem", color: "var(--muted-foreground)", whiteSpace: "nowrap" }}>
                     {formatDate(item.updatedAt)}
                   </td>
-                  <td style={{ padding: "0.625rem 0.5rem", textAlign: "right" }} onClick={(e) => e.stopPropagation()}>
+                  <td data-testid={`interactives-list-menu-${item.id}`} style={{ padding: "0.625rem 0.5rem", textAlign: "right" }} onClick={(e) => e.stopPropagation()}>
                     <ItemDropdown item={item} onEdit={() => router.push(`/admin/interactives/${item.id}`)} onTogglePublish={() => togglePublish(item)} onClone={() => cloneItem(item)} onTrash={() => setConfirmTrash(item)} />
                   </td>
                 </tr>
@@ -519,7 +528,7 @@ export default function InteractivesPage() {
 
       {/* Trash confirm dialog */}
       {confirmTrash && (
-        <div style={{ position: "fixed", inset: 0, zIndex: 100, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(0,0,0,0.6)", backdropFilter: "blur(4px)" }}>
+        <div data-testid="interactives-trash-dialog" style={{ position: "fixed", inset: 0, zIndex: 100, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(0,0,0,0.6)", backdropFilter: "blur(4px)" }}>
           <div style={{ background: "var(--card)", border: "1px solid rgb(239 68 68 / 0.3)", borderRadius: "12px", padding: "1.5rem", maxWidth: "420px", width: "90%", display: "flex", flexDirection: "column", gap: "1rem" }}>
             <div style={{ display: "flex", alignItems: "flex-start", gap: "0.75rem" }}>
               <AlertTriangle style={{ width: "1.25rem", height: "1.25rem", color: "rgb(239 68 68)", flexShrink: 0, marginTop: "1px" }} />
@@ -542,6 +551,7 @@ export default function InteractivesPage() {
       {/* Create with AI modal */}
       {aiModalOpen && (
         <div
+          data-testid="interactives-ai-modal"
           style={{ position: "fixed", inset: 0, zIndex: 100, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(0,0,0,0.6)", backdropFilter: "blur(4px)" }}
           onClick={(e) => { if (e.target === e.currentTarget && !aiGenerating) setAiModalOpen(false); }}
         >
@@ -554,6 +564,7 @@ export default function InteractivesPage() {
               Describe the interactive component you want. AI will generate a complete standalone HTML file.
             </p>
             <textarea
+              data-testid="interactives-ai-prompt-textarea"
               ref={aiTextareaRef}
               value={aiPrompt}
               onChange={(e) => setAiPrompt(e.target.value)}
@@ -578,6 +589,7 @@ export default function InteractivesPage() {
                   "Timeline of events with scroll animation",
                 ].map((s) => (
                   <button
+                    data-testid={`interactives-ai-suggestion-${s.replace(/\s+/g, '-').toLowerCase()}`}
                     key={s}
                     type="button"
                     onClick={() => { setAiPrompt(s); aiTextareaRef.current?.focus(); }}
@@ -609,6 +621,7 @@ export default function InteractivesPage() {
       )}
     </div>
     </fieldset>
+    </div>
   );
 }
 
@@ -637,7 +650,7 @@ function ActionsMenu({ item, onEdit, onTogglePublish, onClone, onTrash }: {
   item: InteractiveMeta; onEdit: () => void; onTogglePublish: () => void; onClone: () => void; onTrash: () => void;
 }) {
   return (
-    <div
+    <div data-testid="interactives-item-actions"
       style={{ position: "absolute", top: "0.5rem", right: "0.5rem", opacity: 0, transition: "opacity 150ms" }}
       className="group-hover:!opacity-100"
       onClick={(e) => e.stopPropagation()}
diff --git a/packages/cms-admin/src/app/admin/(workspace)/lighthouse/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/lighthouse/page.tsx
index ee5ea44a4..8d92378a7 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/lighthouse/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/lighthouse/page.tsx
@@ -97,7 +97,7 @@ export default function LighthousePage() {
   }, [mobile, desktop, history]);
 
   return (
-    <>
+    <div data-testid="lighthouse-root">
       <TabTitle value="Lighthouse" />
       <ActionBar
         helpArticleId="lighthouse-intro"
@@ -105,6 +105,7 @@ export default function LighthousePage() {
           <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
           {hasResults && (
             <button
+              data-testid="lighthouse-export-button"
               onClick={handleExport}
               title="Download a Markdown report ready to paste into Claude/ChatGPT or hand to a developer"
               style={{
@@ -122,6 +123,7 @@ export default function LighthousePage() {
           )}
           {hasIssues && (
             <button
+              data-testid="lighthouse-optimize-button"
               onClick={handleOptimize}
               disabled={optimizing}
               style={{
@@ -139,6 +141,7 @@ export default function LighthousePage() {
             </button>
           )}
           <button
+            data-testid="lighthouse-scan-button"
             onClick={handleScan}
             disabled={scanning}
             style={{
@@ -240,7 +243,7 @@ export default function LighthousePage() {
             <div style={{ fontSize: "0.78rem", color: "var(--muted-foreground)", marginBottom: "1rem" }}>
               Run your first scan to see performance, accessibility, SEO, and best practices — for both mobile and desktop.
             </div>
-            <button onClick={handleScan} disabled={scanning} style={{
+            <button data-testid="lighthouse-first-scan-button" onClick={handleScan} disabled={scanning} style={{
               padding: "0.5rem 1.25rem", borderRadius: 6, border: "none",
               background: "#F7BB2E", color: "#0D0D0D", fontSize: "0.82rem",
               fontWeight: 600, cursor: "pointer",
@@ -252,7 +255,7 @@ export default function LighthousePage() {
       </div>
 
       <style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>
-    </>
+    </div>
   );
 }
 
@@ -505,7 +508,7 @@ function OpportunitiesSection({ mobile, desktop }: { mobile: LighthouseResult |
     <div style={{ marginBottom: "2rem" }}>
       {opps.length > 0 && (
         <div style={{ marginBottom: "1rem" }}>
-          <button onClick={() => setExpandOpps(!expandOpps)} style={{
+          <button data-testid="lighthouse-opportunities-toggle" onClick={() => setExpandOpps(!expandOpps)} style={{
             display: "flex", alignItems: "center", gap: "0.3rem", background: "none", border: "none",
             cursor: "pointer", color: "var(--foreground)", fontSize: "0.82rem", fontWeight: 600, padding: 0, marginBottom: "0.5rem",
           }}>
@@ -540,7 +543,7 @@ function OpportunitiesSection({ mobile, desktop }: { mobile: LighthouseResult |
 
       {diags.length > 0 && (
         <div>
-          <button onClick={() => setExpandDiag(!expandDiag)} style={{
+          <button data-testid="lighthouse-diagnostics-toggle" onClick={() => setExpandDiag(!expandDiag)} style={{
             display: "flex", alignItems: "center", gap: "0.3rem", background: "none", border: "none",
             cursor: "pointer", color: "var(--foreground)", fontSize: "0.82rem", fontWeight: 600, padding: 0, marginBottom: "0.5rem",
           }}>
@@ -651,13 +654,13 @@ function PsiKeySetup() {
         Get a free key (25,000 scans/day):
       </div>
       <ol style={{ margin: "0 0 0.5rem 1.25rem", padding: 0, color: "var(--muted-foreground)", lineHeight: 1.7 }}>
-        <li><a href="https://console.cloud.google.com/apis/library/pagespeedonline.googleapis.com" target="_blank" rel="noopener" style={{ color: "#F7BB2E" }}>Enable PageSpeed Insights API</a></li>
-        <li><a href="https://console.cloud.google.com/apis/credentials" target="_blank" rel="noopener" style={{ color: "#F7BB2E" }}>Create API Key</a></li>
+        <li><a data-testid="lighthouse-setup-psi-api-link" href="https://console.cloud.google.com/apis/library/pagespeedonline.googleapis.com" target="_blank" rel="noopener" style={{ color: "#F7BB2E" }}>Enable PageSpeed Insights API</a></li>
+        <li><a data-testid="lighthouse-setup-api-credentials-link" href="https://console.cloud.google.com/apis/credentials" target="_blank" rel="noopener" style={{ color: "#F7BB2E" }}>Create API Key</a></li>
         <li>Paste below</li>
       </ol>
       <div style={{ display: "flex", gap: "0.4rem" }}>
-        <input type="password" value={key} onChange={(e) => setKey(e.target.value)} placeholder="AIzaSy..." style={{ flex: 1, padding: "0.35rem 0.6rem", borderRadius: 5, border: "1px solid var(--border)", background: "var(--background)", fontSize: "0.78rem", color: "var(--foreground)", outline: "none" }} />
-        <button onClick={handleSave} disabled={saving || !key.trim() || saved} style={{ padding: "0.35rem 0.75rem", borderRadius: 5, border: "none", background: saved ? "#0cce6b" : "#F7BB2E", color: "#0D0D0D", fontSize: "0.75rem", fontWeight: 600, cursor: saving ? "wait" : "pointer", opacity: saving || !key.trim() ? 0.6 : 1 }}>
+        <input data-testid="lighthouse-api-key-input" type="password" value={key} onChange={(e) => setKey(e.target.value)} placeholder="AIzaSy..." style={{ flex: 1, padding: "0.35rem 0.6rem", borderRadius: 5, border: "1px solid var(--border)", background: "var(--background)", fontSize: "0.78rem", color: "var(--foreground)", outline: "none" }} />
+        <button data-testid="lighthouse-api-key-save-button" onClick={handleSave} disabled={saving || !key.trim() || saved} style={{ padding: "0.35rem 0.75rem", borderRadius: 5, border: "none", background: saved ? "#0cce6b" : "#F7BB2E", color: "#0D0D0D", fontSize: "0.75rem", fontWeight: 600, cursor: saving ? "wait" : "pointer", opacity: saving || !key.trim() ? 0.6 : 1 }}>
           {saved ? "Saved ✓" : "Save key"}
         </button>
       </div>
diff --git a/packages/cms-admin/src/app/admin/(workspace)/lighthouse/page.tsx.bak b/packages/cms-admin/src/app/admin/(workspace)/lighthouse/page.tsx.bak
new file mode 100644
index 000000000..bdc61f16c
--- /dev/null
+++ b/packages/cms-admin/src/app/admin/(workspace)/lighthouse/page.tsx.bak
@@ -0,0 +1,672 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { Gauge, RefreshCw, Monitor, Smartphone, ChevronDown, ChevronRight, TrendingDown, TrendingUp, Sparkles, Check, Wrench, Download } from "lucide-react";
+import { ActionBar, ActionBarBreadcrumb } from "@/components/action-bar";
+import { TabTitle } from "@/lib/tabs-context";
+import { scoreColor, SCORE_COLOR_MAP, type LighthouseResult, type ScoreHistoryEntry } from "@/lib/lighthouse/types";
+
+export default function LighthousePage() {
+  const [mobile, setMobile] = useState<LighthouseResult | null>(null);
+  const [desktop, setDesktop] = useState<LighthouseResult | null>(null);
+  const [history, setHistory] = useState<ScoreHistoryEntry[]>([]);
+  const [scanning, setScanning] = useState(false);
+  const [optimizing, setOptimizing] = useState(false);
+  const [optimizeResult, setOptimizeResult] = useState<{ fixes: Array<{ id: string; title: string; status: "fixed" | "manual"; description: string }>; fixedCount: number; manualCount: number } | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    // Latest now returns BOTH strategies with full payloads (opportunities,
+    // diagnostics, CWV) so the Export-report has complete data for both.
+    fetch("/api/admin/lighthouse/latest").then((r) => r.json()).then((d) => {
+      if (d?.mobile) setMobile(d.mobile);
+      if (d?.desktop) setDesktop(d.desktop);
+    }).catch(() => {});
+    fetch("/api/admin/lighthouse/history").then((r) => r.json()).then((h) => {
+      setHistory(h);
+      // Score-only fallback if /latest returned nothing for one strategy.
+      // History rows don't carry opportunities/diagnostics, so this is
+      // only enough to populate the small Score card — Export will note
+      // the gap with "—" for the missing fields.
+      const sorted = [...h].reverse();
+      const lastMobile = sorted.find((e: ScoreHistoryEntry) => e.strategy === "mobile");
+      const lastDesktop = sorted.find((e: ScoreHistoryEntry) => e.strategy === "desktop");
+      if (lastMobile) setMobile((prev) => prev ?? { scores: lastMobile.scores, strategy: "mobile" } as any);
+      if (lastDesktop) setDesktop((prev) => prev ?? { scores: lastDesktop.scores, strategy: "desktop" } as any);
+    }).catch(() => {});
+  }, []);
+
+  const handleScan = useCallback(async () => {
+    setScanning(true);
+    setError(null);
+    try {
+      const res = await fetch("/api/admin/lighthouse/scan", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({}),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error);
+      setMobile(data.mobile);
+      setDesktop(data.desktop);
+      const histRes = await fetch("/api/admin/lighthouse/history");
+      setHistory(await histRes.json());
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Scan failed");
+    } finally {
+      setScanning(false);
+    }
+  }, []);
+
+  const handleOptimize = useCallback(async () => {
+    setOptimizing(true);
+    setOptimizeResult(null);
+    try {
+      const res = await fetch("/api/admin/lighthouse/optimize", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ mobile, desktop }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error);
+      setOptimizeResult(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Optimize failed");
+    } finally {
+      setOptimizing(false);
+    }
+  }, [mobile, desktop]);
+
+  const hasResults = !!(mobile?.scores || desktop?.scores);
+  const hasIssues = (mobile?.opportunities?.length ?? 0) + (mobile?.diagnostics?.length ?? 0) + (desktop?.opportunities?.length ?? 0) + (desktop?.diagnostics?.length ?? 0) > 0;
+
+  const handleExport = useCallback(() => {
+    const md = buildLighthouseReport(mobile, desktop, history);
+    const url = mobile?.url || desktop?.url || "site";
+    const host = (() => { try { return new URL(url).hostname.replace(/^www\./, ""); } catch { return "site"; } })();
+    const stamp = new Date().toISOString().slice(0, 10);
+    const blob = new Blob([md], { type: "text/markdown;charset=utf-8" });
+    const dlUrl = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = dlUrl;
+    a.download = `lighthouse-${host}-${stamp}.md`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(dlUrl);
+  }, [mobile, desktop, history]);
+
+  return (
+    <>
+      <TabTitle value="Lighthouse" />
+      <ActionBar
+        helpArticleId="lighthouse-intro"
+        actions={
+          <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+          {hasResults && (
+            <button
+              data-testid="lighthouse-export-button"
+              onClick={handleExport}
+              title="Download a Markdown report ready to paste into Claude/ChatGPT or hand to a developer"
+              style={{
+                height: 28, display: "inline-flex", alignItems: "center", gap: "0.35rem",
+                padding: "0 0.75rem", borderRadius: 6,
+                border: "1px solid var(--border)", background: "transparent",
+                color: "var(--foreground)",
+                fontSize: "0.75rem", fontWeight: 500,
+                cursor: "pointer",
+              }}
+            >
+              <Download style={{ width: 13, height: 13 }} />
+              Export report
+            </button>
+          )}
+          {hasIssues && (
+            <button
+              data-testid="lighthouse-optimize-button"
+              onClick={handleOptimize}
+              disabled={optimizing}
+              style={{
+                height: 28, display: "inline-flex", alignItems: "center", gap: "0.35rem",
+                padding: "0 0.75rem", borderRadius: 6,
+                border: "1px solid var(--border)", background: "transparent",
+                color: "var(--foreground)",
+                fontSize: "0.75rem", fontWeight: 500,
+                cursor: optimizing ? "wait" : "pointer",
+                opacity: optimizing ? 0.7 : 1,
+              }}
+            >
+              <Sparkles style={{ width: 13, height: 13, color: "#F7BB2E" }} />
+              {optimizing ? "Optimizing..." : "Optimize"}
+            </button>
+          )}
+          <button
+            data-testid="lighthouse-scan-button"
+            onClick={handleScan}
+            disabled={scanning}
+            style={{
+              height: 28, display: "inline-flex", alignItems: "center", gap: "0.35rem",
+              padding: "0 0.75rem", borderRadius: 6, border: "none",
+              background: "#F7BB2E", color: "#0D0D0D",
+              fontSize: "0.75rem", fontWeight: 600,
+              cursor: scanning ? "wait" : "pointer",
+              opacity: scanning ? 0.7 : 1,
+            }}
+          >
+            <RefreshCw style={{ width: 13, height: 13, animation: scanning ? "spin 1s linear infinite" : "none" }} />
+            {scanning ? "Scanning both..." : "Run Scan"}
+          </button>
+          </div>
+        }
+      >
+        <ActionBarBreadcrumb items={["Lighthouse"]} />
+      </ActionBar>
+
+      <div style={{ padding: "2rem", maxWidth: "72rem" }}>
+        {error && (
+          <div style={{
+            padding: "0.75rem 0.85rem", borderRadius: 6, marginBottom: "1.5rem",
+            background: "rgba(239,68,68,0.08)", border: "1px solid rgba(239,68,68,0.2)",
+            fontSize: "0.8rem", color: "#ef4444",
+          }}>
+            {error}
+            {error.includes("quota") && <PsiKeySetup />}
+          </div>
+        )}
+
+        {/* ── Side-by-side Score Cards ── */}
+        {hasResults ? (
+          <>
+            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1.5rem", marginBottom: "2rem" }}>
+              <StrategyCard label="Mobile" icon={<Smartphone style={{ width: 15, height: 15 }} />} result={mobile} history={history} strategy="mobile" />
+              <StrategyCard label="Desktop" icon={<Monitor style={{ width: 15, height: 15 }} />} result={desktop} history={history} strategy="desktop" />
+            </div>
+
+            {/* ── Optimize Results ── */}
+            {optimizeResult && (
+              <div style={{ marginBottom: "2rem", padding: "1rem", borderRadius: 10, border: "1px solid var(--border)", background: "var(--card)" }}>
+                <div style={{ fontSize: "0.82rem", fontWeight: 600, marginBottom: "0.75rem", display: "flex", alignItems: "center", gap: "0.4rem" }}>
+                  <Sparkles style={{ width: 15, height: 15, color: "#F7BB2E" }} />
+                  Optimization Report — {optimizeResult.fixedCount} fixed, {optimizeResult.manualCount} need manual attention
+                </div>
+                <div style={{ display: "flex", flexDirection: "column", gap: "0.35rem" }}>
+                  {optimizeResult.fixes.map((fix) => (
+                    <div key={fix.id} style={{
+                      padding: "0.5rem 0.75rem", borderRadius: 6, fontSize: "0.78rem",
+                      border: `1px solid ${fix.status === "fixed" ? "rgba(34,197,94,0.2)" : "rgba(250,180,50,0.2)"}`,
+                      background: fix.status === "fixed" ? "rgba(34,197,94,0.04)" : "rgba(250,180,50,0.04)",
+                    }}>
+                      <div style={{ display: "flex", alignItems: "center", gap: "0.4rem", marginBottom: "0.15rem" }}>
+                        {fix.status === "fixed"
+                          ? <Check style={{ width: 13, height: 13, color: "#22c55e" }} />
+                          : <Wrench style={{ width: 13, height: 13, color: "#ffa400" }} />}
+                        <span style={{ fontWeight: 600 }}>{fix.title}</span>
+                        <span style={{
+                          fontSize: "0.6rem", padding: "1px 5px", borderRadius: 3,
+                          background: fix.status === "fixed" ? "rgba(34,197,94,0.15)" : "rgba(250,180,50,0.15)",
+                          color: fix.status === "fixed" ? "#22c55e" : "#ffa400",
+                          fontWeight: 600,
+                        }}>
+                          {fix.status === "fixed" ? "AUTO-FIXED" : "MANUAL"}
+                        </span>
+                      </div>
+                      <div style={{ fontSize: "0.72rem", color: "var(--muted-foreground)", lineHeight: 1.5 }}>
+                        {fix.description}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* ── Combined Opportunities + Diagnostics ── */}
+            <OpportunitiesSection mobile={mobile} desktop={desktop} />
+
+            {/* ── Meta ── */}
+            {mobile && (
+              <div style={{ fontSize: "0.7rem", color: "var(--muted-foreground)", marginBottom: "2rem" }}>
+                {mobile.url} · PageSpeed Insights · {mobile.timestamp ? new Date(mobile.timestamp).toLocaleString() : ""}
+              </div>
+            )}
+
+            {/* ── Score History ── */}
+            {history.length > 1 && <HistoryTable history={history} />}
+          </>
+        ) : !scanning ? (
+          <div style={{
+            padding: "3rem", textAlign: "center",
+            border: "1px solid var(--border)", borderRadius: 10,
+            background: "var(--card)",
+          }}>
+            <Gauge style={{ width: 32, height: 32, color: "var(--muted-foreground)", margin: "0 auto 0.75rem" }} />
+            <div style={{ fontSize: "0.9rem", fontWeight: 600, marginBottom: "0.25rem" }}>No scans yet</div>
+            <div style={{ fontSize: "0.78rem", color: "var(--muted-foreground)", marginBottom: "1rem" }}>
+              Run your first scan to see performance, accessibility, SEO, and best practices — for both mobile and desktop.
+            </div>
+            <button data-testid="lighthouse-first-scan-button" onClick={handleScan} disabled={scanning} style={{
+              padding: "0.5rem 1.25rem", borderRadius: 6, border: "none",
+              background: "#F7BB2E", color: "#0D0D0D", fontSize: "0.82rem",
+              fontWeight: 600, cursor: "pointer",
+            }}>
+              Run first scan
+            </button>
+          </div>
+        ) : null}
+      </div>
+
+      <style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>
+    </>
+  );
+}
+
+// ── Report builder (AI- and dev-readable Markdown) ──
+
+function buildLighthouseReport(
+  mobile: LighthouseResult | null,
+  desktop: LighthouseResult | null,
+  history: ScoreHistoryEntry[],
+): string {
+  const primary = mobile ?? desktop;
+  const url = primary?.url ?? "(unknown)";
+  const generatedAt = new Date().toISOString();
+  const engine = primary?.engine ?? "psi";
+
+  const lines: string[] = [];
+  lines.push(`# Lighthouse report — ${url}`);
+  lines.push("");
+  lines.push(`- Generated: ${generatedAt}`);
+  lines.push(`- Engine: ${engine === "psi" ? "PageSpeed Insights" : "Lighthouse (local)"}`);
+  if (mobile?.timestamp) lines.push(`- Mobile scan: ${mobile.timestamp}`);
+  if (desktop?.timestamp) lines.push(`- Desktop scan: ${desktop.timestamp}`);
+  lines.push("");
+
+  // ── How to use this report (prompt for AI) ──
+  lines.push("## How to use this report");
+  lines.push("");
+  lines.push("Paste this file into Claude/ChatGPT/Cursor with a prompt like:");
+  lines.push("");
+  lines.push("> Below is the Lighthouse audit for my site. For each opportunity and diagnostic, propose a concrete code-level fix — file paths, exact changes, and the expected score impact. Prioritise items with the largest `savingsMs`/`savingsBytes` first. If you need code I haven't shown, ask.");
+  lines.push("");
+
+  // ── Scores ──
+  lines.push("## Scores");
+  lines.push("");
+  lines.push("| Category | Mobile | Desktop |");
+  lines.push("|---|---|---|");
+  const fmt = (n?: number) => (n === undefined || n === null ? "—" : String(n));
+  lines.push(`| Performance | ${fmt(mobile?.scores.performance)} | ${fmt(desktop?.scores.performance)} |`);
+  lines.push(`| Accessibility | ${fmt(mobile?.scores.accessibility)} | ${fmt(desktop?.scores.accessibility)} |`);
+  lines.push(`| Best practices | ${fmt(mobile?.scores.bestPractices)} | ${fmt(desktop?.scores.bestPractices)} |`);
+  lines.push(`| SEO | ${fmt(mobile?.scores.seo)} | ${fmt(desktop?.scores.seo)} |`);
+  lines.push("");
+  lines.push("> Scoring (Google official): 90–100 green · 50–89 orange · 0–49 red.");
+  lines.push("");
+
+  // ── Core Web Vitals ──
+  const cwvRow = (label: string, mob?: number, desk?: number, unit = "ms") => {
+    const m = mob === undefined ? "—" : `${mob.toFixed(label === "CLS" ? 2 : 0)}${unit === "ms" ? " ms" : ""}`;
+    const d = desk === undefined ? "—" : `${desk.toFixed(label === "CLS" ? 2 : 0)}${unit === "ms" ? " ms" : ""}`;
+    return `| ${label} | ${m} | ${d} |`;
+  };
+  if (mobile?.coreWebVitals || desktop?.coreWebVitals) {
+    lines.push("## Core Web Vitals (lab data)");
+    lines.push("");
+    lines.push("| Metric | Mobile | Desktop |");
+    lines.push("|---|---|---|");
+    lines.push(cwvRow("LCP", mobile?.coreWebVitals?.lcp, desktop?.coreWebVitals?.lcp));
+    lines.push(cwvRow("CLS", mobile?.coreWebVitals?.cls, desktop?.coreWebVitals?.cls, ""));
+    lines.push(cwvRow("INP", mobile?.coreWebVitals?.inp, desktop?.coreWebVitals?.inp));
+    lines.push(cwvRow("FCP", mobile?.coreWebVitals?.fcp, desktop?.coreWebVitals?.fcp));
+    lines.push(cwvRow("TTFB", mobile?.coreWebVitals?.ttfb, desktop?.coreWebVitals?.ttfb));
+    lines.push("");
+    lines.push("> Targets — LCP: <2500 ms · CLS: <0.10 · INP: <200 ms · FCP: <1800 ms · TTFB: <800 ms.");
+    lines.push("");
+  }
+
+  // ── Field data (real-user CrUX) ──
+  if (mobile?.fieldData || desktop?.fieldData) {
+    lines.push("## Field data (real users, CrUX 28-day p75)");
+    lines.push("");
+    const fd = (f?: { p75: number; category: string }) => (f ? `${f.p75} (${f.category})` : "—");
+    lines.push("| Metric | Mobile | Desktop |");
+    lines.push("|---|---|---|");
+    lines.push(`| LCP | ${fd(mobile?.fieldData?.lcp)} | ${fd(desktop?.fieldData?.lcp)} |`);
+    lines.push(`| CLS | ${fd(mobile?.fieldData?.cls)} | ${fd(desktop?.fieldData?.cls)} |`);
+    lines.push(`| INP | ${fd(mobile?.fieldData?.inp)} | ${fd(desktop?.fieldData?.inp)} |`);
+    lines.push("");
+  }
+
+  // ── Opportunities ──
+  const renderOppList = (label: string, result: LighthouseResult | null) => {
+    if (!result?.opportunities?.length) return;
+    const sorted = [...result.opportunities].sort((a, b) => (b.savingsMs ?? 0) - (a.savingsMs ?? 0));
+    lines.push(`### ${label} — ${sorted.length} opportunit${sorted.length === 1 ? "y" : "ies"}`);
+    lines.push("");
+    for (const o of sorted) {
+      const savings: string[] = [];
+      if (o.savingsMs) savings.push(`${o.savingsMs} ms`);
+      if (o.savingsBytes) savings.push(`${(o.savingsBytes / 1024).toFixed(0)} KB`);
+      const head = savings.length > 0 ? ` — saves ${savings.join(", ")}` : "";
+      lines.push(`- **${o.title}** \`${o.id}\`${head}`);
+      if (o.description) lines.push(`  ${o.description.replace(/\n+/g, " ").trim()}`);
+    }
+    lines.push("");
+  };
+  if ((mobile?.opportunities?.length ?? 0) + (desktop?.opportunities?.length ?? 0) > 0) {
+    lines.push("## Opportunities (impact-ordered)");
+    lines.push("");
+    renderOppList("Mobile", mobile);
+    renderOppList("Desktop", desktop);
+  }
+
+  // ── Diagnostics ──
+  const renderDiagList = (label: string, result: LighthouseResult | null) => {
+    if (!result?.diagnostics?.length) return;
+    lines.push(`### ${label} — ${result.diagnostics.length} diagnostic${result.diagnostics.length === 1 ? "" : "s"}`);
+    lines.push("");
+    for (const d of result.diagnostics) {
+      const value = d.displayValue ? ` — \`${d.displayValue}\`` : "";
+      lines.push(`- **${d.title}** \`${d.id}\`${value}`);
+      if (d.description) lines.push(`  ${d.description.replace(/\n+/g, " ").trim()}`);
+    }
+    lines.push("");
+  };
+  if ((mobile?.diagnostics?.length ?? 0) + (desktop?.diagnostics?.length ?? 0) > 0) {
+    lines.push("## Diagnostics");
+    lines.push("");
+    renderDiagList("Mobile", mobile);
+    renderDiagList("Desktop", desktop);
+  }
+
+  // ── Trend ──
+  if (history.length > 1) {
+    const last5 = history.slice(-5);
+    lines.push("## Recent trend");
+    lines.push("");
+    lines.push("| Date | Strategy | Perf | A11y | BP | SEO |");
+    lines.push("|---|---|---|---|---|---|");
+    for (const h of last5) {
+      const date = new Date(h.timestamp).toISOString().slice(0, 16).replace("T", " ");
+      lines.push(`| ${date} | ${h.strategy} | ${h.scores.performance} | ${h.scores.accessibility} | ${h.scores.bestPractices} | ${h.scores.seo} |`);
+    }
+    lines.push("");
+  }
+
+  lines.push("---");
+  lines.push("");
+  lines.push("Report generated by @webhouse/cms-admin Lighthouse module.");
+  lines.push("");
+  return lines.join("\n");
+}
+
+// ── Strategy Card (Mobile or Desktop) ──
+
+function StrategyCard({ label, icon, result, history, strategy }: {
+  label: string;
+  icon: React.ReactNode;
+  result: LighthouseResult | null;
+  history: ScoreHistoryEntry[];
+  strategy: "mobile" | "desktop";
+}) {
+  if (!result?.scores) {
+    return (
+      <div style={{ padding: "1.5rem", borderRadius: 10, border: "1px solid var(--border)", background: "var(--card)", opacity: 0.5, textAlign: "center" }}>
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: "0.35rem", fontSize: "0.78rem", fontWeight: 600, color: "var(--muted-foreground)" }}>
+          {icon} {label}
+        </div>
+        <div style={{ fontSize: "0.72rem", color: "var(--muted-foreground)", marginTop: "0.25rem" }}>No data yet</div>
+      </div>
+    );
+  }
+
+  const scores = result.scores;
+  const prevEntry = [...history].reverse().find((e, i) => e.strategy === strategy && i > 0);
+  const prevScores = prevEntry?.scores;
+
+  return (
+    <div style={{ padding: "1rem", borderRadius: 10, border: "1px solid var(--border)", background: "var(--card)" }}>
+      <div style={{ display: "flex", alignItems: "center", gap: "0.35rem", fontSize: "0.78rem", fontWeight: 600, marginBottom: "0.75rem", color: "var(--muted-foreground)" }}>
+        {icon} {label}
+      </div>
+
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "0.5rem", marginBottom: "0.75rem" }}>
+        {(["performance", "accessibility", "seo", "bestPractices"] as const).map((key) => {
+          const value = scores[key];
+          const color = SCORE_COLOR_MAP[scoreColor(value)];
+          const prev = prevScores?.[key];
+          const diff = prev ? value - prev : 0;
+          return (
+            <div key={key} style={{ textAlign: "center" }}>
+              <div style={{
+                width: 48, height: 48, borderRadius: "50%",
+                border: `3px solid ${color}`,
+                display: "flex", alignItems: "center", justifyContent: "center",
+                margin: "0 auto 0.3rem", fontSize: "1.1rem", fontWeight: 700, color,
+              }}>
+                {value}
+              </div>
+              <div style={{ fontSize: "0.65rem", fontWeight: 600 }}>
+                {key === "bestPractices" ? "Best Pr." : key === "seo" ? "SEO" : key.charAt(0).toUpperCase() + key.slice(1)}
+              </div>
+              {diff !== 0 && (
+                <div style={{ fontSize: "0.6rem", color: diff > 0 ? "#0cce6b" : "#ff4e42", display: "flex", alignItems: "center", justifyContent: "center", gap: "0.1rem" }}>
+                  {diff > 0 ? <TrendingUp style={{ width: 9, height: 9 }} /> : <TrendingDown style={{ width: 9, height: 9 }} />}
+                  {diff > 0 ? "+" : ""}{diff}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* CWV */}
+      {result.coreWebVitals && (
+        <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap", fontSize: "0.72rem" }}>
+          <CwvMetric label="LCP" value={`${(result.coreWebVitals.lcp / 1000).toFixed(1)}s`} threshold={[2500, 4000]} raw={result.coreWebVitals.lcp} />
+          <CwvMetric label="CLS" value={result.coreWebVitals.cls.toFixed(3)} threshold={[0.1, 0.25]} raw={result.coreWebVitals.cls} />
+          <CwvMetric label="FCP" value={`${(result.coreWebVitals.fcp / 1000).toFixed(1)}s`} threshold={[1800, 3000]} raw={result.coreWebVitals.fcp} />
+          <CwvMetric label="TTFB" value={`${Math.round(result.coreWebVitals.ttfb)}ms`} threshold={[800, 1800]} raw={result.coreWebVitals.ttfb} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── Combined Opportunities + Diagnostics ──
+
+function OpportunitiesSection({ mobile, desktop }: { mobile: LighthouseResult | null; desktop: LighthouseResult | null }) {
+  const [expandOpps, setExpandOpps] = useState(true);
+  const [expandDiag, setExpandDiag] = useState(false);
+
+  // Merge and deduplicate opportunities from both
+  const allOpps = new Map<string, { title: string; savingsMs?: number; score: number | null; source: string }>();
+  for (const r of [mobile, desktop]) {
+    if (!r?.opportunities) continue;
+    const src = r.strategy;
+    for (const opp of r.opportunities) {
+      const existing = allOpps.get(opp.id);
+      if (!existing || (opp.savingsMs ?? 0) > (existing.savingsMs ?? 0)) {
+        allOpps.set(opp.id, { title: opp.title, savingsMs: opp.savingsMs, score: opp.score, source: src });
+      }
+    }
+  }
+
+  const allDiags = new Map<string, { title: string; displayValue?: string; description: string }>();
+  for (const r of [mobile, desktop]) {
+    if (!r?.diagnostics) continue;
+    for (const d of r.diagnostics) {
+      if (!allDiags.has(d.id)) allDiags.set(d.id, d);
+    }
+  }
+
+  const opps = [...allOpps.values()];
+  const diags = [...allDiags.values()];
+
+  if (opps.length === 0 && diags.length === 0) return null;
+
+  return (
+    <div style={{ marginBottom: "2rem" }}>
+      {opps.length > 0 && (
+        <div style={{ marginBottom: "1rem" }}>
+          <button data-testid="lighthouse-opportunities-toggle" onClick={() => setExpandOpps(!expandOpps)} style={{
+            display: "flex", alignItems: "center", gap: "0.3rem", background: "none", border: "none",
+            cursor: "pointer", color: "var(--foreground)", fontSize: "0.82rem", fontWeight: 600, padding: 0, marginBottom: "0.5rem",
+          }}>
+            {expandOpps ? <ChevronDown style={{ width: 14, height: 14 }} /> : <ChevronRight style={{ width: 14, height: 14 }} />}
+            Opportunities ({opps.length})
+          </button>
+          {expandOpps && (
+            <div style={{ display: "flex", flexDirection: "column", gap: "0.35rem" }}>
+              {opps.map((opp, i) => (
+                <div key={i} style={{
+                  padding: "0.6rem 0.85rem", borderRadius: 6,
+                  border: "1px solid var(--border)", background: "var(--card)",
+                  display: "flex", alignItems: "center", justifyContent: "space-between",
+                  fontSize: "0.78rem",
+                }}>
+                  <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+                    <div style={{ width: 8, height: 8, borderRadius: "50%", background: opp.score !== null && opp.score < 0.5 ? "#ff4e42" : "#ffa400", flexShrink: 0 }} />
+                    {opp.title}
+                    <span style={{ fontSize: "0.6rem", color: "var(--muted-foreground)", background: "var(--muted)", padding: "1px 4px", borderRadius: 3 }}>{opp.source}</span>
+                  </div>
+                  {opp.savingsMs && (
+                    <span style={{ color: "var(--muted-foreground)", fontSize: "0.72rem", whiteSpace: "nowrap" }}>
+                      save {(opp.savingsMs / 1000).toFixed(1)}s
+                    </span>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {diags.length > 0 && (
+        <div>
+          <button data-testid="lighthouse-diagnostics-toggle" onClick={() => setExpandDiag(!expandDiag)} style={{
+            display: "flex", alignItems: "center", gap: "0.3rem", background: "none", border: "none",
+            cursor: "pointer", color: "var(--foreground)", fontSize: "0.82rem", fontWeight: 600, padding: 0, marginBottom: "0.5rem",
+          }}>
+            {expandDiag ? <ChevronDown style={{ width: 14, height: 14 }} /> : <ChevronRight style={{ width: 14, height: 14 }} />}
+            Diagnostics ({diags.length})
+          </button>
+          {expandDiag && (
+            <div style={{ display: "flex", flexDirection: "column", gap: "0.35rem" }}>
+              {diags.map((d, i) => (
+                <div key={i} style={{
+                  padding: "0.6rem 0.85rem", borderRadius: 6,
+                  border: "1px solid var(--border)", background: "var(--card)", fontSize: "0.78rem",
+                }}>
+                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+                    <span>{d.title}</span>
+                    {d.displayValue && <span style={{ color: "var(--muted-foreground)", fontSize: "0.72rem" }}>{d.displayValue}</span>}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── History Table ──
+
+function HistoryTable({ history }: { history: ScoreHistoryEntry[] }) {
+  return (
+    <div>
+      <div style={{ fontSize: "0.78rem", fontWeight: 600, marginBottom: "0.5rem", textTransform: "uppercase", letterSpacing: "0.05em", color: "var(--muted-foreground)" }}>
+        Score History ({history.length} scans)
+      </div>
+      <div style={{ padding: "0.75rem", borderRadius: 8, border: "1px solid var(--border)", background: "var(--card)", overflowX: "auto" }}>
+        <table style={{ width: "100%", borderCollapse: "collapse", fontSize: "0.72rem" }}>
+          <thead>
+            <tr>
+              <th style={thStyle}>Date</th>
+              <th style={thStyle}>Strategy</th>
+              <th style={thStyle}>Perf</th>
+              <th style={thStyle}>Access</th>
+              <th style={thStyle}>SEO</th>
+              <th style={thStyle}>Best Pr.</th>
+            </tr>
+          </thead>
+          <tbody>
+            {[...history].reverse().slice(0, 30).map((entry, i) => (
+              <tr key={i} style={{ borderTop: "1px solid var(--border)" }}>
+                <td style={tdStyle}>{new Date(entry.timestamp).toLocaleDateString()}</td>
+                <td style={tdStyle}>
+                  <span style={{ display: "inline-flex", alignItems: "center", gap: "0.2rem" }}>
+                    {entry.strategy === "mobile" ? <Smartphone style={{ width: 10, height: 10 }} /> : <Monitor style={{ width: 10, height: 10 }} />}
+                    {entry.strategy}
+                  </span>
+                </td>
+                <td style={tdStyle}><ScoreBadge score={entry.scores.performance} /></td>
+                <td style={tdStyle}><ScoreBadge score={entry.scores.accessibility} /></td>
+                <td style={tdStyle}><ScoreBadge score={entry.scores.seo} /></td>
+                <td style={tdStyle}><ScoreBadge score={entry.scores.bestPractices} /></td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+// ── Small components ──
+
+function ScoreBadge({ score }: { score: number }) {
+  return <span style={{ color: SCORE_COLOR_MAP[scoreColor(score)], fontWeight: 600 }}>{score}</span>;
+}
+
+function CwvMetric({ label, value, threshold, raw }: { label: string; value: string; threshold: [number, number]; raw: number }) {
+  const color = raw <= threshold[0] ? "#0cce6b" : raw <= threshold[1] ? "#ffa400" : "#ff4e42";
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: "0.3rem" }}>
+      <span style={{ fontWeight: 600, color: "var(--muted-foreground)", minWidth: 28 }}>{label}</span>
+      <span style={{ fontWeight: 600, color }}>{value}</span>
+    </div>
+  );
+}
+
+function PsiKeySetup() {
+  const [key, setKey] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+
+  async function handleSave() {
+    if (!key.trim()) return;
+    setSaving(true);
+    await fetch("/api/admin/site-config", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ psiApiKey: key.trim() }),
+    });
+    setSaving(false);
+    setSaved(true);
+  }
+
+  return (
+    <div style={{ marginTop: "0.75rem", padding: "0.75rem", borderRadius: 6, background: "var(--card)", border: "1px solid var(--border)", color: "var(--foreground)", fontSize: "0.78rem" }}>
+      <div style={{ fontWeight: 600, marginBottom: "0.35rem" }}>Set up your own PageSpeed Insights API key</div>
+      <div style={{ color: "var(--muted-foreground)", marginBottom: "0.5rem", lineHeight: 1.5 }}>
+        Get a free key (25,000 scans/day):
+      </div>
+      <ol style={{ margin: "0 0 0.5rem 1.25rem", padding: 0, color: "var(--muted-foreground)", lineHeight: 1.7 }}>
+        <li><a data-testid="lighthouse-setup-psi-api-link" href="https://console.cloud.google.com/apis/library/pagespeedonline.googleapis.com" target="_blank" rel="noopener" style={{ color: "#F7BB2E" }}>Enable PageSpeed Insights API</a></li>
+        <li><a data-testid="lighthouse-setup-api-credentials-link" href="https://console.cloud.google.com/apis/credentials" target="_blank" rel="noopener" style={{ color: "#F7BB2E" }}>Create API Key</a></li>
+        <li>Paste below</li>
+      </ol>
+      <div style={{ display: "flex", gap: "0.4rem" }}>
+        <input data-testid="lighthouse-api-key-input" type="password" value={key} onChange={(e) => setKey(e.target.value)} placeholder="AIzaSy..." style={{ flex: 1, padding: "0.35rem 0.6rem", borderRadius: 5, border: "1px solid var(--border)", background: "var(--background)", fontSize: "0.78rem", color: "var(--foreground)", outline: "none" }} />
+        <button onClick={handleSave} disabled={saving || !key.trim() || saved} style={{ padding: "0.35rem 0.75rem", borderRadius: 5, border: "none", background: saved ? "#0cce6b" : "#F7BB2E", color: "#0D0D0D", fontSize: "0.75rem", fontWeight: 600, cursor: saving ? "wait" : "pointer", opacity: saving || !key.trim() ? 0.6 : 1 }}>
+          {saved ? "Saved ✓" : "Save key"}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+const thStyle: React.CSSProperties = { textAlign: "left", padding: "0.35rem 0.5rem", fontWeight: 600, whiteSpace: "nowrap" };
+const tdStyle: React.CSSProperties = { padding: "0.3rem 0.5rem" };
diff --git a/packages/cms-admin/src/app/admin/(workspace)/link-checker/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/link-checker/page.tsx
index 3f3983337..1787b9ec3 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/link-checker/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/link-checker/page.tsx
@@ -111,6 +111,7 @@ function FixButton({ link, onFixed }: { link: LinkResult; onFixed: (newUrl: stri
             <div className="flex gap-1.5 mt-0.5">
               <button
                 type="button"
+                data-testid="link-fix-apply"
                 onClick={applySuggestion}
                 disabled={fix.loading}
                 className="flex items-center gap-1 text-[11px] px-2 py-0.5 rounded bg-primary text-primary-foreground hover:opacity-90 disabled:opacity-50"
@@ -120,6 +121,7 @@ function FixButton({ link, onFixed }: { link: LinkResult; onFixed: (newUrl: stri
               </button>
               <button
                 type="button"
+                data-testid="link-fix-cancel"
                 onClick={() => setFix({ loading: false })}
                 className="flex items-center gap-1 text-[11px] px-2 py-0.5 rounded border border-border hover:bg-accent"
               >
@@ -138,6 +140,7 @@ function FixButton({ link, onFixed }: { link: LinkResult; onFixed: (newUrl: stri
   return (
     <button
       type="button"
+      data-testid="link-fix-suggest"
       onClick={getSuggestion}
       disabled={fix.loading}
       className="flex items-center gap-1 text-[11px] px-2 py-1 rounded border border-border hover:bg-accent hover:border-primary/40 transition-colors disabled:opacity-50"
@@ -291,7 +294,7 @@ export default function LinkCheckerPage() {
 
   return (
     <fieldset disabled={readOnly} style={{ border: "none", padding: 0, margin: 0 }}>
-    <div className="flex flex-col">
+    <div data-testid="link-checker-root" className="flex flex-col">
       <ActionBar helpArticleId="linkchecker-intro"
         actions={<>
           {state === "done" && allBroken.length > 0 && (
@@ -332,7 +335,7 @@ export default function LinkCheckerPage() {
             <Link2 style={{ width: "3rem", height: "3rem", opacity: 0.2 }} />
             <p className="text-sm">Checks all links and images across every richtext and image field.</p>
             <p className="text-xs opacity-60">Internal links verify the target document exists. Internal images verify the file exists on disk. External URLs send a HEAD request.</p>
-            <button type="button" onClick={runCheck}
+            <button data-testid="link-checker-start" type="button" onClick={runCheck}
               className="mt-2 flex items-center gap-2 text-sm px-4 py-2 rounded-md bg-primary text-primary-foreground hover:opacity-90 transition-opacity">
               <Play style={{ width: "0.875rem", height: "0.875rem" }} />
               Run check
@@ -370,6 +373,7 @@ export default function LinkCheckerPage() {
               <button
                 key={key}
                 type="button"
+                data-testid={`links-filter-${key}`}
                 onClick={() => setFilter(key)}
                 style={{
                   display: "flex", alignItems: "center", gap: "0.5rem",
@@ -428,6 +432,7 @@ export default function LinkCheckerPage() {
                     </td>
                     <td style={{ padding: "0.5rem 0.875rem" }}>
                       <button
+                        data-testid={`link-checker-doc-button-${r.docCollection}-${r.docSlug}`}
                         type="button"
                         onClick={() => openTab(`/admin/content/${r.docCollection}/${r.docSlug}`, r.docTitle)}
                         className="hover:underline text-left"
diff --git a/packages/cms-admin/src/app/admin/(workspace)/log/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/log/page.tsx
index 927ccb022..283278c64 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/log/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/log/page.tsx
@@ -76,6 +76,7 @@ function FilterChip({ label, onRemove }: { label: string; onRemove: () => void }
       {label}
       <button
         type="button"
+        data-testid={`filter-chip-remove-${label.toLowerCase().replace(/\s+/g, '-')}`}
         onClick={onRemove}
         aria-label={`Remove ${label} filter`}
         style={{
@@ -214,13 +215,14 @@ export default function EventLogPage() {
   }
 
   return (
-    <>
+    <div data-testid="log-root">
       <TabTitle value="Event Log" />
       <ActionBar
         actions={
           <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
             <button
               type="button"
+              data-testid="log-refresh-button"
               onClick={load}
               disabled={loading}
               style={{
@@ -237,6 +239,7 @@ export default function EventLogPage() {
             </button>
             <button
               type="button"
+              data-testid="log-export-csv-button"
               onClick={() => exportLog("csv")}
               title="Export filtered events as CSV (for GDPR data requests)"
               style={{
@@ -252,6 +255,7 @@ export default function EventLogPage() {
             </button>
             <button
               type="button"
+              data-testid="log-export-json-button"
               onClick={() => exportLog("json")}
               title="Export filtered events as JSON"
               style={{
@@ -311,6 +315,7 @@ export default function EventLogPage() {
           {(level !== "all" || actionFilter || dateFrom || dateTo || layers.size < 3) && (
             <button
               type="button"
+              data-testid="filter-clear-all"
               onClick={() => {
                 setLevel("all");
                 setActionFilter("");
@@ -345,6 +350,7 @@ export default function EventLogPage() {
               <button
                 key={l}
                 type="button"
+                data-testid={`filter-layer-${l}`}
                 onClick={() => toggleLayer(l)}
                 style={{
                   display: "flex", alignItems: "center", gap: "0.3rem",
@@ -375,6 +381,7 @@ export default function EventLogPage() {
           />
           <input
             type="text"
+            data-testid="filter-action-input"
             value={actionFilter}
             onChange={(e) => setActionFilter(e.target.value)}
             placeholder="Filter action (e.g. document.)"
@@ -461,6 +468,7 @@ export default function EventLogPage() {
                 Per page:
                 <select
                   value={pageSize}
+                  data-testid="log-page-size-select"
                   onChange={(e) => setPageSize(parseInt(e.target.value, 10))}
                   style={{
                     marginLeft: "0.35rem",
@@ -479,6 +487,7 @@ export default function EventLogPage() {
             <div style={{ display: "flex", alignItems: "center", gap: "0.35rem" }}>
               <button
                 type="button"
+                data-testid="pagination-prev"
                 onClick={() => setPage(Math.max(1, page - 1))}
                 disabled={page === 1}
                 style={{
@@ -497,6 +506,7 @@ export default function EventLogPage() {
               </span>
               <button
                 type="button"
+                data-testid="pagination-next"
                 onClick={() => setPage(page + 1)}
                 disabled={page * pageSize >= total}
                 style={{
@@ -514,6 +524,6 @@ export default function EventLogPage() {
           </div>
         )}
       </div>
-    </>
+    </div>
   );
 }
diff --git a/packages/cms-admin/src/app/admin/(workspace)/media/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/media/page.tsx
index d1ad478bf..7046a2ef6 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/media/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/media/page.tsx
@@ -353,6 +353,7 @@ export default function MediaPage() {
 
   /* ─── Render ─────────────────────────────────────────────── */
   return (
+    <div data-testid="media-root">
     <fieldset disabled={readOnly} style={{ border: "none", padding: 0, margin: 0 }}>
     <TooltipProvider>
     <div
@@ -430,11 +431,11 @@ export default function MediaPage() {
               {confirmBulk && (
                 <>
                   <span style={{ fontSize: "0.65rem", color: "var(--destructive)", fontWeight: 500, padding: "0 2px" }}>Remove?</span>
-                  <button onClick={bulkDelete}
+                  <button data-testid="media-bulk-delete-yes" onClick={bulkDelete}
                     style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px",
                       border: "none", background: "var(--destructive)", color: "#fff",
                       cursor: "pointer", lineHeight: 1 }}>Yes</button>
-                  <button onClick={() => setConfirmBulk(false)}
+                  <button data-testid="media-bulk-delete-no" onClick={() => setConfirmBulk(false)}
                     style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px",
                       border: "1px solid var(--border)", background: "transparent",
                       color: "var(--foreground)", cursor: "pointer", lineHeight: 1 }}>No</button>
@@ -443,10 +444,10 @@ export default function MediaPage() {
               <ActionButton variant="secondary" onClick={() => {
                 // Select all visible files
                 setSelected(new Set(filtered.map((f) => f.url)));
-              }}>
+              }} data-testid="media-select-all">
                 All
               </ActionButton>
-              <ActionButton variant="secondary" onClick={() => { setSelecting(false); setSelected(new Set()); setConfirmBulk(false); }}>
+              <ActionButton variant="secondary" onClick={() => { setSelecting(false); setSelected(new Set()); setConfirmBulk(false); }} data-testid="media-select-cancel">
                 Cancel
               </ActionButton>
             </>
@@ -488,6 +489,7 @@ export default function MediaPage() {
             {(["grid", "list"] as ViewMode[]).map((v) => (
               <button
                 key={v}
+                data-testid={`media-view-${v}`}
                 type="button"
                 onClick={() => setView(v)}
                 style={{
@@ -508,6 +510,7 @@ export default function MediaPage() {
               {(["S", "M", "L"] as const).map((s) => (
                 <button
                   key={s}
+                  data-testid={`media-thumb-size-${s}`}
                   type="button"
                   onClick={() => { setThumbSize(s); localStorage.setItem("cms-media-thumb-size", s); }}
                   style={{
@@ -537,6 +540,7 @@ export default function MediaPage() {
               </ActionButton>
               <input
                 ref={inputRef}
+                data-testid="media-file-input"
                 type="file"
                 multiple
                 accept="*/*"
@@ -634,6 +638,7 @@ export default function MediaPage() {
               return (
                 <button
                   key={t.value}
+                  data-testid={`media-type-filter-${t.value || "all"}`}
                   type="button"
                   onClick={() => setTypeFilter(t.value)}
                   style={{
@@ -673,6 +678,7 @@ export default function MediaPage() {
               return (
                 <button
                   key={t.value}
+                  data-testid={`media-ai-filter-${t.value || "all"}`}
                   type="button"
                   onClick={() => setAiFilter(t.value)}
                   style={{
@@ -702,6 +708,7 @@ export default function MediaPage() {
                 Tags
               </p>
               <button
+                data-testid="media-tag-filter-all"
                 type="button"
                 onClick={() => setTagFilter("")}
                 style={{
@@ -718,6 +725,7 @@ export default function MediaPage() {
               {allTags.map((t) => (
                 <button
                   key={t.tag}
+                  data-testid={`media-tag-filter-${t.tag}`}
                   type="button"
                   onClick={() => setTagFilter(tagFilter === t.tag ? "" : t.tag)}
                   style={{
@@ -749,6 +757,7 @@ export default function MediaPage() {
             ]).map((t) => (
               <button
                 key={t.value}
+                data-testid={`media-sort-${t.value}`}
                 type="button"
                 onClick={() => setSortBy(t.value)}
                 style={{
@@ -775,6 +784,7 @@ export default function MediaPage() {
               <div style={{ position: "relative", flex: 1, minWidth: "180px" }}>
                 <Search style={{ position: "absolute", left: "0.625rem", top: "50%", transform: "translateY(-50%)", width: "0.8rem", height: "0.8rem", color: "var(--muted-foreground)", pointerEvents: "none" }} />
                 <input
+                  data-testid="media-search-input"
                   type="text"
                   value={query}
                   onChange={(e) => setQueryDebounced(e.target.value)}
@@ -783,6 +793,7 @@ export default function MediaPage() {
                 />
                 {query && (
                   <button
+                    data-testid="media-search-clear"
                     onClick={() => setQueryDebounced("")}
                     style={{ position: "absolute", right: "0.5rem", top: "50%", transform: "translateY(-50%)", background: "none", border: "none", padding: 0, cursor: "pointer", color: "var(--muted-foreground)", display: "flex", alignItems: "center" }}
                   >
@@ -811,6 +822,7 @@ export default function MediaPage() {
               {totalPages > 1 && (
                 <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: "0.5rem", padding: "1.25rem", borderTop: "1px solid var(--border)" }}>
                   <button
+                    data-testid="media-pagination-first"
                     type="button"
                     onClick={() => setPage(1)}
                     disabled={currentPage === 1}
@@ -820,6 +832,7 @@ export default function MediaPage() {
                     1
                   </button>
                   <button
+                    data-testid="media-pagination-prev"
                     type="button"
                     onClick={() => setPage((p) => Math.max(1, p - 1))}
                     disabled={currentPage === 1}
@@ -831,6 +844,7 @@ export default function MediaPage() {
                     {currentPage} / {totalPages} &nbsp;·&nbsp; {sorted.length} files
                   </span>
                   <button
+                    data-testid="media-pagination-next"
                     type="button"
                     onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
                     disabled={currentPage === totalPages}
@@ -839,6 +853,7 @@ export default function MediaPage() {
                     <ChevronRight style={{ width: "0.875rem", height: "0.875rem" }} />
                   </button>
                   <button
+                    data-testid="media-pagination-last"
                     type="button"
                     onClick={() => setPage(totalPages)}
                     disabled={currentPage === totalPages}
@@ -900,6 +915,7 @@ export default function MediaPage() {
     </div>
     </TooltipProvider>
     </fieldset>
+    </div>
   );
 }
 
@@ -948,6 +964,7 @@ function FolderBtn({ label, count, active, icon, onClick }: {
 }) {
   return (
     <button
+      data-testid={`media-folder-${label.toLowerCase().replace(/\s+/g, "-")}`}
       type="button"
       onClick={onClick}
       style={{
@@ -967,11 +984,12 @@ function FolderBtn({ label, count, active, icon, onClick }: {
 
 function EmptyState({ query, onUpload }: { query: string; onUpload: () => void }) {
   return (
-    <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "1rem", padding: "4rem 2rem", color: "var(--muted-foreground)" }}>
+    <div data-testid="media-empty-state" style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "1rem", padding: "4rem 2rem", color: "var(--muted-foreground)" }}>
       <Upload style={{ width: "2.5rem", height: "2.5rem", opacity: 0.3 }} />
       <p style={{ fontSize: "0.875rem" }}>{query ? `No files matching "${query}"` : "No files yet"}</p>
       {!query && (
         <button
+          data-testid="media-empty-upload-btn"
           type="button"
           onClick={onUpload}
           style={{ fontSize: "0.8rem", padding: "0.5rem 1rem", borderRadius: "6px", border: "1px solid var(--border)", background: "transparent", cursor: "pointer" }}
@@ -1033,6 +1051,7 @@ function GridView({ files, copied, deleting, usageMap, aiAnalyzedSet, aiGenerate
             )}
             {/* Thumbnail */}
             <div
+              data-testid={`media-grid-thumb-${file.name}`}
               style={{ width: "100%", height: "72%", background: "var(--muted)", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", borderRadius: "0.5rem 0.5rem 0 0", cursor: selecting ? "pointer" : (file.isImage || file.mediaType === "video") ? "pointer" : "default", position: "relative" }}
               onClick={!selecting ? () => (file.isImage || file.mediaType === "video") && onOpen(file) : undefined}
             >
@@ -1122,9 +1141,10 @@ function GridView({ files, copied, deleting, usageMap, aiAnalyzedSet, aiGenerate
 
             {/* Context menu (⋮) */}
             {!selecting && (
-              <div className="absolute top-1.5 right-1.5 opacity-0 group-hover:opacity-100 transition-opacity" onClick={(e) => e.stopPropagation()}>
+              <div data-testid={`media-grid-actions-${file.name}`} className="absolute top-1.5 right-1.5 opacity-0 group-hover:opacity-100 transition-opacity" onClick={(e) => e.stopPropagation()}>
                 <DropdownMenu>
                   <DropdownMenuTrigger
+                    data-testid={`media-grid-menu-${file.name}`}
                     className="p-1 rounded-md hover:bg-accent transition-colors focus-visible:outline-none bg-black/50 backdrop-blur border-0 cursor-pointer"
                   >
                     <MoreVertical style={{ width: "0.875rem", height: "0.875rem", color: "white" }} />
@@ -1195,7 +1215,7 @@ function ListView({ files, copied, deleting, usageMap, aiAnalyzedSet, aiGenerate
                 <td style={{ padding: "0.5rem 1rem", display: "flex", alignItems: "center", gap: "0.625rem" }}>
                   {file.isImage ? (
                     // eslint-disable-next-line @next/next/no-img-element
-                    <img src={file.url} alt="" loading="lazy" onClick={() => onOpen(file)} style={{ width: "2rem", height: "2rem", objectFit: "cover", borderRadius: "4px", flexShrink: 0, background: "var(--muted)", cursor: "zoom-in" }} />
+                    <img data-testid={`media-list-thumb-${file.name}`} src={file.url} alt="" loading="lazy" onClick={() => onOpen(file)} style={{ width: "2rem", height: "2rem", objectFit: "cover", borderRadius: "4px", flexShrink: 0, background: "var(--muted)", cursor: "zoom-in" }} />
                   ) : (
                     <span style={{ width: "2rem", height: "2rem", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                       <MediaIcon mediaType={file.mediaType} size="1.25rem" />
@@ -1351,11 +1371,13 @@ function Lightbox({ files, index, onNavigate, onClose, onCopy, copied, onDelete,
 
   return (
     <div
+      data-testid="media-lightbox"
       style={{ position: "fixed", inset: 0, zIndex: 90, display: "flex", flexDirection: "column", background: "rgba(0,0,0,0.92)", backdropFilter: "blur(8px)" }}
       onClick={onClose}
     >
       {/* Top bar */}
       <div
+        data-testid="media-lightbox-topbar"
         style={{ display: "flex", alignItems: "center", gap: "0.75rem", padding: "0.75rem 1rem", flexShrink: 0, borderBottom: "1px solid rgba(255,255,255,0.08)" }}
         onClick={(e) => e.stopPropagation()}
       >
@@ -1366,6 +1388,7 @@ function Lightbox({ files, index, onNavigate, onClose, onCopy, copied, onDelete,
           {index + 1} / {files.length}
         </span>
         <a
+          data-testid="media-lightbox-open-original"
           href={file.url}
           target="_blank"
           rel="noopener noreferrer"
@@ -1377,6 +1400,7 @@ function Lightbox({ files, index, onNavigate, onClose, onCopy, copied, onDelete,
           <ExternalLink style={{ width: "0.875rem", height: "0.875rem" }} />
         </a>
         <button
+          data-testid="media-lightbox-download"
           type="button"
           title={`Download ${file.name}`}
           onClick={(e) => { e.stopPropagation(); downloadFile(); }}
@@ -1385,7 +1409,7 @@ function Lightbox({ files, index, onNavigate, onClose, onCopy, copied, onDelete,
         >
           <Download style={{ width: "0.875rem", height: "0.875rem" }} />
         </button>
-        <button type="button" title="Copy URL" onClick={(e) => { e.stopPropagation(); onCopy(file.url); }}
+        <button data-testid="media-lightbox-copy-url" type="button" title="Copy URL" onClick={(e) => { e.stopPropagation(); onCopy(file.url); }}
           style={{ display: "flex", alignItems: "center", padding: "0.3rem", borderRadius: "6px", color: copied === file.url ? "#4ade80" : "rgba(255,255,255,0.5)", border: "none", background: "transparent", cursor: "pointer" }}
           className="hover:text-white hover:bg-white/10 transition-colors"
         >
@@ -1393,13 +1417,13 @@ function Lightbox({ files, index, onNavigate, onClose, onCopy, copied, onDelete,
         </button>
         {file.mediaType !== "video" && (
           <div style={{ display: "flex", alignItems: "center", gap: "2px", border: "1px solid rgba(255,255,255,0.15)", borderRadius: "6px", padding: "1px" }}>
-            <button type="button" title="Rotate left" disabled={rotating} onClick={(e) => { e.stopPropagation(); rotateImage(-90); }}
+            <button data-testid="media-lightbox-rotate-left" type="button" title="Rotate left" disabled={rotating} onClick={(e) => { e.stopPropagation(); rotateImage(-90); }}
               style={{ display: "flex", alignItems: "center", padding: "0.3rem", borderRadius: "4px", color: "rgba(255,255,255,0.7)", border: "none", background: "transparent", cursor: rotating ? "wait" : "pointer", opacity: rotating ? 0.4 : 1 }}
               className="hover:text-white hover:bg-white/15 transition-colors"
             >
               <RotateCcw style={{ width: "0.875rem", height: "0.875rem" }} />
             </button>
-            <button type="button" title="Rotate right" disabled={rotating} onClick={(e) => { e.stopPropagation(); rotateImage(90); }}
+            <button data-testid="media-lightbox-rotate-right" type="button" title="Rotate right" disabled={rotating} onClick={(e) => { e.stopPropagation(); rotateImage(90); }}
               style={{ display: "flex", alignItems: "center", padding: "0.3rem", borderRadius: "4px", color: "rgba(255,255,255,0.7)", border: "none", background: "transparent", cursor: rotating ? "wait" : "pointer", opacity: rotating ? 0.4 : 1 }}
               className="hover:text-white hover:bg-white/15 transition-colors"
             >
@@ -1407,13 +1431,13 @@ function Lightbox({ files, index, onNavigate, onClose, onCopy, copied, onDelete,
             </button>
           </div>
         )}
-        <button type="button" title="Delete" onClick={(e) => { e.stopPropagation(); onDelete(file); }}
+        <button data-testid="media-lightbox-delete" type="button" title="Delete" onClick={(e) => { e.stopPropagation(); onDelete(file); }}
           style={{ display: "flex", alignItems: "center", padding: "0.3rem", borderRadius: "6px", color: "rgba(255,255,255,0.4)", border: "none", background: "transparent", cursor: "pointer" }}
           className="hover:text-red-400 hover:bg-white/10 transition-colors"
         >
           <Trash2 style={{ width: "0.875rem", height: "0.875rem" }} />
         </button>
-        <button type="button" title="Close (Esc)" onClick={onClose}
+        <button data-testid="media-lightbox-close" type="button" title="Close (Esc)" onClick={onClose}
           style={{ display: "flex", alignItems: "center", padding: "0.3rem", borderRadius: "6px", color: "rgba(255,255,255,0.5)", border: "none", background: "transparent", cursor: "pointer" }}
           className="hover:text-white hover:bg-white/10 transition-colors"
         >
@@ -1422,11 +1446,11 @@ function Lightbox({ files, index, onNavigate, onClose, onCopy, copied, onDelete,
       </div>
 
       {/* Image area + AI panel */}
-      <div style={{ flex: 1, display: "flex", overflow: "hidden" }} onClick={onClose}>
+      <div data-testid="media-lightbox-content" style={{ flex: 1, display: "flex", overflow: "hidden" }} onClick={onClose}>
         {/* Image */}
         <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", position: "relative" }}>
           {hasPrev && (
-            <button type="button" onClick={(e) => { e.stopPropagation(); onNavigate(index - 1); }}
+            <button data-testid="media-lightbox-prev" type="button" onClick={(e) => { e.stopPropagation(); onNavigate(index - 1); }}
               style={{ position: "absolute", left: "1rem", zIndex: 2, width: "2.5rem", height: "2.5rem", borderRadius: "50%", border: "1px solid rgba(255,255,255,0.2)", background: "rgba(0,0,0,0.5)", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", color: "white" }}
               className="hover:bg-white/20 transition-colors"
             >
@@ -1436,6 +1460,7 @@ function Lightbox({ files, index, onNavigate, onClose, onCopy, copied, onDelete,
 
           {file.mediaType === "video" ? (
             <video
+              data-testid="media-lightbox-video"
               src={file.url}
               controls
               autoPlay
@@ -1445,6 +1470,7 @@ function Lightbox({ files, index, onNavigate, onClose, onCopy, copied, onDelete,
           ) : (
             // eslint-disable-next-line @next/next/no-img-element
             <img
+              data-testid="media-lightbox-image"
               src={imgKey ? `${file.url}?v=${imgKey}` : file.url}
               alt={file.name}
               style={{ maxWidth: "calc(100% - 8rem)", maxHeight: "100%", objectFit: "contain", borderRadius: "4px", boxShadow: "0 8px 40px rgba(0,0,0,0.6)" }}
@@ -1453,7 +1479,7 @@ function Lightbox({ files, index, onNavigate, onClose, onCopy, copied, onDelete,
           )}
 
           {hasNext && (
-            <button type="button" onClick={(e) => { e.stopPropagation(); onNavigate(index + 1); }}
+            <button data-testid="media-lightbox-next" type="button" onClick={(e) => { e.stopPropagation(); onNavigate(index + 1); }}
               style={{ position: "absolute", right: "1rem", zIndex: 2, width: "2.5rem", height: "2.5rem", borderRadius: "50%", border: "1px solid rgba(255,255,255,0.2)", background: "rgba(0,0,0,0.5)", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", color: "white" }}
               className="hover:bg-white/20 transition-colors"
             >
@@ -1465,6 +1491,7 @@ function Lightbox({ files, index, onNavigate, onClose, onCopy, copied, onDelete,
         {/* Metadata panel — right side */}
         {(file.isImage || file.mediaType === "video") && (
           <div
+            data-testid="media-lightbox-metadata"
             onClick={(e) => e.stopPropagation()}
             style={{ width: "300px", flexShrink: 0, borderLeft: "1px solid rgba(255,255,255,0.08)", display: "flex", flexDirection: "column", overflowY: "auto" }}
           >
@@ -1477,6 +1504,7 @@ function Lightbox({ files, index, onNavigate, onClose, onCopy, copied, onDelete,
 
       {/* Bottom info */}
       <div
+        data-testid="media-lightbox-footer"
         style={{ padding: "0.625rem 1rem", borderTop: "1px solid rgba(255,255,255,0.08)", display: "flex", gap: "1.5rem", flexShrink: 0 }}
         onClick={(e) => e.stopPropagation()}
       >
@@ -1563,7 +1591,7 @@ function LightboxAIPanel({ imageUrl }: { imageUrl: string }) {
   }
 
   const CopyIcon = ({ text, field }: { text: string; field: string }) => (
-    <button type="button" title={`Copy ${field}`} onClick={() => copyText(text, field)}
+    <button data-testid={`media-ai-copy-${field}`} type="button" title={`Copy ${field}`} onClick={() => copyText(text, field)}
       style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 20, height: 20, borderRadius: 4, border: "none", background: "transparent", cursor: "pointer", color: copiedField === field ? "#4ade80" : "rgba(255,255,255,0.4)", flexShrink: 0 }}>
       {copiedField === field ? <Check style={{ width: 12, height: 12 }} /> : <Copy style={{ width: 12, height: 12 }} />}
     </button>
@@ -1576,7 +1604,7 @@ function LightboxAIPanel({ imageUrl }: { imageUrl: string }) {
           <Sparkles style={{ width: 14, height: 14 }} /> AI Analysis
         </span>
         {hasAiData && !analyzing && (
-          <button type="button" title="Re-analyze" onClick={runAnalysis}
+          <button data-testid="media-ai-reanalyze" type="button" title="Re-analyze" onClick={runAnalysis}
             style={{ display: "flex", alignItems: "center", border: "none", background: "transparent", cursor: "pointer", color: "rgba(255,255,255,0.4)" }}>
             <RefreshCw style={{ width: 12, height: 12 }} />
           </button>
@@ -1592,7 +1620,7 @@ function LightboxAIPanel({ imageUrl }: { imageUrl: string }) {
       {!loading && !hasAiData && !analyzing && (
         <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "0.75rem", paddingTop: "2rem" }}>
           <p style={{ fontSize: "0.8rem", color: "rgba(255,255,255,0.4)" }}>No AI analysis yet.</p>
-          <button type="button" onClick={runAnalysis}
+          <button data-testid="media-ai-analyze-btn" type="button" onClick={runAnalysis}
             style={{ display: "inline-flex", alignItems: "center", gap: "0.375rem", padding: "0.4rem 1rem", borderRadius: "6px", border: "none", background: "#F7BB2E", color: "#0D0D0D", cursor: "pointer", fontSize: "0.8rem", fontWeight: 600 }}>
             <Sparkles style={{ width: 14, height: 14 }} /> Analyze
           </button>
@@ -1626,6 +1654,7 @@ function LightboxAIPanel({ imageUrl }: { imageUrl: string }) {
               {locales.map((l) => (
                 <button
                   key={l}
+                  data-testid={`media-ai-locale-${l}`}
                   type="button"
                   onClick={() => setActiveLocale(l)}
                   style={{
@@ -1747,13 +1776,13 @@ function LightboxTagPanel({ fileKey, onTagsChanged }: { fileKey: string; onTagsC
                 {confirmRemove === tag ? (
                   <>
                     <span style={{ fontSize: "0.6rem", color: "var(--destructive)", fontWeight: 500, padding: "0 2px" }}>Remove?</span>
-                    <button onClick={() => removeTag(tag)}
+                    <button data-testid={`media-tag-remove-yes-${tag}`} onClick={() => removeTag(tag)}
                       style={{ fontSize: "0.55rem", padding: "0.05rem 0.25rem", borderRadius: "3px", border: "none", background: "var(--destructive)", color: "#fff", cursor: "pointer", lineHeight: 1 }}>Yes</button>
-                    <button onClick={() => setConfirmRemove(null)}
+                    <button data-testid={`media-tag-remove-no-${tag}`} onClick={() => setConfirmRemove(null)}
                       style={{ fontSize: "0.55rem", padding: "0.05rem 0.25rem", borderRadius: "3px", border: "1px solid rgba(255,255,255,0.2)", background: "transparent", color: "rgba(255,255,255,0.6)", cursor: "pointer", lineHeight: 1 }}>No</button>
                   </>
                 ) : (
-                  <button onClick={() => setConfirmRemove(tag)}
+                  <button data-testid={`media-tag-remove-${tag}`} onClick={() => setConfirmRemove(tag)}
                     style={{ background: "none", border: "none", cursor: "pointer", color: "rgba(255,255,255,0.3)", padding: 0, fontSize: "0.75rem", lineHeight: 1 }}>&times;</button>
                 )}
               </span>
@@ -1761,6 +1790,7 @@ function LightboxTagPanel({ fileKey, onTagsChanged }: { fileKey: string; onTagsC
           </div>
           <div style={{ display: "flex", gap: "0.25rem" }}>
             <input
+              data-testid="media-tag-input"
               type="text"
               value={input}
               onChange={(e) => {
@@ -1781,7 +1811,7 @@ function LightboxTagPanel({ fileKey, onTagsChanged }: { fileKey: string; onTagsC
               }}
             />
             {input.trim() && (
-              <button onClick={() => addTag()}
+              <button data-testid="media-tag-add" onClick={() => addTag()}
                 style={{ padding: "0.25rem 0.5rem", borderRadius: "5px", border: "none", background: "#F7BB2E", color: "#0D0D0D", fontSize: "0.7rem", fontWeight: 600, cursor: "pointer" }}>
                 +
               </button>
@@ -1873,6 +1903,7 @@ function LightboxExifPanel({ imageUrl }: { imageUrl: string }) {
             <div style={row}>
               <span style={lbl}>GPS</span>
               <a
+                data-testid="media-exif-gps-link"
                 href={`https://maps.google.com/?q=${exif.gpsLat},${exif.gpsLon}`}
                 target="_blank"
                 rel="noopener noreferrer"
@@ -1932,6 +1963,7 @@ function DeleteConfirmDialog({ file, usages, onConfirm, onCancel }: {
               {usages.map((u) => (
                 <li key={`${u.collection}/${u.slug}`}>
                   <a
+                    data-testid={`media-delete-usage-${u.collection}-${u.slug}`}
                     href={`/admin/content/${u.collection}/${u.slug}`}
                     target="_blank"
                     rel="noopener noreferrer"
@@ -1951,10 +1983,10 @@ function DeleteConfirmDialog({ file, usages, onConfirm, onCancel }: {
         )}
 
         <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end" }}>
-          <button type="button" onClick={onCancel} style={{ padding: "0.4rem 1rem", borderRadius: "6px", border: "1px solid var(--border)", background: "transparent", cursor: "pointer", fontSize: "0.875rem" }}>
+          <button data-testid="media-delete-cancel" type="button" onClick={onCancel} style={{ padding: "0.4rem 1rem", borderRadius: "6px", border: "1px solid var(--border)", background: "transparent", cursor: "pointer", fontSize: "0.875rem" }}>
             Cancel
           </button>
-          <button type="button" onClick={onConfirm} style={{ padding: "0.4rem 1rem", borderRadius: "6px", border: "none", background: "var(--destructive)", color: "white", cursor: "pointer", fontSize: "0.875rem" }}>
+          <button data-testid="media-delete-confirm" type="button" onClick={onConfirm} style={{ padding: "0.4rem 1rem", borderRadius: "6px", border: "none", background: "var(--destructive)", color: "white", cursor: "pointer", fontSize: "0.875rem" }}>
             {inUse ? "Trash anyway" : "Move to trash"}
           </button>
         </div>
@@ -1991,10 +2023,11 @@ function RenameDialog({ file, onConfirm, onCancel }: {
   const isValid = sanitized.length > 0 && newName !== file.name;
 
   return (
-    <div style={{ position: "fixed", inset: 0, zIndex: 100, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(0,0,0,0.6)", backdropFilter: "blur(4px)" }}
+    <div data-testid="media-rename-dialog" style={{ position: "fixed", inset: 0, zIndex: 100, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(0,0,0,0.6)", backdropFilter: "blur(4px)" }}
       onClick={onCancel}
     >
       <div
+        data-testid="media-rename-dialog-content"
         style={{ background: "var(--card)", border: "1px solid var(--border)", borderRadius: "12px", padding: "1.5rem", maxWidth: "420px", width: "90%", display: "flex", flexDirection: "column", gap: "1rem" }}
         onClick={(e) => e.stopPropagation()}
       >
@@ -2007,8 +2040,9 @@ function RenameDialog({ file, onConfirm, onCancel }: {
           <p style={{ fontSize: "0.7rem", color: "var(--muted-foreground)", marginBottom: "0.375rem", fontFamily: "monospace" }}>
             {file.folder ? `${file.folder}/` : ""}<span style={{ opacity: 0.5 }}>*{ext}</span>
           </p>
-          <form onSubmit={(e) => { e.preventDefault(); if (isValid) onConfirm(newName); }}>
+          <form data-testid="media-rename-form" onSubmit={(e) => { e.preventDefault(); if (isValid) onConfirm(newName); }}>
             <input
+              data-testid="media-rename-input"
               ref={inputRef}
               type="text"
               value={value}
@@ -2030,10 +2064,11 @@ function RenameDialog({ file, onConfirm, onCancel }: {
         </div>
 
         <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end" }}>
-          <button type="button" onClick={onCancel} style={{ padding: "0.4rem 1rem", borderRadius: "6px", border: "1px solid var(--border)", background: "transparent", cursor: "pointer", fontSize: "0.875rem" }}>
+          <button data-testid="media-rename-cancel" type="button" onClick={onCancel} style={{ padding: "0.4rem 1rem", borderRadius: "6px", border: "1px solid var(--border)", background: "transparent", cursor: "pointer", fontSize: "0.875rem" }}>
             Cancel
           </button>
           <button
+            data-testid="media-rename-confirm"
             type="button"
             onClick={() => isValid && onConfirm(newName)}
             disabled={!isValid}
@@ -2151,10 +2186,12 @@ function BatchAnalyzeDialog({ onClose, selectedFiles }: { onClose: () => void; s
 
   return (
     <div
+      data-testid="media-batch-analyze-dialog"
       style={{ position: "fixed", inset: 0, zIndex: 100, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(0,0,0,0.6)", backdropFilter: "blur(4px)" }}
       onClick={onClose}
     >
       <div
+        data-testid="media-batch-analyze-dialog-content"
         style={{ background: "var(--card)", border: "1px solid var(--border)", borderRadius: "12px", padding: "1.5rem", maxWidth: "560px", width: "90%", display: "flex", flexDirection: "column", gap: "1rem", maxHeight: "80vh" }}
         onClick={(e) => e.stopPropagation()}
       >
@@ -2166,7 +2203,7 @@ function BatchAnalyzeDialog({ onClose, selectedFiles }: { onClose: () => void; s
               ? `AI Analyze ${selectedFiles.length} Selected`
               : "AI Analyze All Images"}
           </p>
-          <button type="button" onClick={onClose} style={{ display: "flex", alignItems: "center", border: "none", background: "transparent", cursor: "pointer", color: "var(--muted-foreground)", padding: "0.25rem" }}>
+          <button data-testid="media-batch-analyze-close-header" type="button" onClick={onClose} style={{ display: "flex", alignItems: "center", border: "none", background: "transparent", cursor: "pointer", color: "var(--muted-foreground)", padding: "0.25rem" }}>
             <X style={{ width: "1rem", height: "1rem" }} />
           </button>
         </div>
@@ -2181,6 +2218,7 @@ function BatchAnalyzeDialog({ onClose, selectedFiles }: { onClose: () => void; s
             {overwriteSetting === "ask" && (
               <label style={{ display: "flex", alignItems: "center", gap: "0.5rem", fontSize: "0.8rem", color: "var(--foreground)", cursor: "pointer" }}>
                 <input
+                  data-testid="media-batch-analyze-overwrite"
                   type="checkbox"
                   checked={overwriteChoice}
                   onChange={(e) => setOverwriteChoice(e.target.checked)}
@@ -2262,21 +2300,21 @@ function BatchAnalyzeDialog({ onClose, selectedFiles }: { onClose: () => void; s
         <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end" }}>
           {state === "idle" && (
             <>
-              <button type="button" onClick={onClose} style={{ padding: "0.4rem 1rem", borderRadius: "6px", border: "1px solid var(--border)", background: "transparent", cursor: "pointer", fontSize: "0.875rem" }}>
+              <button data-testid="media-batch-analyze-cancel" type="button" onClick={onClose} style={{ padding: "0.4rem 1rem", borderRadius: "6px", border: "1px solid var(--border)", background: "transparent", cursor: "pointer", fontSize: "0.875rem" }}>
                 Cancel
               </button>
-              <button type="button" onClick={runBatch} style={{ padding: "0.4rem 1rem", borderRadius: "6px", border: "none", background: "#F7BB2E", color: "#0D0D0D", cursor: "pointer", fontSize: "0.875rem", fontWeight: 600, display: "flex", alignItems: "center", gap: "0.375rem" }}>
+              <button data-testid="media-batch-analyze-start" type="button" onClick={runBatch} style={{ padding: "0.4rem 1rem", borderRadius: "6px", border: "none", background: "#F7BB2E", color: "#0D0D0D", cursor: "pointer", fontSize: "0.875rem", fontWeight: 600, display: "flex", alignItems: "center", gap: "0.375rem" }}>
                 <Sparkles style={{ width: 14, height: 14 }} /> Start Analysis
               </button>
             </>
           )}
           {state === "running" && (
-            <button type="button" onClick={stop} style={{ padding: "0.4rem 1rem", borderRadius: "6px", border: "1px solid var(--border)", background: "transparent", cursor: "pointer", fontSize: "0.875rem" }}>
+            <button data-testid="media-batch-analyze-stop" type="button" onClick={stop} style={{ padding: "0.4rem 1rem", borderRadius: "6px", border: "1px solid var(--border)", background: "transparent", cursor: "pointer", fontSize: "0.875rem" }}>
               Stop
             </button>
           )}
           {state === "done" && (
-            <button type="button" onClick={onClose} style={{ padding: "0.4rem 1rem", borderRadius: "6px", border: "none", background: "var(--primary)", color: "var(--primary-foreground)", cursor: "pointer", fontSize: "0.875rem" }}>
+            <button data-testid="media-batch-analyze-close" type="button" onClick={onClose} style={{ padding: "0.4rem 1rem", borderRadius: "6px", border: "none", background: "var(--primary)", color: "var(--primary-foreground)", cursor: "pointer", fontSize: "0.875rem" }}>
               Close
             </button>
           )}
diff --git a/packages/cms-admin/src/app/admin/(workspace)/organizations/new/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/organizations/new/page.tsx
index f950ba751..111fc7bd8 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/organizations/new/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/organizations/new/page.tsx
@@ -69,6 +69,7 @@ export default function NewOrganizationPage() {
           <div>
             <label style={{ fontSize: "0.85rem", fontWeight: 600, display: "block", marginBottom: "0.35rem" }}>Name</label>
             <input
+              data-testid="org-new-name-input"
               type="text"
               value={name}
               onChange={(e) => setName(e.target.value)}
@@ -137,6 +138,7 @@ export default function NewOrganizationPage() {
           {/* Actions */}
           <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: "0.5rem", borderTop: "1px solid var(--border)" }}>
             <button
+              data-testid="org-new-cancel-button"
               type="button"
               onClick={() => router.push("/admin/organizations")}
               style={{
@@ -148,6 +150,7 @@ export default function NewOrganizationPage() {
               Cancel
             </button>
             <button
+              data-testid="org-new-submit-button"
               type="button"
               onClick={handleCreate}
               disabled={creating || !name.trim()}
diff --git a/packages/cms-admin/src/app/admin/(workspace)/organizations/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/organizations/page.tsx
index 18a2afcdf..944f50337 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/organizations/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/organizations/page.tsx
@@ -81,7 +81,7 @@ export default function OrganizationsPage() {
     : orgs;
 
   return (
-    <>
+    <div data-testid="organizations-root">
     <ActionBar
       actions={
         <ActionButton variant="primary" onClick={() => router.push("/admin/organizations/new")} icon={<Plus style={{ width: 14, height: 14 }} />}>
@@ -97,6 +97,7 @@ export default function OrganizationsPage() {
         <div style={{ position: "relative", flex: 1, maxWidth: "280px" }}>
           <Search style={{ position: "absolute", left: "0.6rem", top: "50%", transform: "translateY(-50%)", width: "0.875rem", height: "0.875rem", color: "var(--muted-foreground)" }} />
           <input
+            data-testid="organizations-search-input"
             type="text"
             value={search}
             onChange={(e) => setSearch(e.target.value)}
@@ -118,6 +119,7 @@ export default function OrganizationsPage() {
       }}>
         {filtered.map((org) => (
           <div
+            data-testid={`organizations-card-${org.id}`}
             key={org.id}
             onClick={() => switchToOrg(org)}
             style={{
@@ -174,6 +176,6 @@ export default function OrganizationsPage() {
         </div>
       )}
     </div>
-    </>
+    </div>
   );
 }
diff --git a/packages/cms-admin/src/app/admin/(workspace)/organizations/settings/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/organizations/settings/page.tsx
index 2be6bc7cd..f6e732432 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/organizations/settings/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/organizations/settings/page.tsx
@@ -270,17 +270,17 @@ export default function OrgSettingsPage() {
 
       {/* Tabs */}
       <div style={{ display: "flex", gap: "0", borderBottom: "1px solid var(--border)", marginTop: "1.5rem", marginBottom: "1.5rem" }}>
-        <button type="button" style={tabStyle("general")} onClick={() => setTab("general")}>General</button>
-        <button type="button" style={tabStyle("deploy")} onClick={() => setTab("deploy")}>Deploy</button>
-        <button type="button" style={tabStyle("ai")} onClick={() => setTab("ai")}>AI</button>
-        <button type="button" style={tabStyle("email")} onClick={() => setTab("email")}>Email</button>
-        <button type="button" style={tabStyle("automation")} onClick={() => setTab("automation")}>Automation</button>
+        <button data-testid="org-settings-tab-general" type="button" style={tabStyle("general")} onClick={() => setTab("general")}>General</button>
+        <button data-testid="org-settings-tab-deploy" type="button" style={tabStyle("deploy")} onClick={() => setTab("deploy")}>Deploy</button>
+        <button data-testid="org-settings-tab-ai" type="button" style={tabStyle("ai")} onClick={() => setTab("ai")}>AI</button>
+        <button data-testid="org-settings-tab-email" type="button" style={tabStyle("email")} onClick={() => setTab("email")}>Email</button>
+        <button data-testid="org-settings-tab-automation" type="button" style={tabStyle("automation")} onClick={() => setTab("automation")}>Automation</button>
       </div>
 
       {/* ── Save button (shared across all non-general tabs) ── */}
       {tab !== "general" && (
         <div style={{ display: "flex", justifyContent: "flex-end", position: "sticky", top: "0.5rem", zIndex: 10, marginBottom: "1rem" }}>
-          <button type="button" onClick={handleSaveCreds} disabled={credsSaving}
+          <button data-testid="org-settings-save-creds" type="button" onClick={handleSaveCreds} disabled={credsSaving}
             style={{ padding: "0.45rem 1rem", borderRadius: "6px", border: "none", background: "var(--primary)", color: "var(--primary-foreground)", fontSize: "0.8rem", fontWeight: 600, cursor: credsSaving ? "wait" : "pointer" }}>
             {credsSaving ? "Saving..." : credsSaved ? "Saved" : "Save"}
           </button>
@@ -300,51 +300,51 @@ export default function OrgSettingsPage() {
           <div style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
             <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
               <span style={{ display: "flex", alignItems: "center", gap: "0.4rem" }}><label style={{ fontSize: "0.75rem", fontWeight: 500 }}>Fly.io API Token</label>{configuredBadge(creds.deployApiToken)}</span>
-              <a href="https://fly.io/dashboard" target="_blank" rel="noopener noreferrer"
+              <a data-testid="deploy-flyio-docs-link" href="https://fly.io/dashboard" target="_blank" rel="noopener noreferrer"
                 style={{ fontSize: "0.65rem", color: "var(--muted-foreground)", textDecoration: "none", display: "flex", alignItems: "center", gap: "0.2rem" }}>fly.io/dashboard <ExternalLink style={{ width: "0.6rem", height: "0.6rem" }} /></a>
             </div>
-            <input type="password" value={creds.deployApiToken} onChange={(e) => setCreds((c) => ({ ...c, deployApiToken: e.target.value }))}
+            <input data-testid="deploy-flyio-api-token" type="password" value={creds.deployApiToken} onChange={(e) => setCreds((c) => ({ ...c, deployApiToken: e.target.value }))}
               placeholder="FlyV1 ..." style={{ ...credInputStyle, fontFamily: "inherit" }} />
           </div>
           <div style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
             <label style={{ fontSize: "0.75rem", fontWeight: 500 }}>Fly.io Organization</label>
-            <input type="text" value={creds.deployFlyOrg} onChange={(e) => setCreds((c) => ({ ...c, deployFlyOrg: e.target.value }))}
+            <input data-testid="deploy-flyio-org" type="text" value={creds.deployFlyOrg} onChange={(e) => setCreds((c) => ({ ...c, deployFlyOrg: e.target.value }))}
               placeholder="Auto-detect from token" style={credInputStyle} />
           </div>
           <div style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
             <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
               <span style={{ display: "flex", alignItems: "center", gap: "0.4rem" }}><label style={{ fontSize: "0.75rem", fontWeight: 500 }}>GitHub Personal Access Token</label>{configuredBadge(creds.deployGitHubToken)}</span>
-              <a href="https://github.com/settings/tokens/new?scopes=repo&description=webhouse-deploy" target="_blank" rel="noopener noreferrer"
+              <a data-testid="deploy-github-token-link" href="https://github.com/settings/tokens/new?scopes=repo&description=webhouse-deploy" target="_blank" rel="noopener noreferrer"
                 style={{ fontSize: "0.65rem", color: "var(--muted-foreground)", textDecoration: "none", display: "flex", alignItems: "center", gap: "0.2rem" }}>Create token <ExternalLink style={{ width: "0.6rem", height: "0.6rem" }} /></a>
             </div>
-            <input type="password" value={creds.deployGitHubToken} onChange={(e) => setCreds((c) => ({ ...c, deployGitHubToken: e.target.value }))}
+            <input data-testid="deploy-github-token" type="password" value={creds.deployGitHubToken} onChange={(e) => setCreds((c) => ({ ...c, deployGitHubToken: e.target.value }))}
               placeholder="ghp_..." style={{ ...credInputStyle, fontFamily: "inherit" }} />
           </div>
           <div style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
             <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
               <span style={{ display: "flex", alignItems: "center", gap: "0.4rem" }}><label style={{ fontSize: "0.75rem", fontWeight: 500 }}>Vercel Deploy Hook</label>{configuredBadge(creds.deployVercelHookUrl)}</span>
-              <a href="https://vercel.com/docs/deploy-hooks" target="_blank" rel="noopener noreferrer"
+              <a data-testid="deploy-vercel-docs-link" href="https://vercel.com/docs/deploy-hooks" target="_blank" rel="noopener noreferrer"
                 style={{ fontSize: "0.65rem", color: "var(--muted-foreground)", textDecoration: "none", display: "flex", alignItems: "center", gap: "0.2rem" }}>Docs <ExternalLink style={{ width: "0.6rem", height: "0.6rem" }} /></a>
             </div>
-            <input type="url" value={creds.deployVercelHookUrl} onChange={(e) => setCreds((c) => ({ ...c, deployVercelHookUrl: e.target.value }))}
+            <input data-testid="deploy-vercel-hook-url" type="url" value={creds.deployVercelHookUrl} onChange={(e) => setCreds((c) => ({ ...c, deployVercelHookUrl: e.target.value }))}
               placeholder="https://api.vercel.com/v1/integrations/deploy/..." style={credInputStyle} />
           </div>
           <div style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
             <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
               <span style={{ display: "flex", alignItems: "center", gap: "0.4rem" }}><label style={{ fontSize: "0.75rem", fontWeight: 500 }}>Netlify Build Hook</label>{configuredBadge(creds.deployNetlifyHookUrl)}</span>
-              <a href="https://docs.netlify.com/configure-builds/build-hooks/" target="_blank" rel="noopener noreferrer"
+              <a data-testid="deploy-netlify-docs-link" href="https://docs.netlify.com/configure-builds/build-hooks/" target="_blank" rel="noopener noreferrer"
                 style={{ fontSize: "0.65rem", color: "var(--muted-foreground)", textDecoration: "none", display: "flex", alignItems: "center", gap: "0.2rem" }}>Docs <ExternalLink style={{ width: "0.6rem", height: "0.6rem" }} /></a>
             </div>
-            <input type="url" value={creds.deployNetlifyHookUrl} onChange={(e) => setCreds((c) => ({ ...c, deployNetlifyHookUrl: e.target.value }))}
+            <input data-testid="deploy-netlify-hook-url" type="url" value={creds.deployNetlifyHookUrl} onChange={(e) => setCreds((c) => ({ ...c, deployNetlifyHookUrl: e.target.value }))}
               placeholder="https://api.netlify.com/build_hooks/..." style={credInputStyle} />
           </div>
           <div style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
             <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
               <span style={{ display: "flex", alignItems: "center", gap: "0.4rem" }}><label style={{ fontSize: "0.75rem", fontWeight: 500 }}>Cloudflare Pages Deploy Hook</label>{configuredBadge(creds.deployCloudflareHookUrl)}</span>
-              <a href="https://developers.cloudflare.com/pages/configuration/deploy-hooks/" target="_blank" rel="noopener noreferrer"
+              <a data-testid="deploy-cloudflare-docs-link" href="https://developers.cloudflare.com/pages/configuration/deploy-hooks/" target="_blank" rel="noopener noreferrer"
                 style={{ fontSize: "0.65rem", color: "var(--muted-foreground)", textDecoration: "none", display: "flex", alignItems: "center", gap: "0.2rem" }}>Docs <ExternalLink style={{ width: "0.6rem", height: "0.6rem" }} /></a>
             </div>
-            <input type="url" value={creds.deployCloudflareHookUrl} onChange={(e) => setCreds((c) => ({ ...c, deployCloudflareHookUrl: e.target.value }))}
+            <input data-testid="deploy-cloudflare-hook-url" type="url" value={creds.deployCloudflareHookUrl} onChange={(e) => setCreds((c) => ({ ...c, deployCloudflareHookUrl: e.target.value }))}
               placeholder="https://api.cloudflare.com/client/v4/pages/webhooks/deploy_hooks/..." style={credInputStyle} />
           </div>
         </div>
@@ -359,28 +359,28 @@ export default function OrgSettingsPage() {
             <div style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
               <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                 <span style={{ display: "flex", alignItems: "center", gap: "0.4rem" }}><label style={{ fontSize: "0.75rem", fontWeight: 500 }}>Anthropic API Key</label>{configuredBadge(creds.aiAnthropicApiKey)}</span>
-                <a href="https://console.anthropic.com/settings/keys" target="_blank" rel="noopener noreferrer"
+                <a data-testid="ai-anthropic-key-link" href="https://console.anthropic.com/settings/keys" target="_blank" rel="noopener noreferrer"
                   style={{ fontSize: "0.65rem", color: "var(--muted-foreground)", textDecoration: "none", display: "flex", alignItems: "center", gap: "0.2rem" }}>Get key <ExternalLink style={{ width: "0.6rem", height: "0.6rem" }} /></a>
               </div>
-              <input type="password" value={creds.aiAnthropicApiKey} onChange={(e) => setCreds((c) => ({ ...c, aiAnthropicApiKey: e.target.value }))}
+              <input data-testid="ai-anthropic-api-key" type="password" value={creds.aiAnthropicApiKey} onChange={(e) => setCreds((c) => ({ ...c, aiAnthropicApiKey: e.target.value }))}
                 placeholder="sk-ant-..." style={{ ...credInputStyle, fontFamily: "inherit" }} />
             </div>
             <div style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
               <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                 <span style={{ display: "flex", alignItems: "center", gap: "0.4rem" }}><label style={{ fontSize: "0.75rem", fontWeight: 500 }}>OpenAI API Key</label>{configuredBadge(creds.aiOpenaiApiKey)}</span>
-                <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener noreferrer"
+                <a data-testid="ai-openai-key-link" href="https://platform.openai.com/api-keys" target="_blank" rel="noopener noreferrer"
                   style={{ fontSize: "0.65rem", color: "var(--muted-foreground)", textDecoration: "none", display: "flex", alignItems: "center", gap: "0.2rem" }}>Get key <ExternalLink style={{ width: "0.6rem", height: "0.6rem" }} /></a>
               </div>
-              <input type="password" value={creds.aiOpenaiApiKey} onChange={(e) => setCreds((c) => ({ ...c, aiOpenaiApiKey: e.target.value }))}
+              <input data-testid="ai-openai-api-key" type="password" value={creds.aiOpenaiApiKey} onChange={(e) => setCreds((c) => ({ ...c, aiOpenaiApiKey: e.target.value }))}
                 placeholder="sk-..." style={{ ...credInputStyle, fontFamily: "inherit" }} />
             </div>
             <div style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
               <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                 <span style={{ display: "flex", alignItems: "center", gap: "0.4rem" }}><label style={{ fontSize: "0.75rem", fontWeight: 500 }}>Google Gemini API Key</label>{configuredBadge(creds.aiGeminiApiKey)}</span>
-                <a href="https://aistudio.google.com/apikey" target="_blank" rel="noopener noreferrer"
+                <a data-testid="ai-gemini-key-link" href="https://aistudio.google.com/apikey" target="_blank" rel="noopener noreferrer"
                   style={{ fontSize: "0.65rem", color: "var(--muted-foreground)", textDecoration: "none", display: "flex", alignItems: "center", gap: "0.2rem" }}>Get key <ExternalLink style={{ width: "0.6rem", height: "0.6rem" }} /></a>
               </div>
-              <input type="password" value={creds.aiGeminiApiKey} onChange={(e) => setCreds((c) => ({ ...c, aiGeminiApiKey: e.target.value }))}
+              <input data-testid="ai-gemini-api-key" type="password" value={creds.aiGeminiApiKey} onChange={(e) => setCreds((c) => ({ ...c, aiGeminiApiKey: e.target.value }))}
                 placeholder="AI..." style={{ ...credInputStyle, fontFamily: "inherit" }} />
             </div>
           </div>
@@ -390,7 +390,7 @@ export default function OrgSettingsPage() {
           <div style={{ background: "var(--card)", border: "1px solid var(--border)", borderRadius: "10px", padding: "1.25rem", display: "flex", flexDirection: "column", gap: "1rem", marginBottom: "1.5rem" }}>
             <div style={{ display: "flex", gap: "0.5rem" }}>
               {(["brave", "tavily"] as const).map((p) => (
-                <button key={p} type="button" onClick={() => setCreds((c) => ({ ...c, aiWebSearchProvider: p }))}
+                <button data-testid={`ai-web-search-${p}`} key={p} type="button" onClick={() => setCreds((c) => ({ ...c, aiWebSearchProvider: p }))}
                   style={{ padding: "0.35rem 0.75rem", borderRadius: "6px", fontSize: "0.75rem", fontWeight: 600, cursor: "pointer",
                     border: creds.aiWebSearchProvider === p ? "1px solid var(--primary)" : "1px solid var(--border)",
                     background: creds.aiWebSearchProvider === p ? "color-mix(in srgb, var(--primary) 10%, transparent)" : "transparent",
@@ -401,19 +401,19 @@ export default function OrgSettingsPage() {
             <div style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
               <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                 <span style={{ display: "flex", alignItems: "center", gap: "0.4rem" }}><label style={{ fontSize: "0.75rem", fontWeight: 500 }}>Brave Search API Key</label>{configuredBadge(creds.aiBraveApiKey)}</span>
-                <a href="https://brave.com/search/api/" target="_blank" rel="noopener noreferrer"
+                <a data-testid="ai-brave-key-link" href="https://brave.com/search/api/" target="_blank" rel="noopener noreferrer"
                   style={{ fontSize: "0.65rem", color: "var(--muted-foreground)", textDecoration: "none", display: "flex", alignItems: "center", gap: "0.2rem" }}>Get key <ExternalLink style={{ width: "0.6rem", height: "0.6rem" }} /></a>
               </div>
-              <input type="password" value={creds.aiBraveApiKey} onChange={(e) => setCreds((c) => ({ ...c, aiBraveApiKey: e.target.value }))}
+              <input data-testid="ai-brave-api-key" type="password" value={creds.aiBraveApiKey} onChange={(e) => setCreds((c) => ({ ...c, aiBraveApiKey: e.target.value }))}
                 placeholder="BSA..." style={{ ...credInputStyle, fontFamily: "inherit" }} />
             </div>
             <div style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
               <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                 <span style={{ display: "flex", alignItems: "center", gap: "0.4rem" }}><label style={{ fontSize: "0.75rem", fontWeight: 500 }}>Tavily API Key</label>{configuredBadge(creds.aiTavilyApiKey)}</span>
-                <a href="https://tavily.com/" target="_blank" rel="noopener noreferrer"
+                <a data-testid="ai-tavily-key-link" href="https://tavily.com/" target="_blank" rel="noopener noreferrer"
                   style={{ fontSize: "0.65rem", color: "var(--muted-foreground)", textDecoration: "none", display: "flex", alignItems: "center", gap: "0.2rem" }}>Get key <ExternalLink style={{ width: "0.6rem", height: "0.6rem" }} /></a>
               </div>
-              <input type="password" value={creds.aiTavilyApiKey} onChange={(e) => setCreds((c) => ({ ...c, aiTavilyApiKey: e.target.value }))}
+              <input data-testid="ai-tavily-api-key" type="password" value={creds.aiTavilyApiKey} onChange={(e) => setCreds((c) => ({ ...c, aiTavilyApiKey: e.target.value }))}
                 placeholder="tvly-..." style={{ ...credInputStyle, fontFamily: "inherit" }} />
             </div>
           </div>
@@ -424,24 +424,24 @@ export default function OrgSettingsPage() {
             <div style={{ display: "flex", gap: "1rem" }}>
               <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: "0.3rem" }}>
                 <label style={{ fontSize: "0.75rem", fontWeight: 500 }}>Content writing model</label>
-                <input type="text" value={creds.aiContentModel} onChange={(e) => setCreds((c) => ({ ...c, aiContentModel: e.target.value }))}
+                <input data-testid="ai-content-model" type="text" value={creds.aiContentModel} onChange={(e) => setCreds((c) => ({ ...c, aiContentModel: e.target.value }))}
                   placeholder="claude-haiku-4-5-20251001" style={credInputStyle} />
               </div>
               <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: "0.3rem" }}>
                 <label style={{ fontSize: "0.75rem", fontWeight: 500 }}>Max tokens</label>
-                <input type="number" value={creds.aiContentMaxTokens || ""} onChange={(e) => setCreds((c) => ({ ...c, aiContentMaxTokens: parseInt(e.target.value) || 0 }))}
+                <input data-testid="ai-content-max-tokens" type="number" value={creds.aiContentMaxTokens || ""} onChange={(e) => setCreds((c) => ({ ...c, aiContentMaxTokens: parseInt(e.target.value) || 0 }))}
                   placeholder="4096" style={credInputStyle} />
               </div>
             </div>
             <div style={{ display: "flex", gap: "1rem" }}>
               <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: "0.3rem" }}>
                 <label style={{ fontSize: "0.75rem", fontWeight: 500 }}>Interactives model</label>
-                <input type="text" value={creds.aiInteractivesModel} onChange={(e) => setCreds((c) => ({ ...c, aiInteractivesModel: e.target.value }))}
+                <input data-testid="ai-interactives-model" type="text" value={creds.aiInteractivesModel} onChange={(e) => setCreds((c) => ({ ...c, aiInteractivesModel: e.target.value }))}
                   placeholder="claude-sonnet-4-6" style={credInputStyle} />
               </div>
               <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: "0.3rem" }}>
                 <label style={{ fontSize: "0.75rem", fontWeight: 500 }}>Max tokens</label>
-                <input type="number" value={creds.aiInteractivesMaxTokens || ""} onChange={(e) => setCreds((c) => ({ ...c, aiInteractivesMaxTokens: parseInt(e.target.value) || 0 }))}
+                <input data-testid="ai-interactives-max-tokens" type="number" value={creds.aiInteractivesMaxTokens || ""} onChange={(e) => setCreds((c) => ({ ...c, aiInteractivesMaxTokens: parseInt(e.target.value) || 0 }))}
                   placeholder="16384" style={credInputStyle} />
               </div>
             </div>
@@ -449,17 +449,17 @@ export default function OrgSettingsPage() {
             <div style={{ display: "flex", gap: "1rem" }}>
               <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: "0.3rem" }}>
                 <label style={{ fontSize: "0.75rem", fontWeight: 500 }}>Chat model</label>
-                <input type="text" value={creds.aiChatModel} onChange={(e) => setCreds((c) => ({ ...c, aiChatModel: e.target.value }))}
+                <input data-testid="ai-chat-model" type="text" value={creds.aiChatModel} onChange={(e) => setCreds((c) => ({ ...c, aiChatModel: e.target.value }))}
                   placeholder="claude-sonnet-4-6" style={credInputStyle} />
               </div>
               <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: "0.3rem" }}>
                 <label style={{ fontSize: "0.75rem", fontWeight: 500 }}>Max tokens</label>
-                <input type="number" value={creds.aiChatMaxTokens || ""} onChange={(e) => setCreds((c) => ({ ...c, aiChatMaxTokens: parseInt(e.target.value) || 0 }))}
+                <input data-testid="ai-chat-max-tokens" type="number" value={creds.aiChatMaxTokens || ""} onChange={(e) => setCreds((c) => ({ ...c, aiChatMaxTokens: parseInt(e.target.value) || 0 }))}
                   placeholder="8192" style={credInputStyle} />
               </div>
               <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: "0.3rem" }}>
                 <label style={{ fontSize: "0.75rem", fontWeight: 500 }}>Tool iterations</label>
-                <input type="number" value={creds.aiChatMaxToolIterations || ""} onChange={(e) => setCreds((c) => ({ ...c, aiChatMaxToolIterations: parseInt(e.target.value) || 0 }))}
+                <input data-testid="ai-chat-max-tool-iterations" type="number" value={creds.aiChatMaxToolIterations || ""} onChange={(e) => setCreds((c) => ({ ...c, aiChatMaxToolIterations: parseInt(e.target.value) || 0 }))}
                   placeholder="25" style={credInputStyle} />
               </div>
             </div>
@@ -470,7 +470,7 @@ export default function OrgSettingsPage() {
               <p style={{ fontSize: "0.68rem", color: "var(--muted-foreground)", margin: "0.25rem 0 0.5rem" }}>
                 Default for all sites in this org. Sites can override.
               </p>
-              <select
+              <select data-testid="ai-image-overwrite"
                 value={creds.aiImageOverwrite}
                 onChange={(e) => setCreds((c) => ({ ...c, aiImageOverwrite: e.target.value }))}
                 style={{ ...credInputStyle, fontFamily: "inherit", cursor: "pointer" }}
@@ -491,20 +491,20 @@ export default function OrgSettingsPage() {
           <div style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
             <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
               <span style={{ display: "flex", alignItems: "center", gap: "0.4rem" }}><label style={{ fontSize: "0.75rem", fontWeight: 500 }}>Resend API Key</label>{configuredBadge(creds.resendApiKey)}</span>
-              <a href="https://resend.com/api-keys" target="_blank" rel="noopener noreferrer"
+              <a data-testid="email-resend-link" href="https://resend.com/api-keys" target="_blank" rel="noopener noreferrer"
                 style={{ fontSize: "0.65rem", color: "var(--muted-foreground)", textDecoration: "none", display: "flex", alignItems: "center", gap: "0.2rem" }}>resend.com <ExternalLink style={{ width: "0.6rem", height: "0.6rem" }} /></a>
             </div>
-            <input type="password" value={creds.resendApiKey} onChange={(e) => setCreds((c) => ({ ...c, resendApiKey: e.target.value }))}
+            <input data-testid="email-resend-api-key" type="password" value={creds.resendApiKey} onChange={(e) => setCreds((c) => ({ ...c, resendApiKey: e.target.value }))}
               placeholder="re_..." style={{ ...credInputStyle, fontFamily: "inherit" }} />
           </div>
           <div style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
             <label style={{ fontSize: "0.75rem", fontWeight: 500 }}>Sender email address</label>
-            <input type="email" value={creds.emailFrom} onChange={(e) => setCreds((c) => ({ ...c, emailFrom: e.target.value }))}
+            <input data-testid="email-from-address" type="email" value={creds.emailFrom} onChange={(e) => setCreds((c) => ({ ...c, emailFrom: e.target.value }))}
               placeholder="noreply@example.com" style={credInputStyle} />
           </div>
           <div style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
             <label style={{ fontSize: "0.75rem", fontWeight: 500 }}>Sender display name</label>
-            <input type="text" value={creds.emailFromName} onChange={(e) => setCreds((c) => ({ ...c, emailFromName: e.target.value }))}
+            <input data-testid="email-from-name" type="text" value={creds.emailFromName} onChange={(e) => setCreds((c) => ({ ...c, emailFromName: e.target.value }))}
               placeholder="webhouse.app" style={{ ...credInputStyle, fontFamily: "inherit" }} />
           </div>
         </div>
@@ -518,16 +518,16 @@ export default function OrgSettingsPage() {
             <div style={{ display: "flex", gap: "1rem" }}>
               <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: "0.3rem" }}>
                 <label style={{ fontSize: "0.75rem", fontWeight: 500 }}>Backup schedule</label>
-                <CustomSelect value={creds.backupSchedule || "off"} onChange={(v) => setCreds((c) => ({ ...c, backupSchedule: v }))}
+                <CustomSelect data-testid="automation-backup-schedule" value={creds.backupSchedule || "off"} onChange={(v) => setCreds((c) => ({ ...c, backupSchedule: v }))}
                   options={[{ value: "off", label: "Off" }, { value: "daily", label: "Daily" }, { value: "weekly", label: "Weekly" }]} />
               </div>
               <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: "0.3rem" }}>
                 <label style={{ fontSize: "0.75rem", fontWeight: 500 }}>Backup time</label>
-                <CustomTimeInput value={creds.backupTime} onChange={(v) => setCreds((c) => ({ ...c, backupTime: v }))} />
+                <CustomTimeInput data-testid="automation-backup-time" value={creds.backupTime} onChange={(v) => setCreds((c) => ({ ...c, backupTime: v }))} />
               </div>
               <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: "0.3rem" }}>
                 <label style={{ fontSize: "0.75rem", fontWeight: 500 }}>Retention (days)</label>
-                <input type="number" value={creds.backupRetentionDays || ""} onChange={(e) => setCreds((c) => ({ ...c, backupRetentionDays: parseInt(e.target.value) || 0 }))}
+                <input data-testid="automation-backup-retention" type="number" value={creds.backupRetentionDays || ""} onChange={(e) => setCreds((c) => ({ ...c, backupRetentionDays: parseInt(e.target.value) || 0 }))}
                   placeholder="30" style={credInputStyle} />
               </div>
             </div>
@@ -538,12 +538,12 @@ export default function OrgSettingsPage() {
             <div style={{ display: "flex", gap: "1rem" }}>
               <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: "0.3rem" }}>
                 <label style={{ fontSize: "0.75rem", fontWeight: 500 }}>Link check schedule</label>
-                <CustomSelect value={creds.linkCheckSchedule || "off"} onChange={(v) => setCreds((c) => ({ ...c, linkCheckSchedule: v }))}
+                <CustomSelect data-testid="automation-link-check-schedule" value={creds.linkCheckSchedule || "off"} onChange={(v) => setCreds((c) => ({ ...c, linkCheckSchedule: v }))}
                   options={[{ value: "off", label: "Off" }, { value: "daily", label: "Daily" }, { value: "weekly", label: "Weekly" }]} />
               </div>
               <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: "0.3rem" }}>
                 <label style={{ fontSize: "0.75rem", fontWeight: 500 }}>Link check time</label>
-                <CustomTimeInput value={creds.linkCheckTime} onChange={(v) => setCreds((c) => ({ ...c, linkCheckTime: v }))} />
+                <CustomTimeInput data-testid="automation-link-check-time" value={creds.linkCheckTime} onChange={(v) => setCreds((c) => ({ ...c, linkCheckTime: v }))} />
               </div>
             </div>
           </div>
@@ -563,7 +563,7 @@ export default function OrgSettingsPage() {
           {/* Name */}
           <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "1rem 1.25rem", borderBottom: "1px solid var(--border)" }}>
             <label style={{ fontSize: "0.85rem", fontWeight: 500, minWidth: "160px" }}>Organization name</label>
-            <input
+            <input data-testid="general-org-name"
               type="text"
               value={orgName}
               onChange={(e) => setOrgName(e.target.value)}
@@ -581,7 +581,7 @@ export default function OrgSettingsPage() {
           <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "1rem 1.25rem", borderBottom: "1px solid var(--border)" }}>
             <label style={{ fontSize: "0.85rem", fontWeight: 500, minWidth: "160px" }}>Type</label>
             <div style={{ maxWidth: "320px", width: "100%" }}>
-              <CustomSelect
+              <CustomSelect data-testid="general-org-type"
                 options={[
                   { value: "agency", label: "Agency" },
                   { value: "company", label: "Company" },
@@ -598,7 +598,7 @@ export default function OrgSettingsPage() {
           <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "1rem 1.25rem" }}>
             <label style={{ fontSize: "0.85rem", fontWeight: 500, minWidth: "160px" }}>Plan</label>
             <div style={{ maxWidth: "320px", width: "100%" }}>
-              <CustomSelect
+              <CustomSelect data-testid="general-org-plan"
                 options={[
                   { value: "free", label: "Free — $0/month" },
                   { value: "pro", label: "Pro — $25/month" },
@@ -611,7 +611,7 @@ export default function OrgSettingsPage() {
           </div>
         </div>
         <div style={{ display: "flex", justifyContent: "flex-end", gap: "0.5rem", marginTop: "0.75rem" }}>
-          <button
+          <button data-testid="general-cancel"
             type="button"
             onClick={() => router.push("/admin/organizations")}
             style={{
@@ -622,7 +622,7 @@ export default function OrgSettingsPage() {
           >
             Cancel
           </button>
-          <button
+          <button data-testid="general-save"
             type="button"
             onClick={handleSave}
             disabled={saving}
@@ -678,7 +678,7 @@ export default function OrgSettingsPage() {
           <p style={{ fontSize: "0.75rem", color: "var(--muted-foreground)", marginBottom: "0.75rem" }}>
             Make sure you have made a backup of your projects if you want to keep your data.
           </p>
-          <button
+          <button data-testid="general-delete-org"
             type="button"
             onClick={() => setShowDeleteDialog(true)}
             style={{
@@ -696,7 +696,7 @@ export default function OrgSettingsPage() {
 
       {/* Delete confirmation dialog */}
       {showDeleteDialog && (
-        <div
+        <div data-testid="delete-org-dialog"
           style={{ position: "fixed", inset: 0, zIndex: 100, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(0,0,0,0.6)" }}
           onClick={(e) => { if (e.target === e.currentTarget) { setShowDeleteDialog(false); setDeleteConfirm(""); } }}
         >
@@ -706,7 +706,7 @@ export default function OrgSettingsPage() {
           }}>
             <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "1rem" }}>
               <h3 style={{ fontSize: "1rem", fontWeight: 700 }}>Delete organization</h3>
-              <button type="button" onClick={() => { setShowDeleteDialog(false); setDeleteConfirm(""); }}
+              <button data-testid="delete-org-close" type="button" onClick={() => { setShowDeleteDialog(false); setDeleteConfirm(""); }}
                 style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", fontSize: "1.25rem" }}>×</button>
             </div>
 
@@ -717,7 +717,7 @@ export default function OrgSettingsPage() {
             <p style={{ fontSize: "0.8rem", marginBottom: "0.5rem", marginTop: "1rem" }}>
               Type <code style={{ background: "var(--muted)", padding: "0.15rem 0.4rem", borderRadius: "4px", fontSize: "0.75rem", fontFamily: "monospace" }}>{deleteCode}</code> to confirm.
             </p>
-            <input
+            <input data-testid="delete-org-confirm-input"
               type="text"
               value={deleteConfirm}
               onChange={(e) => setDeleteConfirm(e.target.value)}
@@ -730,7 +730,7 @@ export default function OrgSettingsPage() {
                 marginBottom: "1rem",
               }}
             />
-            <button
+            <button data-testid="delete-org-confirm"
               type="button"
               disabled={deleteConfirm !== deleteCode || deleting}
               onClick={async () => {
diff --git a/packages/cms-admin/src/app/admin/(workspace)/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/page.tsx
index d9a88a767..6a157f7b2 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/page.tsx
@@ -17,5 +17,5 @@ export default async function AdminDashboard() {
     throw err;
   }
 
-  return <DashboardStats />;
+  return <div data-testid="dashboard-root"><DashboardStats /></div>;
 }
diff --git a/packages/cms-admin/src/app/admin/(workspace)/performance/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/performance/page.tsx
index 6700d8549..905101fe9 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/performance/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/performance/page.tsx
@@ -131,7 +131,7 @@ export default function PerformancePage() {
   const hasData = runs.length > 0 || agents.length > 0;
 
   return (
-    <>
+    <div data-testid="performance-root">
     <ActionBar helpArticleId="performance-intro"
       actions={
         <ActionButton variant="primary" onClick={fetchAll} disabled={loading} icon={<RefreshCw style={{ width: 14, height: 14 }} className={loading ? "animate-spin" : ""} />}>
@@ -481,7 +481,7 @@ export default function PerformancePage() {
         </div>
       )}
     </div>
-    </>
+    </div>
   );
 }
 
diff --git a/packages/cms-admin/src/app/admin/(workspace)/preview/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/preview/page.tsx
index 21382e447..3b5762fe8 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/preview/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/preview/page.tsx
@@ -50,7 +50,7 @@ function PreviewFrame() {
   }, [url]);
 
   return (
-    <div style={{ display: "flex", flexDirection: "column", height: "calc(100vh - 84px)" }}>
+    <div data-testid="preview-root" style={{ display: "flex", flexDirection: "column", height: "calc(100vh - 84px)" }}>
       {/* Slim toolbar */}
       <div style={{
         display: "flex", alignItems: "center", gap: "0.5rem",
@@ -76,6 +76,7 @@ function PreviewFrame() {
 
         {/* Rebuild button */}
         <button
+          data-testid="preview-rebuild-button"
           type="button"
           onClick={rebuild}
           disabled={building}
@@ -95,6 +96,7 @@ function PreviewFrame() {
 
         {/* Reload button */}
         <button
+          data-testid="preview-reload-button"
           type="button"
           onClick={reload}
           title="Reload preview"
@@ -109,6 +111,7 @@ function PreviewFrame() {
 
         {/* External link */}
         <a
+          data-testid="preview-external-link"
           href={url}
           target="_blank"
           rel="noopener noreferrer"
diff --git a/packages/cms-admin/src/app/admin/(workspace)/scheduled/calendar-client.tsx b/packages/cms-admin/src/app/admin/(workspace)/scheduled/calendar-client.tsx
index afbdaf2a1..d0e86e93d 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/scheduled/calendar-client.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/scheduled/calendar-client.tsx
@@ -144,6 +144,7 @@ export function ScheduledCalendar({ events, calendarToken, orgId, siteId }: { ev
           <div className="flex items-center gap-0.5 rounded-lg border border-border p-0.5">
             {(["day", "week", "month", "year"] as ViewMode[]).map((v) => (
               <button
+                data-testid={`calendar-view-${v}`}
                 key={v}
                 type="button"
                 onClick={() => setView(v)}
@@ -155,6 +156,7 @@ export function ScheduledCalendar({ events, calendarToken, orgId, siteId }: { ev
           </div>
           <div className="flex items-center gap-1">
             <button
+              data-testid="calendar-subscribe-button"
               type="button"
               onClick={() => {
                 const feedPath = `/api/cms/scheduled/calendar.ics?token=${calendarToken}&org=${orgId}&site=${siteId}`;
@@ -190,13 +192,13 @@ export function ScheduledCalendar({ events, calendarToken, orgId, siteId }: { ev
                 : `${MONTHS[month]} ${year}`}
           </h2>
           <div className="flex items-center gap-0.5">
-            <button type="button" onClick={() => navigate(-1)} className="p-1.5 rounded-md hover:bg-secondary transition-colors text-muted-foreground">
+            <button data-testid="calendar-button-prev" type="button" onClick={() => navigate(-1)} className="p-1.5 rounded-md hover:bg-secondary transition-colors text-muted-foreground">
               <ChevronLeft className="w-4 h-4" />
             </button>
-            <button type="button" onClick={goToday} className="px-3 py-1 rounded-md text-xs font-medium border border-border hover:bg-secondary transition-colors text-muted-foreground">
+            <button data-testid="calendar-button-today" type="button" onClick={goToday} className="px-3 py-1 rounded-md text-xs font-medium border border-border hover:bg-secondary transition-colors text-muted-foreground">
               Today
             </button>
-            <button type="button" onClick={() => navigate(1)} className="p-1.5 rounded-md hover:bg-secondary transition-colors text-muted-foreground">
+            <button data-testid="calendar-button-3" type="button" onClick={() => navigate(1)} className="p-1.5 rounded-md hover:bg-secondary transition-colors text-muted-foreground">
               <ChevronRight className="w-4 h-4" />
             </button>
           </div>
@@ -294,6 +296,7 @@ function MonthView({ year, month, todayKey, selectedDate, eventsMap, onSelectDat
           const isToday = cell.key === todayKey;
           return (
             <button
+              data-testid={`calendar-day-${cell.key}`}
               key={cell.key}
               type="button"
               onClick={() => onSelectDate(cell.key)}
@@ -463,6 +466,7 @@ function WeekView({ selectedDate, todayKey, eventsMap, onSelectDate, scrollToNow
           const isToday = day.key === todayKey;
           return (
             <button
+              data-testid={`calendar-week-day-${day.key}`}
               key={day.key}
               type="button"
               onClick={() => onSelectDate(day.key)}
@@ -706,6 +710,7 @@ function YearView({ year, todayKey, eventsMap, onSelectMonth }: {
 
         return (
           <button
+            data-testid={`calendar-month-${m}`}
             key={m}
             type="button"
             onClick={() => onSelectMonth(m)}
diff --git a/packages/cms-admin/src/app/admin/(workspace)/scheduled/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/scheduled/page.tsx
index 8b1757c6d..68f30207d 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/scheduled/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/scheduled/page.tsx
@@ -1,5 +1,5 @@
 import { ScheduledPageClient } from "./scheduled-page-client";
 
 export default function ScheduledPage() {
-  return <ScheduledPageClient />;
+  return <div data-testid="scheduled-root"><ScheduledPageClient /></div>;
 }
diff --git a/packages/cms-admin/src/app/admin/(workspace)/seo/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/seo/page.tsx
index 062a80ec3..50ae36d8b 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/seo/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/seo/page.tsx
@@ -204,7 +204,7 @@ export default function SeoPage() {
   };
 
   return (
-    <>
+    <div data-testid="seo-root">
       <TabTitle value="SEO" />
       <ActionBar helpArticleId="seo-dashboard-intro" actions={
         <div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
@@ -283,6 +283,8 @@ export default function SeoPage() {
             {(["documents", "keywords"] as const).map((tab) => (
               <button
                 key={tab}
+                type="button"
+                data-testid={`seo-tab-${tab}`}
                 onClick={() => setActiveTab(tab)}
                 style={{
                   padding: "0.5rem 1rem", border: "none", background: "none", cursor: "pointer",
@@ -302,10 +304,12 @@ export default function SeoPage() {
             <div>
               <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", marginBottom: "0.75rem" }}>
                 <form
+                  data-testid="seo-keyword-form"
                   onSubmit={(e) => { e.preventDefault(); handleAddKeyword(); }}
                   style={{ display: "flex", gap: "0.375rem", alignItems: "center" }}
                 >
                   <input
+                    data-testid="seo-keyword-input"
                     type="text"
                     value={newKeyword}
                     onChange={(e) => setNewKeyword(e.target.value)}
@@ -317,6 +321,7 @@ export default function SeoPage() {
                     }}
                   />
                   <button
+                    data-testid="seo-keyword-add-button"
                     type="submit"
                     disabled={addingKeyword || !newKeyword.trim()}
                     style={{
@@ -391,16 +396,22 @@ export default function SeoPage() {
                               <span style={{ display: "inline-flex", alignItems: "center", gap: "0.25rem" }}>
                                 <span style={{ fontSize: "0.65rem", color: "var(--destructive)", fontWeight: 500, padding: "0 2px" }}>Remove?</span>
                                 <button
+                                  type="button"
+                                  data-testid={`keyword-confirm-yes-${kw.keyword}`}
                                   onClick={(e) => { e.stopPropagation(); handleRemoveKeyword(kw.keyword); }}
                                   style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "none", background: "var(--destructive)", color: "#fff", cursor: "pointer", lineHeight: 1 }}
                                 >Yes</button>
                                 <button
+                                  type="button"
+                                  data-testid={`keyword-confirm-no-${kw.keyword}`}
                                   onClick={(e) => { e.stopPropagation(); setConfirmRemove(null); }}
                                   style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "1px solid var(--border)", background: "transparent", color: "var(--foreground)", cursor: "pointer", lineHeight: 1 }}
                                 >No</button>
                               </span>
                             ) : (
                               <button
+                                type="button"
+                                data-testid={`keyword-delete-${kw.keyword}`}
                                 onClick={(e) => { e.stopPropagation(); setConfirmRemove(kw.keyword); }}
                                 style={{
                                   display: "inline-flex", alignItems: "center", padding: "0.2rem",
@@ -430,7 +441,7 @@ export default function SeoPage() {
                                   {kw.documents.map((d) => (
                                     <tr key={`${d.collection}/${d.slug}`} style={{ borderTop: "1px solid var(--border)" }}>
                                       <td style={{ padding: "0.375rem 0.5rem" }}>
-                                        <a href={`/admin/content/${d.collection}/${d.slug}`} style={{ color: "var(--foreground)", textDecoration: "none" }}>
+                                        <a data-testid={`seo-keyword-doc-link-${d.collection}-${d.slug}`} href={`/admin/content/${d.collection}/${d.slug}`} style={{ color: "var(--foreground)", textDecoration: "none" }}>
                                           {d.title}
                                         </a>
                                       </td>
@@ -469,6 +480,8 @@ export default function SeoPage() {
               {[{ value: "all", label: "All" }, ...siteLocales.map((l) => ({ value: l, label: `${LOCALE_FLAGS[l] ?? ""} ${l.toUpperCase()}` }))].map((opt) => (
                 <button
                   key={opt.value}
+                  type="button"
+                  data-testid={`seo-locale-filter-${opt.value}`}
                   onClick={() => setLocaleFilter(opt.value)}
                   style={{
                     padding: "0.2rem 0.5rem",
@@ -503,6 +516,7 @@ export default function SeoPage() {
                 <tr key={`${doc.collection}/${doc.slug}`} style={{ borderBottom: "1px solid var(--border)" }}>
                   <td style={{ padding: "0.625rem 0.75rem" }}>
                     <a
+                      data-testid={`seo-doc-link-${doc.collection}-${doc.slug}`}
                       href={`/admin/content/${doc.collection}/${doc.slug}`}
                       style={{ color: "var(--foreground)", textDecoration: "none", fontWeight: 500, display: "flex", alignItems: "center", gap: "0.5rem" }}
                     >
@@ -531,6 +545,8 @@ export default function SeoPage() {
                   <td style={{ textAlign: "right", padding: "0.5rem 0.75rem" }}>
                     {!doc.optimized && (
                       <button
+                        type="button"
+                        data-testid={`seo-optimize-${doc.collection}-${doc.slug}`}
                         onClick={() => optimizeSingle(doc.collection, doc.slug)}
                         style={{
                           display: "inline-flex", alignItems: "center", gap: "0.25rem",
@@ -552,6 +568,6 @@ export default function SeoPage() {
           })()}
         </div>
       )}
-    </>
+    </div>
   );
 }
diff --git a/packages/cms-admin/src/app/admin/(workspace)/settings/brand-voice/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/settings/brand-voice/page.tsx
index 3b693ee09..792d25930 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/settings/brand-voice/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/settings/brand-voice/page.tsx
@@ -89,7 +89,7 @@ function BrandVoiceHistoryPanel({ versions, onRestore, onClose }: {
     <div style={{ position: "fixed", top: 0, right: 0, bottom: 0, width: "380px", zIndex: 100, background: "var(--card)", borderLeft: "1px solid var(--border)", boxShadow: "-4px 0 20px rgba(0,0,0,0.3)", display: "flex", flexDirection: "column" }}>
       <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0.75rem 1rem", borderBottom: "1px solid var(--border)" }}>
         <span style={{ fontWeight: 600, fontSize: "0.875rem" }}>Revision history</span>
-        <button type="button" onClick={onClose} style={{ background: "transparent", border: "none", cursor: "pointer", color: "var(--muted-foreground)", fontSize: "1.1rem", lineHeight: 1 }}>×</button>
+        <button data-testid="history-panel-close" type="button" onClick={onClose} style={{ background: "transparent", border: "none", cursor: "pointer", color: "var(--muted-foreground)", fontSize: "1.1rem", lineHeight: 1 }}>×</button>
       </div>
       <div style={{ flex: 1, overflowY: "auto", padding: "0.5rem 0" }}>
         {versions.length === 0 && (
@@ -111,14 +111,14 @@ function BrandVoiceHistoryPanel({ versions, onRestore, onClose }: {
                     {v.language}{prev ? ` · ${changedFields.length} changed field${changedFields.length !== 1 ? "s" : ""}` : " · initial version"}
                   </p>
                   {changedFields.length > 0 && (
-                    <button type="button" onClick={() => setExpanded(isOpen ? null : v.id)}
+                    <button data-testid="version-diff-toggle" type="button" onClick={() => setExpanded(isOpen ? null : v.id)}
                       style={{ fontSize: "0.65rem", color: "var(--primary)", background: "transparent", border: "none", cursor: "pointer", padding: 0, marginTop: "0.2rem" }}>
                       {isOpen ? "Hide diff" : "Show diff"}
                     </button>
                   )}
                 </div>
                 {!v.active && (
-                  <button type="button" onClick={() => restore(v)} disabled={restoring === v.id}
+                  <button data-testid="version-restore-button" type="button" onClick={() => restore(v)} disabled={restoring === v.id}
                     style={{ fontSize: "0.7rem", padding: "0.25rem 0.5rem", borderRadius: "4px", border: "1px solid var(--border)", cursor: restoring === v.id ? "wait" : "pointer", background: "transparent", color: "var(--foreground)", whiteSpace: "nowrap", flexShrink: 0 }}>
                     {restoring === v.id ? "…" : "Restore"}
                   </button>
@@ -202,6 +202,7 @@ function EditForm({ version, onSaved, onCancel }: {
       </label>
       {multiline ? (
         <textarea
+          data-testid={`edit-form-${key}`}
           value={form[key]}
           onChange={(e) => setForm((f) => ({ ...f, [key]: e.target.value }))}
           style={{ padding: "0.5rem 0.75rem", borderRadius: "7px", border: "1px solid var(--border)", background: "var(--background)", color: "var(--foreground)", fontSize: "0.875rem", resize: "vertical", minHeight: "80px", fontFamily: "inherit" }}
@@ -209,6 +210,7 @@ function EditForm({ version, onSaved, onCancel }: {
       ) : (
         <input
           type="text"
+          data-testid={`edit-form-${key}`}
           value={form[key]}
           onChange={(e) => setForm((f) => ({ ...f, [key]: e.target.value }))}
           style={{ padding: "0.5rem 0.75rem", borderRadius: "7px", border: "1px solid var(--border)", background: "var(--background)", color: "var(--foreground)", fontSize: "0.875rem" }}
@@ -264,6 +266,7 @@ function EditForm({ version, onSaved, onCancel }: {
 
       <div style={{ display: "flex", gap: "0.5rem", marginTop: "0.5rem" }}>
         <button
+          data-testid="edit-form-save-button"
           type="button"
           onClick={save}
           disabled={saving}
@@ -273,6 +276,7 @@ function EditForm({ version, onSaved, onCancel }: {
           Save changes
         </button>
         <button
+          data-testid="edit-form-cancel-button"
           type="button"
           onClick={onCancel}
           style={{ padding: "0.5rem 1rem", borderRadius: "7px", border: "1px solid var(--border)", background: "transparent", color: "var(--muted-foreground)", fontSize: "0.875rem", cursor: "pointer" }}
@@ -369,8 +373,8 @@ function ImportExportMenu({ bv, onImport }: { bv: BrandVoice; onImport: (v: Bran
 
   return (
     <div style={{ position: "relative" }}>
-      <input ref={fileRef} type="file" accept=".json,application/json" style={{ display: "none" }} onChange={handleFile} />
-      <button type="button" onClick={() => setOpen((o) => !o)} disabled={importing} style={btnStyle}>
+      <input data-testid="import-export-file-input" ref={fileRef} type="file" accept=".json,application/json" style={{ display: "none" }} onChange={handleFile} />
+      <button data-testid="import-export-menu-button" type="button" onClick={() => setOpen((o) => !o)} disabled={importing} style={btnStyle}>
         {importing ? <Loader2 style={{ width: "12px", height: "12px" }} className="animate-spin" /> : <ArrowUpDown style={{ width: "12px", height: "12px" }} />}
         <ChevronDown style={{ width: "10px", height: "10px" }} />
       </button>
@@ -380,7 +384,7 @@ function ImportExportMenu({ bv, onImport }: { bv: BrandVoice; onImport: (v: Bran
             { label: "Export JSON", action: doExport },
             { label: "Import JSON", action: openImport },
           ].map(({ label, action }) => (
-            <button key={label} type="button" onClick={action}
+            <button key={label} type="button" data-testid={`menu-${label.toLowerCase().replace(/\s+/g, '-')}`} onClick={action}
               style={{ display: "block", width: "100%", padding: "0.5rem 0.875rem", textAlign: "left", background: "none", border: "none", color: "var(--foreground)", fontSize: "0.8rem", cursor: "pointer" }}
               onMouseEnter={(e) => { e.currentTarget.style.background = "var(--accent)"; }}
               onMouseLeave={(e) => { e.currentTarget.style.background = "none"; }}>
@@ -393,7 +397,7 @@ function ImportExportMenu({ bv, onImport }: { bv: BrandVoice; onImport: (v: Bran
         <div style={{ position: "absolute", top: "calc(100% + 4px)", right: 0, zIndex: 50, background: "var(--popover)", border: "1px solid var(--destructive)", borderRadius: "8px", boxShadow: "0 4px 16px rgba(0,0,0,0.15)", padding: "0.75rem 1rem", minWidth: "320px", maxWidth: "420px" }}>
           <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "0.5rem" }}>
             <p style={{ margin: 0, fontSize: "0.75rem", fontWeight: 600, color: "var(--destructive)" }}>Import failed</p>
-            <button type="button" onClick={() => setErrors(null)} style={{ background: "transparent", border: "none", cursor: "pointer", color: "var(--muted-foreground)", fontSize: "1rem", lineHeight: 1, padding: 0 }}>×</button>
+            <button data-testid="import-export-error-close" type="button" onClick={() => setErrors(null)} style={{ background: "transparent", border: "none", cursor: "pointer", color: "var(--muted-foreground)", fontSize: "1rem", lineHeight: 1, padding: 0 }}>×</button>
           </div>
           <ul style={{ margin: "0 0 0.75rem", paddingLeft: "1.1rem", display: "flex", flexDirection: "column", gap: "0.2rem" }}>
             {errors.map((e) => <li key={e} style={{ fontSize: "0.75rem", color: "var(--destructive)" }}>{e}</li>)}
@@ -449,6 +453,7 @@ function BrandVoiceCard({ bv, onReinterview, onEdit, onTranslate, onHistory, onI
             <div style={{ position: "relative" }}>
               <button
                 type="button"
+                data-testid="translate-button"
                 onClick={() => setLangOpen((o) => !o)}
                 disabled={translating}
                 style={{ display: "flex", alignItems: "center", gap: "0.4rem", padding: "0.4rem 0.75rem", borderRadius: "7px", border: "1px solid var(--border)", background: "transparent", color: "var(--muted-foreground)", fontSize: "0.75rem", cursor: translating ? "not-allowed" : "pointer" }}
@@ -465,6 +470,7 @@ function BrandVoiceCard({ bv, onReinterview, onEdit, onTranslate, onHistory, onI
                     <button
                       key={lang}
                       type="button"
+                      data-testid={`translate-lang-${lang.toLowerCase()}`}
                       onClick={async () => {
                         setLangOpen(false);
                         setTranslating(true);
@@ -482,17 +488,17 @@ function BrandVoiceCard({ bv, onReinterview, onEdit, onTranslate, onHistory, onI
             </div>
           )}
 
-          <button type="button" onClick={onEdit}
+          <button type="button" data-testid="card-edit-button" onClick={onEdit}
             style={{ display: "flex", alignItems: "center", gap: "0.4rem", padding: "0.4rem 0.75rem", borderRadius: "7px", border: "1px solid var(--border)", background: "transparent", color: "var(--muted-foreground)", fontSize: "0.75rem", cursor: "pointer" }}>
             <Pencil style={{ width: "12px", height: "12px" }} /> Edit
           </button>
           {!hideHistory && (
-            <button type="button" onClick={onHistory}
+            <button type="button" data-testid="card-history-button" onClick={onHistory}
               style={{ display: "flex", alignItems: "center", gap: "0.4rem", padding: "0.4rem 0.75rem", borderRadius: "7px", border: "1px solid var(--border)", background: "transparent", color: "var(--muted-foreground)", fontSize: "0.75rem", cursor: "pointer" }}>
               <History style={{ width: "12px", height: "12px" }} /> History
             </button>
           )}
-          <button type="button" onClick={onReinterview}
+          <button type="button" data-testid="card-reinterview-button" onClick={onReinterview}
             style={{ display: "flex", alignItems: "center", gap: "0.4rem", padding: "0.4rem 0.75rem", borderRadius: "7px", border: "1px solid var(--border)", background: "transparent", color: "var(--muted-foreground)", fontSize: "0.75rem", cursor: "pointer" }}>
             <RefreshCw style={{ width: "12px", height: "12px" }} /> {retranslateLabel || "Re-interview"}
           </button>
@@ -795,6 +801,7 @@ export default function BrandVoicePage() {
           </div>
           {activeVoice && (
             <button
+              data-testid="interview-cancel-button"
               type="button"
               onClick={() => { setInterviewActive(false); setMessages([]); }}
               style={{ marginTop: "0.25rem", padding: "0.35rem 0.75rem", borderRadius: "7px", border: "1px solid var(--border)", background: "transparent", color: "var(--muted-foreground)", fontSize: "0.75rem", cursor: "pointer", flexShrink: 0 }}
@@ -829,6 +836,7 @@ export default function BrandVoicePage() {
         <div style={{ flexShrink: 0, display: "flex", gap: "0.5rem", alignItems: "flex-end", padding: "0.75rem", borderRadius: "12px", border: "1px solid var(--border)", background: "var(--card)" }}>
           <textarea
             ref={inputRef}
+            data-testid="interview-input"
             value={input}
             onChange={(e) => setInput(e.target.value)}
             onInput={autoResize}
@@ -838,7 +846,7 @@ export default function BrandVoicePage() {
             rows={1}
             style={{ flex: 1, border: "none", background: "transparent", color: "var(--foreground)", fontSize: "0.9rem", outline: "none", resize: "none", lineHeight: 1.5, overflow: "hidden" }}
           />
-          <button type="button" onClick={handleSend} disabled={streaming || !input.trim()}
+          <button type="button" data-testid="interview-send-button" onClick={handleSend} disabled={streaming || !input.trim()}
             style={{ flexShrink: 0, width: "34px", height: "34px", borderRadius: "8px", border: "none", background: streaming || !input.trim() ? "var(--muted)" : "var(--primary)", color: streaming || !input.trim() ? "var(--muted-foreground)" : "var(--primary-foreground)", cursor: streaming || !input.trim() ? "not-allowed" : "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}>
             {streaming ? <Loader2 style={{ width: "14px", height: "14px" }} className="animate-spin" /> : <Send style={{ width: "14px", height: "14px" }} />}
           </button>
@@ -862,6 +870,7 @@ export default function BrandVoicePage() {
         {/* Primary tab */}
         <button
           type="button"
+          data-testid="locale-tab-primary"
           onClick={() => switchLocale(null)}
           style={{
             display: "flex", alignItems: "center", gap: "0.35rem",
@@ -880,6 +889,7 @@ export default function BrandVoicePage() {
           <button
             key={locale}
             type="button"
+            data-testid={`locale-tab-${locale}`}
             onClick={() => switchLocale(locale)}
             style={{
               display: "flex", alignItems: "center", gap: "0.35rem",
@@ -914,6 +924,7 @@ export default function BrandVoicePage() {
             </p>
             <button
               type="button"
+              data-testid="locale-translate-button"
               disabled={translatingLocale === activeLocale}
               onClick={() => translateToLocale(activeLocale!)}
               style={{
@@ -1023,7 +1034,7 @@ export default function BrandVoicePage() {
             ))}
           </ul>
         </div>
-        <button type="button" onClick={startInterview}
+        <button data-testid="start-interview-button" type="button" onClick={startInterview}
           style={{ display: "flex", alignItems: "center", gap: "0.5rem", padding: "0.6rem 1.25rem", borderRadius: "8px", border: "none", background: "var(--primary)", color: "var(--primary-foreground)", fontSize: "0.875rem", fontWeight: 600, cursor: "pointer" }}>
           <Pencil style={{ width: "14px", height: "14px" }} />
           Start interview
diff --git a/packages/cms-admin/src/app/admin/(workspace)/settings/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/settings/page.tsx
index 5de6f2311..46477fb87 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/settings/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/settings/page.tsx
@@ -71,7 +71,7 @@ export default async function SettingsPage({
   ];
 
   return (
-    <>
+    <div data-testid="settings-root">
       <SettingsAnchorScroll />
       <ActionBar
         actions={<SettingsSaveButton />}
@@ -349,6 +349,6 @@ export default async function SettingsPage({
         )}
         </div>
       </div>
-    </>
+    </div>
   );
 }
diff --git a/packages/cms-admin/src/app/admin/(workspace)/sites/new/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/sites/new/page.tsx
index e737aa8b8..f34121218 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/sites/new/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/sites/new/page.tsx
@@ -315,6 +315,7 @@ export default function NewSitePage() {
               // { value: "migrate" as const, label: "Migrate", icon: Globe },
             ]).map(({ value, label, icon: Icon }) => (
               <button
+                data-testid={`new-site-adapter-${value}`}
                 key={value}
                 type="button"
                 onClick={() => setAdapter(value)}
@@ -336,6 +337,7 @@ export default function NewSitePage() {
             <>
               {!ghConnected ? (
                 <button
+                  data-testid="new-site-github-connect"
                   type="button"
                   onClick={connectGitHub}
                   style={{
@@ -363,10 +365,10 @@ export default function NewSitePage() {
                       Connected as <strong>{ghUser}</strong>
                     </span>
                     <span style={{ display: "flex", gap: "0.75rem" }}>
-                      <a href={`https://github.com/settings/connections/applications/${process.env.NEXT_PUBLIC_GITHUB_OAUTH_CLIENT_ID ?? ""}`} target="_blank" rel="noopener noreferrer" style={{ color: "var(--muted-foreground)", fontSize: "0.75rem", textDecoration: "underline", cursor: "pointer" }}>
+                      <a data-testid="new-site-manage-github-access" href={`https://github.com/settings/connections/applications/${process.env.NEXT_PUBLIC_GITHUB_OAUTH_CLIENT_ID ?? ""}`} target="_blank" rel="noopener noreferrer" style={{ color: "var(--muted-foreground)", fontSize: "0.75rem", textDecoration: "underline", cursor: "pointer" }}>
                         Manage access
                       </a>
-                      <button type="button" onClick={disconnectGitHub} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", fontSize: "0.75rem", textDecoration: "underline" }}>
+                      <button data-testid="new-site-github-disconnect" type="button" onClick={disconnectGitHub} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", fontSize: "0.75rem", textDecoration: "underline" }}>
                         Disconnect
                       </button>
                     </span>
@@ -379,6 +381,7 @@ export default function NewSitePage() {
                       { value: false, label: "Import existing" },
                     ] as const).map(({ value, label }) => (
                       <button
+                        data-testid={`new-site-gh-tab-${value ? 'new' : 'existing'}`}
                         key={label}
                         type="button"
                         onClick={() => { setGhCreateNew(value); setGhSelectedRepo(""); setGhNewRepoName(""); }}
@@ -400,6 +403,7 @@ export default function NewSitePage() {
                       <div>
                         <label style={labelStyle}>Repository name</label>
                         <input
+                          data-testid="new-site-gh-repo-name"
                           type="text"
                           value={ghNewRepoName}
                           onChange={(e) => {
@@ -461,7 +465,7 @@ export default function NewSitePage() {
                   {/* Site name */}
                   <div>
                     <label style={labelStyle}>Site Name</label>
-                    <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="My Site" style={inputStyle} />
+                    <input data-testid="new-site-name-gh" type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="My Site" style={inputStyle} />
                     {name && <p style={{ margin: "0.25rem 0 0", fontSize: "0.7rem", color: "var(--muted-foreground)", fontFamily: "monospace" }}>ID: {siteId()}</p>}
                   </div>
 
@@ -469,11 +473,11 @@ export default function NewSitePage() {
                   <div style={{ display: "flex", gap: "0.75rem" }}>
                     <div style={{ flex: 1 }}>
                       <label style={labelStyle}>Branch</label>
-                      <input type="text" value={branch} onChange={(e) => setBranch(e.target.value)} placeholder="main" style={inputStyle} />
+                      <input data-testid="new-site-branch" type="text" value={branch} onChange={(e) => setBranch(e.target.value)} placeholder="main" style={inputStyle} />
                     </div>
                     <div style={{ flex: 1 }}>
                       <label style={labelStyle}>Content Directory</label>
-                      <input type="text" value={contentDir} onChange={(e) => setContentDir(e.target.value)} placeholder="content" style={inputStyle} />
+                      <input data-testid="new-site-content-dir" type="text" value={contentDir} onChange={(e) => setContentDir(e.target.value)} placeholder="content" style={inputStyle} />
                     </div>
                   </div>
                 </>
@@ -529,6 +533,7 @@ export default function NewSitePage() {
                 </label>
                 <div style={{ display: "flex", gap: "0.5rem" }}>
                   <input
+                    data-testid="new-site-import-path"
                     type="text"
                     value={importPath}
                     onChange={(e) => setImportPath(e.target.value)}
@@ -538,6 +543,7 @@ export default function NewSitePage() {
                   />
                   {isMac && (
                     <button
+                      data-testid="new-site-browse-folder"
                       type="button"
                       onClick={handleBrowse}
                       style={{
@@ -551,6 +557,7 @@ export default function NewSitePage() {
                     </button>
                   )}
                   <button
+                    data-testid="new-site-import-button"
                     type="button"
                     onClick={handleImport}
                     disabled={importing || !importPath.trim()}
@@ -586,16 +593,16 @@ export default function NewSitePage() {
 
               <div>
                 <label style={labelStyle}>Site Name</label>
-                <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="My Site" style={inputStyle} />
+                <input data-testid="new-site-name-fs" type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="My Site" style={inputStyle} />
                 {name && <p style={{ margin: "0.25rem 0 0", fontSize: "0.7rem", color: "var(--muted-foreground)", fontFamily: "monospace" }}>ID: {siteId()}</p>}
               </div>
               <div>
                 <label style={labelStyle}>Config Path (absolute)</label>
-                <input type="text" value={configPath} onChange={(e) => setConfigPath(e.target.value)} placeholder="/Users/.../cms.config.ts" style={{ ...inputStyle, fontFamily: "monospace", fontSize: "0.8rem" }} />
+                <input data-testid="new-site-config-path" type="text" value={configPath} onChange={(e) => setConfigPath(e.target.value)} placeholder="/Users/.../cms.config.ts" style={{ ...inputStyle, fontFamily: "monospace", fontSize: "0.8rem" }} />
               </div>
               <div>
                 <label style={labelStyle}>Content Directory (absolute, optional)</label>
-                <input type="text" value={fsContentDir} onChange={(e) => setFsContentDir(e.target.value)} placeholder="/Users/.../content" style={{ ...inputStyle, fontFamily: "monospace", fontSize: "0.8rem" }} />
+                <input data-testid="new-site-fs-content-dir" type="text" value={fsContentDir} onChange={(e) => setFsContentDir(e.target.value)} placeholder="/Users/.../content" style={{ ...inputStyle, fontFamily: "monospace", fontSize: "0.8rem" }} />
               </div>
             </>
           )}
@@ -612,12 +619,12 @@ export default function NewSitePage() {
           {adapter !== "migrate" && (
             <div>
               <label style={labelStyle}>Preview URL (optional)</label>
-              <input type="url" value={previewUrl} onChange={(e) => setPreviewUrl(e.target.value)} placeholder="https://my-site.example.com" style={inputStyle} />
+              <input data-testid="new-site-preview-url" type="url" value={previewUrl} onChange={(e) => setPreviewUrl(e.target.value)} placeholder="https://my-site.example.com" style={inputStyle} />
             </div>
           )}
 
         {error && (
-          <p style={{ margin: 0, fontSize: "0.8rem", color: "var(--destructive)", padding: "0.5rem 0.75rem", borderRadius: "6px", background: "color-mix(in srgb, var(--destructive) 10%, transparent)" }}>
+          <p data-testid="new-site-error" style={{ margin: 0, fontSize: "0.8rem", color: "var(--destructive)", padding: "0.5rem 0.75rem", borderRadius: "6px", background: "color-mix(in srgb, var(--destructive) 10%, transparent)" }}>
             {error}
           </p>
         )}
@@ -626,6 +633,7 @@ export default function NewSitePage() {
         {adapter !== "migrate" && (
           <div style={{ display: "flex", gap: "0.75rem", marginTop: "0.5rem" }}>
             <button
+              data-testid="new-site-create-button"
               type="button"
               onClick={handleCreate}
               disabled={saving || (adapter === "github" && !ghConnected)}
@@ -639,7 +647,7 @@ export default function NewSitePage() {
             >
               {saving ? "Creating..." : "Create site"}
             </button>
-            <button type="button" onClick={() => router.push("/admin/sites")} style={{ padding: "0.5rem 1rem", borderRadius: "8px", border: "1px solid var(--border)", background: "transparent", color: "var(--muted-foreground)", fontSize: "0.85rem", cursor: "pointer" }}>
+            <button data-testid="new-site-cancel-button" type="button" onClick={() => router.push("/admin/sites")} style={{ padding: "0.5rem 1rem", borderRadius: "8px", border: "1px solid var(--border)", background: "transparent", color: "var(--muted-foreground)", fontSize: "0.85rem", cursor: "pointer" }}>
               Cancel
             </button>
           </div>
diff --git a/packages/cms-admin/src/app/admin/(workspace)/sites/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/sites/page.tsx
index 11b1eb842..189f7309a 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/sites/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/sites/page.tsx
@@ -262,6 +262,7 @@ export default function SitesDashboard() {
           </p>
           <div style={{ display: "flex", gap: "0.5rem" }}>
             <button
+              data-testid="sites-empty-new-button"
               type="button"
               onClick={() => router.push("/admin/sites/new")}
               style={{
@@ -276,6 +277,7 @@ export default function SitesDashboard() {
             </button>
             {isAdmin && (
               <button
+                data-testid="sites-empty-beam-button"
                 type="button"
                 onClick={() => router.push("/admin/account?tab=beam")}
                 title="Generate a Beam token to receive a site from another CMS"
@@ -299,7 +301,7 @@ export default function SitesDashboard() {
   }
 
   return (
-    <>
+    <div data-testid="sites-root">
     <ActionBar
       actions={isAdmin ? (
         <ActionButton variant="primary" onClick={() => router.push("/admin/sites/new")} icon={<Plus style={{ width: 14, height: 14 }} />}>
@@ -315,6 +317,7 @@ export default function SitesDashboard() {
       <div style={{ display: "flex", alignItems: "center", gap: "0.75rem", marginBottom: "1.5rem" }}>
         <div style={{ display: "flex", border: "1px solid var(--border)", borderRadius: "6px", overflow: "hidden" }}>
           <button
+            data-testid="sites-view-toggle-grid"
             type="button"
             title="Grid view"
             onClick={() => { setViewMode("grid"); localStorage.setItem("cms-sites-view", "grid"); }}
@@ -328,6 +331,7 @@ export default function SitesDashboard() {
             <LayoutGrid style={{ width: "0.875rem", height: "0.875rem" }} />
           </button>
           <button
+            data-testid="sites-view-toggle-list"
             type="button"
             title="List view"
             onClick={() => { setViewMode("list"); localStorage.setItem("cms-sites-view", "list"); }}
@@ -506,6 +510,7 @@ export default function SitesDashboard() {
                   const busy = pm2Busy === port;
                   return (
                     <button
+                      data-testid={`site-card-pm2-toggle-${site.id}`}
                       type="button"
                       disabled={busy}
                       onClick={(e) => { e.stopPropagation(); if (port) togglePm2(port, isOnline ? "stop" : "start"); }}
@@ -528,6 +533,7 @@ export default function SitesDashboard() {
                 })()}
               </div>
               <button
+                data-testid={`site-card-preview-button-${site.id}`}
                 type="button"
                 onClick={async (e) => {
                   e.stopPropagation();
@@ -559,6 +565,7 @@ export default function SitesDashboard() {
               </button>
               {liveUrls[site.id] && (
                 <a
+                  data-testid={`site-card-live-link-${site.id}`}
                   href={liveUrls[site.id]}
                   target="_blank"
                   rel="noopener noreferrer"
@@ -589,15 +596,18 @@ export default function SitesDashboard() {
     {/* Rename modal */}
     {renamingSiteId && (
       <div
+        data-testid="sites-rename-modal-overlay"
         style={{ position: "fixed", inset: 0, zIndex: 9999, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(0,0,0,0.5)" }}
         onClick={() => setRenamingSiteId(null)}
       >
         <div
+          data-testid="sites-rename-modal"
           style={{ background: "var(--card)", border: "1px solid var(--border)", borderRadius: "12px", padding: "1.5rem", width: "24rem", boxShadow: "0 8px 30px rgba(0,0,0,0.4)" }}
           onClick={(e) => e.stopPropagation()}
         >
           <h3 style={{ fontSize: "0.95rem", fontWeight: 600, margin: "0 0 1rem" }}>Rename Site</h3>
           <input
+            data-testid="sites-rename-input"
             autoFocus
             value={renameValue}
             onChange={(e) => setRenameValue(e.target.value)}
@@ -614,6 +624,7 @@ export default function SitesDashboard() {
           />
           <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end", marginTop: "1rem" }}>
             <button
+              data-testid="sites-rename-cancel"
               type="button"
               onClick={() => setRenamingSiteId(null)}
               style={{
@@ -623,6 +634,7 @@ export default function SitesDashboard() {
               }}
             >No</button>
             <button
+              data-testid="sites-rename-confirm"
               type="button"
               onClick={() => renameSite(renamingSiteId, renameValue)}
               style={{
@@ -639,10 +651,12 @@ export default function SitesDashboard() {
     {/* Clone modal */}
     {cloningSite && (
       <div
+        data-testid="sites-clone-modal-overlay"
         style={{ position: "fixed", inset: 0, zIndex: 9999, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(0,0,0,0.5)" }}
         onClick={() => !cloneInProgress && setCloningSite(null)}
       >
         <div
+          data-testid="sites-clone-modal"
           style={{ background: "var(--card)", border: "1px solid var(--border)", borderRadius: "12px", padding: "1.5rem", width: "26rem", boxShadow: "0 8px 30px rgba(0,0,0,0.4)" }}
           onClick={(e) => e.stopPropagation()}
         >
@@ -658,6 +672,7 @@ export default function SitesDashboard() {
             New site name
           </label>
           <input
+            data-testid="sites-clone-input"
             autoFocus
             value={cloneName}
             onChange={(e) => setCloneName(e.target.value)}
@@ -682,6 +697,7 @@ export default function SitesDashboard() {
           )}
           <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end", marginTop: "1rem" }}>
             <button
+              data-testid="sites-clone-cancel"
               type="button"
               onClick={() => setCloningSite(null)}
               disabled={cloneInProgress}
@@ -693,6 +709,7 @@ export default function SitesDashboard() {
               }}
             >Cancel</button>
             <button
+              data-testid="sites-clone-confirm"
               type="button"
               onClick={handleClone}
               disabled={cloneInProgress || !cloneName.trim()}
@@ -711,7 +728,7 @@ export default function SitesDashboard() {
         </div>
       </div>
     )}
-    </>
+    </div>
   );
 }
 
@@ -797,6 +814,7 @@ function SiteListView({ sites, stats, healthMap, liveUrls, onEnter, onSettings,
     return (
       <th style={{ ...thBase, textAlign: align }}>
         <button
+          data-testid={`sites-list-sort-${sk}`}
           type="button"
           onClick={() => toggleSort(sk)}
           style={{
@@ -830,6 +848,7 @@ function SiteListView({ sites, stats, healthMap, liveUrls, onEnter, onSettings,
         {sorted.map((site) => (
           <tr
             key={site.id}
+            data-testid={`sites-list-row-${site.id}`}
             onClick={() => onEnter(site)}
             style={{ borderBottom: "1px solid var(--border)", cursor: "pointer", transition: "background 0.15s" }}
             className="hover:bg-accent/50"
@@ -856,6 +875,7 @@ function SiteListView({ sites, stats, healthMap, liveUrls, onEnter, onSettings,
               <div style={{ display: "flex", gap: "0.375rem", alignItems: "center" }}>
                 {liveUrls[site.id] && (
                   <a
+                    data-testid={`sites-list-live-link-${site.id}`}
                     href={liveUrls[site.id]}
                     target="_blank"
                     rel="noopener noreferrer"
@@ -883,6 +903,7 @@ function SiteListView({ sites, stats, healthMap, liveUrls, onEnter, onSettings,
             <td style={{ padding: "0.6rem 0.75rem", textAlign: "right" }}>
               <div style={{ display: "flex", gap: "0.25rem", justifyContent: "flex-end", alignItems: "center" }}>
                 <button
+                  data-testid={`sites-list-preview-button-${site.id}`}
                   type="button"
                   onClick={(e) => { e.stopPropagation(); onPreview(site); }}
                   style={{
@@ -971,6 +992,7 @@ function SiteFilters({ sites, liveUrls, filter, onFilter }: {
       {tabs.map((t) => (
         <button
           key={t.key}
+          data-testid={`sites-filter-${t.key}`}
           type="button"
           onClick={() => onFilter(t.key)}
           style={{
diff --git a/packages/cms-admin/src/app/admin/(workspace)/trash/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/trash/page.tsx
index 3ed7880a6..a317f7719 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/trash/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/trash/page.tsx
@@ -41,8 +41,8 @@ function ConfirmDialog({ message, confirmLabel = "Confirm", onConfirm, onCancel
           <p style={{ fontSize: "0.9rem", color: "var(--foreground)", margin: 0 }}>{message}</p>
         </div>
         <div style={{ display: "flex", justifyContent: "flex-end", gap: "0.5rem" }}>
-          <button type="button" onClick={onCancel} style={{ padding: "0.4rem 0.875rem", borderRadius: "6px", border: "1px solid var(--border)", background: "transparent", color: "var(--foreground)", fontSize: "0.8rem", cursor: "pointer" }}>Cancel</button>
-          <button type="button" onClick={onConfirm} style={{ padding: "0.4rem 0.875rem", borderRadius: "6px", border: "none", background: "var(--destructive)", color: "#fff", fontSize: "0.8rem", cursor: "pointer" }}>{confirmLabel}</button>
+          <button data-testid="trash-confirm-dialog-cancel" type="button" onClick={onCancel} style={{ padding: "0.4rem 0.875rem", borderRadius: "6px", border: "1px solid var(--border)", background: "transparent", color: "var(--foreground)", fontSize: "0.8rem", cursor: "pointer" }}>Cancel</button>
+          <button data-testid="trash-confirm-dialog-confirm" type="button" onClick={onConfirm} style={{ padding: "0.4rem 0.875rem", borderRadius: "6px", border: "none", background: "var(--destructive)", color: "#fff", fontSize: "0.8rem", cursor: "pointer" }}>{confirmLabel}</button>
         </div>
       </div>
     </div>
@@ -143,7 +143,7 @@ export default function TrashPage() {
   });
 
   return (
-    <div>
+    <div data-testid="trash-root">
       {/* Header */}
       <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "1rem 1.5rem", borderBottom: "1px solid var(--border)", position: "sticky", top: 84, zIndex: 30, backgroundColor: "var(--card)" }}>
         <div style={{ display: "flex", alignItems: "center", gap: "0.625rem" }}>
@@ -160,6 +160,7 @@ export default function TrashPage() {
           </span>
           {canEmpty && items.length > 0 && (
             <button
+              data-testid="trash-empty-button"
               type="button"
               onClick={() => setConfirmEmpty(true)}
               style={{ display: "flex", alignItems: "center", gap: "0.375rem", padding: "0.35rem 0.75rem", borderRadius: "6px", border: "1px solid color-mix(in oklch, var(--destructive) 40%, transparent)", background: "transparent", color: "var(--destructive)", fontSize: "0.75rem", cursor: "pointer" }}
@@ -177,6 +178,7 @@ export default function TrashPage() {
           <div style={{ position: "relative", marginBottom: "1.25rem", maxWidth: "400px" }}>
             <Search style={{ position: "absolute", left: "0.625rem", top: "50%", transform: "translateY(-50%)", width: "14px", height: "14px", color: "var(--muted-foreground)", pointerEvents: "none" }} />
             <input
+              data-testid="trash-search-input"
               type="text"
               value={search}
               onChange={(e) => setSearch(e.target.value)}
@@ -184,7 +186,7 @@ export default function TrashPage() {
               style={{ width: "100%", padding: "0.4rem 0.75rem 0.4rem 2rem", borderRadius: "6px", border: "1px solid var(--border)", background: "var(--input)", color: "var(--foreground)", fontSize: "0.85rem", outline: "none" }}
             />
             {search && (
-              <button type="button" onClick={() => setSearch("")} style={{ position: "absolute", right: "0.5rem", top: "50%", transform: "translateY(-50%)", background: "transparent", border: "none", cursor: "pointer", color: "var(--muted-foreground)", display: "flex" }}>
+              <button data-testid="trash-clear-search" type="button" onClick={() => setSearch("")} style={{ position: "absolute", right: "0.5rem", top: "50%", transform: "translateY(-50%)", background: "transparent", border: "none", cursor: "pointer", color: "var(--muted-foreground)", display: "flex" }}>
                 <X style={{ width: "13px", height: "13px" }} />
               </button>
             )}
@@ -232,6 +234,7 @@ export default function TrashPage() {
                   {!readOnly && (
                     <div style={{ display: "flex", gap: "0.375rem", flexShrink: 0 }}>
                       <button
+                        data-testid="trash-restore-button"
                         type="button"
                         disabled={isWorking}
                         onClick={() => restore(item)}
@@ -242,6 +245,7 @@ export default function TrashPage() {
                         Restore
                       </button>
                       <button
+                        data-testid="trash-delete-button"
                         type="button"
                         disabled={isWorking}
                         onClick={() => {
diff --git a/packages/cms-admin/src/app/admin/(workspace)/visibility/page.tsx b/packages/cms-admin/src/app/admin/(workspace)/visibility/page.tsx
index c1759a39e..bd45d471e 100644
--- a/packages/cms-admin/src/app/admin/(workspace)/visibility/page.tsx
+++ b/packages/cms-admin/src/app/admin/(workspace)/visibility/page.tsx
@@ -103,7 +103,7 @@ export default function VisibilityPage() {
   const combinedScore = data ? Math.round((data.avgScore * 0.5) + (data.avgGeoScore * 0.5)) : 0;
 
   return (
-    <>
+    <div data-testid="visibility-root">
       <ActionBar helpArticleId="visibility-intro"
         actions={
           <ActionButton onClick={fetchData} disabled={loading}>
@@ -193,6 +193,7 @@ export default function VisibilityPage() {
             <div style={{ display: "flex", gap: 0, borderBottom: "1px solid var(--border)", marginBottom: "1rem" }}>
               {(["overview", "documents", "build"] as const).map((tab) => (
                 <button
+                  data-testid={`visibility-tab-${tab}`}
                   key={tab}
                   type="button"
                   onClick={() => setActiveTab(tab)}
@@ -274,7 +275,7 @@ export default function VisibilityPage() {
                       return (
                         <tr key={`${doc.collection}/${doc.slug}`} style={{ borderBottom: "1px solid var(--border)" }}>
                           <td style={{ padding: "0.625rem 0.75rem" }}>
-                            <a href={`/admin/content/${doc.collection}/${doc.slug}`} style={{ color: "var(--foreground)", textDecoration: "none" }}>
+                            <a data-testid={`visibility-doc-link-${doc.collection}-${doc.slug}`} href={`/admin/content/${doc.collection}/${doc.slug}`} style={{ color: "var(--foreground)", textDecoration: "none" }}>
                               <span style={{ fontWeight: 500 }}>{doc.title}</span>
                               <span style={{ fontSize: "0.65rem", color: "var(--muted-foreground)", marginLeft: "0.5rem", fontFamily: "monospace" }}>
                                 {doc.collectionLabel}
@@ -329,7 +330,7 @@ export default function VisibilityPage() {
           </>
         )}
       </div>
-    </>
+    </div>
   );
 }
 
diff --git a/packages/cms-admin/src/components/account/beam-tokens-panel.tsx b/packages/cms-admin/src/components/account/beam-tokens-panel.tsx
index c3c7a0ba0..a105a2702 100644
--- a/packages/cms-admin/src/components/account/beam-tokens-panel.tsx
+++ b/packages/cms-admin/src/components/account/beam-tokens-panel.tsx
@@ -109,6 +109,7 @@ export function BeamTokensPanel() {
               overflow: "auto", whiteSpace: "nowrap",
             }}>{newToken.token}</code>
             <button
+              data-testid="beam-token-copy"
               type="button"
               onClick={copy}
               style={{
@@ -139,6 +140,7 @@ export function BeamTokensPanel() {
 
       <div style={{ display: "flex", gap: "0.5rem" }}>
         <button
+          data-testid="beam-token-generate"
           type="button"
           onClick={generate}
           disabled={generating}
@@ -155,6 +157,7 @@ export function BeamTokensPanel() {
           {generating ? "Generating..." : "Generate new token"}
         </button>
         <button
+          data-testid="beam-token-refresh"
           type="button"
           onClick={refresh}
           disabled={loading}
diff --git a/packages/cms-admin/src/components/admin-header.tsx b/packages/cms-admin/src/components/admin-header.tsx
index cb56f292a..b51b7d426 100644
--- a/packages/cms-admin/src/components/admin-header.tsx
+++ b/packages/cms-admin/src/components/admin-header.tsx
@@ -63,7 +63,7 @@ function ThemeItems() {
         { value: "light" as const, label: "Light", icon: Sun },
         { value: "system" as const, label: "System", icon: Monitor },
       ]).map(({ value, label, icon: Icon }) => (
-        <DropdownMenuItem key={value} onClick={() => setBrightness(value)}>
+        <DropdownMenuItem data-testid={`theme-brightness-${value}`} key={value} onClick={() => setBrightness(value)}>
           <Icon className="mr-2 h-4 w-4" />
           {label}
           {brightness === value && <Check className="ml-auto h-4 w-4" />}
@@ -74,6 +74,7 @@ function ThemeItems() {
         <div style={{ display: "flex", borderRadius: "6px", border: "1px solid var(--border)", padding: "2px", gap: "2px" }}>
           {TEMP_OPTIONS.map(({ value, label }) => (
             <button
+              data-testid={`theme-temperature-${value}`}
               key={value}
               onClick={(e) => { e.stopPropagation(); setTemperature(value); }}
               style={{
@@ -113,7 +114,7 @@ function UserNav({ user }: { user: SessionUser | null }) {
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger className="rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring bg-transparent border-0 p-0 cursor-pointer" aria-label={`User menu: ${displayName}`}>
+      <DropdownMenuTrigger data-testid="user-menu-trigger" className="rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring bg-transparent border-0 p-0 cursor-pointer" aria-label={`User menu: ${displayName}`}>
         <Avatar className="h-8 w-8">
           {user?.gravatarUrl && <AvatarImage src={user.gravatarUrl} alt={displayName} />}
           <AvatarFallback className="text-xs">
@@ -132,12 +133,12 @@ function UserNav({ user }: { user: SessionUser | null }) {
         </DropdownMenuGroup>
         <DropdownMenuSeparator />
         <DropdownMenuGroup>
-          <DropdownMenuItem onClick={() => { window.dispatchEvent(new CustomEvent("cms:navigate-admin", { detail: { path: "/admin/account" } })); router.push("/admin/account"); }}>
+          <DropdownMenuItem data-testid="user-menu-account" onClick={() => { window.dispatchEvent(new CustomEvent("cms:navigate-admin", { detail: { path: "/admin/account" } })); router.push("/admin/account"); }}>
             <Settings className="mr-2 h-4 w-4" />
             Account Preferences
           </DropdownMenuItem>
           {can("settings.edit") && !isAdminEmpty && (
-            <DropdownMenuItem onClick={() => { window.dispatchEvent(new CustomEvent("cms:navigate-admin", { detail: { path: "/admin/settings" } })); router.push("/admin/settings"); }}>
+            <DropdownMenuItem data-testid="user-menu-site-settings" onClick={() => { window.dispatchEvent(new CustomEvent("cms:navigate-admin", { detail: { path: "/admin/settings" } })); router.push("/admin/settings"); }}>
               <Settings className="mr-2 h-4 w-4" />
               Site Settings
             </DropdownMenuItem>
@@ -147,7 +148,7 @@ function UserNav({ user }: { user: SessionUser | null }) {
             // currently shown org in the OrgSwitcher — no need to pass orgId
             // through the URL. Saves the user from clicking "All organizations"
             // → row → kebab → Settings just to tweak the active org.
-            <DropdownMenuItem onClick={() => { window.dispatchEvent(new CustomEvent("cms:navigate-admin", { detail: { path: "/admin/organizations/settings" } })); router.push("/admin/organizations/settings"); }}>
+            <DropdownMenuItem data-testid="user-menu-org-settings" onClick={() => { window.dispatchEvent(new CustomEvent("cms:navigate-admin", { detail: { path: "/admin/organizations/settings" } })); router.push("/admin/organizations/settings"); }}>
               <Building2 className="mr-2 h-4 w-4" />
               Organization Settings
             </DropdownMenuItem>
@@ -157,7 +158,7 @@ function UserNav({ user }: { user: SessionUser | null }) {
         <ThemeItems />
         <DropdownMenuSeparator />
         <DropdownMenuGroup>
-          <DropdownMenuItem onClick={logout} className="text-muted-foreground">
+          <DropdownMenuItem data-testid="user-menu-logout" onClick={logout} className="text-muted-foreground">
             <LogOut className="mr-2 h-4 w-4" />
             Sign out
           </DropdownMenuItem>
@@ -516,6 +517,7 @@ function DeployButton() {
   if (showIcdPill) {
     return (
       <button
+        data-testid="deploy-icd-button"
         type="button"
         onClick={handleDeploy}
         disabled={deploying}
@@ -541,6 +543,7 @@ function DeployButton() {
   return (
     <span style={{ display: "flex", alignItems: "center", gap: "0.4rem" }}>
     <button
+      data-testid="deploy-rocket-button"
       type="button"
       onClick={handleDeploy}
       disabled={deploying}
@@ -616,6 +619,7 @@ function BeamPill() {
 
   return (
     <button
+      data-testid="beam-pill-button"
       type="button"
       onClick={() => router.push(`/admin/settings?tab=beam&active=${activeBeamId}`)}
       title="Beam in progress — click to view"
@@ -687,6 +691,7 @@ function BuildButton() {
     <>
       <div style={{ position: "relative", display: "flex", alignItems: "center" }}>
         <button
+          data-testid="build-button"
           type="button"
           onClick={() => setPanelOpen((o) => !o)}
           title="Build (b)"
@@ -708,6 +713,7 @@ function BuildButton() {
         </button>
         {hasMultipleProfiles && (
           <button
+            data-testid="build-profile-dropdown"
             type="button"
             onClick={() => setDropdownOpen((o) => !o)}
             title="Select build profile"
@@ -746,6 +752,7 @@ function BuildButton() {
           >
             {profiles.map((p) => (
               <button
+                data-testid={`build-profile-${p.name}`}
                 key={p.name}
                 type="button"
                 onClick={() => {
@@ -882,6 +889,7 @@ function PreviewButton() {
   if (!liveUrl) {
     return (
       <button
+        data-testid="preview-button"
         type="button"
         onClick={openPreview}
         style={{
@@ -903,6 +911,7 @@ function PreviewButton() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger
+        data-testid="preview-dropdown-trigger"
         style={{
           background: "none", border: "1.5px solid var(--border)",
           cursor: "pointer",
@@ -916,13 +925,14 @@ function PreviewButton() {
         <ExternalLink style={{ width: "0.9rem", height: "0.9rem" }} />
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" style={{ width: "200px" }}>
-        <DropdownMenuItem onClick={openPreview}>
+        <DropdownMenuItem data-testid="preview-dropdown-preview" onClick={openPreview}>
           <ExternalLink className="mr-2 h-4 w-4" />
           Preview
           {previewDown && <span className="ml-auto text-xs text-yellow-500">sirv</span>}
           {!previewDown && <span className="ml-auto text-xs text-muted-foreground">p</span>}
         </DropdownMenuItem>
         <DropdownMenuItem
+          data-testid="preview-dropdown-live"
           onClick={openLive}
           disabled={liveDown}
           style={liveDown
@@ -1045,6 +1055,7 @@ export function AdminHeader({ mode, onToggleMode, onNewChat, onToggleHistory, sh
             </span>
             {onNewChat && (
               <button
+                data-testid="header-new-chat-button"
                 onClick={onNewChat}
                 title="New conversation"
                 style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", padding: "4px", borderRadius: "4px", display: "flex", alignItems: "center", gap: "3px", fontSize: "0.75rem", marginLeft: "8px" }}
@@ -1055,6 +1066,7 @@ export function AdminHeader({ mode, onToggleMode, onNewChat, onToggleHistory, sh
             )}
             {onToggleHistory && (
               <button
+                data-testid="header-history-button"
                 onClick={onToggleHistory}
                 title="Conversation history"
                 style={{ background: showHistory ? "var(--muted)" : "none", border: "none", cursor: "pointer", color: showHistory ? "var(--foreground)" : "var(--muted-foreground)", padding: "4px", borderRadius: "4px", display: "flex", alignItems: "center", gap: "3px", fontSize: "0.75rem" }}
diff --git a/packages/cms-admin/src/components/agents-list.tsx b/packages/cms-admin/src/components/agents-list.tsx
index 9170bec96..e8f8237ed 100644
--- a/packages/cms-admin/src/components/agents-list.tsx
+++ b/packages/cms-admin/src/components/agents-list.tsx
@@ -78,6 +78,7 @@ export function AgentsList({ agents, readOnly }: { agents: Agent[]; readOnly?: b
             { value: "inactive" as Filter, label: `Inactive (${inactiveCount})` },
           ]).map((f) => (
             <button
+              data-testid={`agent-filter-${f.value}`}
               key={f.value}
               type="button"
               onClick={() => setFilter(f.value)}
@@ -91,6 +92,7 @@ export function AgentsList({ agents, readOnly }: { agents: Agent[]; readOnly?: b
         {/* View toggle */}
         <div className="flex items-center gap-1 rounded-lg border border-border p-0.5">
           <button
+            data-testid="view-grid"
             type="button"
             onClick={() => toggleView("grid")}
             className={`p-1.5 rounded-md transition-colors ${view === "grid" ? "bg-secondary text-foreground" : "text-muted-foreground hover:text-foreground"}`}
@@ -99,6 +101,7 @@ export function AgentsList({ agents, readOnly }: { agents: Agent[]; readOnly?: b
             <LayoutGrid className="w-3.5 h-3.5" />
           </button>
           <button
+            data-testid="view-list"
             type="button"
             onClick={() => toggleView("list")}
             className={`p-1.5 rounded-md transition-colors ${view === "list" ? "bg-secondary text-foreground" : "text-muted-foreground hover:text-foreground"}`}
diff --git a/packages/cms-admin/src/components/agents-tabs.tsx b/packages/cms-admin/src/components/agents-tabs.tsx
index 905f92b73..35ac817c5 100644
--- a/packages/cms-admin/src/components/agents-tabs.tsx
+++ b/packages/cms-admin/src/components/agents-tabs.tsx
@@ -55,6 +55,7 @@ export function AgentsTabs({ agents, readOnly }: { agents: AgentConfig[]; readOn
       <div className="flex gap-1 mb-6 border-b border-border">
         {TABS.map((t) => (
           <button
+            data-testid={`agents-tab-${t.id}`}
             key={t.id}
             type="button"
             onClick={() => switchTab(t.id)}
@@ -242,6 +243,7 @@ function TemplatesTab({ readOnly }: { readOnly: boolean }) {
                   <div>
                     <label className="text-[0.65rem] font-mono uppercase text-muted-foreground block mb-0.5">Name</label>
                     <input
+                      data-testid="template-name-input"
                       type="text"
                       value={editDraft.name}
                       onChange={(e) => setEditDraft({ ...editDraft, name: e.target.value })}
@@ -251,6 +253,7 @@ function TemplatesTab({ readOnly }: { readOnly: boolean }) {
                   <div>
                     <label className="text-[0.65rem] font-mono uppercase text-muted-foreground block mb-0.5">Description</label>
                     <input
+                      data-testid="template-description-input"
                       type="text"
                       value={editDraft.description}
                       onChange={(e) => setEditDraft({ ...editDraft, description: e.target.value })}
@@ -260,6 +263,7 @@ function TemplatesTab({ readOnly }: { readOnly: boolean }) {
                   <div>
                     <label className="text-[0.65rem] font-mono uppercase text-muted-foreground block mb-0.5">Category</label>
                     <input
+                      data-testid="template-category-input"
                       type="text"
                       value={editDraft.category}
                       onChange={(e) => setEditDraft({ ...editDraft, category: e.target.value })}
@@ -270,6 +274,7 @@ function TemplatesTab({ readOnly }: { readOnly: boolean }) {
                   <div>
                     <label className="text-[0.65rem] font-mono uppercase text-muted-foreground block mb-0.5">System prompt</label>
                     <textarea
+                      data-testid="template-system-prompt-textarea"
                       value={editDraft.systemPrompt}
                       onChange={(e) => setEditDraft({ ...editDraft, systemPrompt: e.target.value })}
                       rows={6}
@@ -292,20 +297,21 @@ function TemplatesTab({ readOnly }: { readOnly: boolean }) {
                   </div>
                   <div className="flex gap-3 text-xs">
                     <label className="flex items-center gap-1.5 cursor-pointer">
-                      <input type="checkbox" checked={editDraft.webSearch} onChange={(e) => setEditDraft({ ...editDraft, webSearch: e.target.checked })} className="accent-primary" />
+                      <input data-testid="template-websearch-checkbox" type="checkbox" checked={editDraft.webSearch} onChange={(e) => setEditDraft({ ...editDraft, webSearch: e.target.checked })} className="accent-primary" />
                       Web search
                     </label>
                     <label className="flex items-center gap-1.5 cursor-pointer">
-                      <input type="checkbox" checked={editDraft.internalDatabase} onChange={(e) => setEditDraft({ ...editDraft, internalDatabase: e.target.checked })} className="accent-primary" />
+                      <input data-testid="template-internal-db-checkbox" type="checkbox" checked={editDraft.internalDatabase} onChange={(e) => setEditDraft({ ...editDraft, internalDatabase: e.target.checked })} className="accent-primary" />
                       Internal database
                     </label>
                     <label className="flex items-center gap-1.5 cursor-pointer">
-                      <input type="checkbox" checked={editDraft.imageGeneration} onChange={(e) => setEditDraft({ ...editDraft, imageGeneration: e.target.checked })} className="accent-primary" />
+                      <input data-testid="template-imggen-checkbox" type="checkbox" checked={editDraft.imageGeneration} onChange={(e) => setEditDraft({ ...editDraft, imageGeneration: e.target.checked })} className="accent-primary" />
                       Image generation
                     </label>
                   </div>
                   <div className="flex gap-2 pt-1">
                     <button
+                      data-testid="template-save-button"
                       type="button"
                       onClick={() => handleSaveEdit(t)}
                       disabled={saving || !editDraft.name.trim()}
@@ -314,6 +320,7 @@ function TemplatesTab({ readOnly }: { readOnly: boolean }) {
                       {saving ? "Saving…" : "Save changes"}
                     </button>
                     <button
+                      data-testid="template-cancel-button"
                       type="button"
                       onClick={cancelEdit}
                       className="px-3 py-1.5 rounded-md text-xs border border-border hover:bg-secondary"
@@ -343,6 +350,7 @@ function TemplatesTab({ readOnly }: { readOnly: boolean }) {
                       <div className="flex items-center gap-1 shrink-0">
                         <span style={{ fontSize: "0.65rem", color: "var(--destructive)", fontWeight: 500, padding: "0 2px" }}>Remove?</span>
                         <button
+                          data-testid="template-confirm-delete"
                           type="button"
                           onClick={() => handleDelete(t.id)}
                           disabled={deleting === t.id}
@@ -351,6 +359,7 @@ function TemplatesTab({ readOnly }: { readOnly: boolean }) {
                           Yes
                         </button>
                         <button
+                          data-testid="template-cancel-delete"
                           type="button"
                           onClick={() => setConfirming(null)}
                           style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "1px solid var(--border)", background: "transparent", color: "var(--foreground)", cursor: "pointer", lineHeight: 1 }}
@@ -361,6 +370,7 @@ function TemplatesTab({ readOnly }: { readOnly: boolean }) {
                     ) : (
                       <div className="flex items-center gap-1 shrink-0">
                         <button
+                          data-testid="template-edit-button"
                           type="button"
                           onClick={() => startEditTemplate(t)}
                           title="Edit template"
@@ -369,6 +379,7 @@ function TemplatesTab({ readOnly }: { readOnly: boolean }) {
                           <Pencil className="w-3.5 h-3.5" />
                         </button>
                         <button
+                          data-testid="template-delete-button"
                           type="button"
                           onClick={() => setConfirming(t.id)}
                           title="Delete template"
@@ -682,6 +693,7 @@ function WorkflowsTab({ agents, readOnly }: { agents: AgentConfig[]; readOnly: b
         </p>
         {!readOnly && !creating && (
           <button
+            data-testid="workflow-create-button"
             type="button"
             onClick={() => setCreating(true)}
             className="flex items-center gap-1 px-3 py-1.5 rounded-md text-xs font-medium bg-primary text-primary-foreground hover:opacity-90"
@@ -703,6 +715,7 @@ function WorkflowsTab({ agents, readOnly }: { agents: AgentConfig[]; readOnly: b
             <div>
               <label className="text-xs font-semibold text-muted-foreground block mb-1">Workflow JSON</label>
               <textarea
+                data-testid="workflow-json-textarea"
                 value={jsonDraft}
                 onChange={(e) => setJsonDraft(e.target.value)}
                 rows={18}
@@ -721,6 +734,7 @@ function WorkflowsTab({ agents, readOnly }: { agents: AgentConfig[]; readOnly: b
           <div>
             <label className="text-xs font-semibold text-muted-foreground block mb-1">Name</label>
             <input
+              data-testid="workflow-name-input"
               type="text"
               value={newName}
               onChange={(e) => setNewName(e.target.value)}
@@ -752,6 +766,7 @@ function WorkflowsTab({ agents, readOnly }: { agents: AgentConfig[]; readOnly: b
             <div className="flex flex-wrap gap-1.5">
               {agents.filter((a) => a.active).map((a) => (
                 <button
+                  data-testid={`workflow-add-agent-${a.id}`}
                   key={a.id}
                   type="button"
                   onClick={() => addStep(a.id)}
@@ -767,6 +782,7 @@ function WorkflowsTab({ agents, readOnly }: { agents: AgentConfig[]; readOnly: b
           <div className="rounded-md border border-border p-3 space-y-2">
             <label className="flex items-center gap-2 text-xs font-semibold cursor-pointer">
               <input
+                data-testid="workflow-schedule-checkbox"
                 type="checkbox"
                 checked={newScheduleEnabled}
                 onChange={(e) => setNewScheduleEnabled(e.target.checked)}
@@ -780,6 +796,7 @@ function WorkflowsTab({ agents, readOnly }: { agents: AgentConfig[]; readOnly: b
                   <div>
                     <label className="text-[0.65rem] font-mono uppercase text-muted-foreground block mb-0.5">Frequency</label>
                     <select
+                      data-testid="workflow-frequency-select"
                       value={newFrequency}
                       onChange={(e) => setNewFrequency(e.target.value as "daily" | "weekly" | "manual" | "cron")}
                       className="w-full px-2 py-1 rounded border border-border bg-background text-xs"
@@ -801,6 +818,7 @@ function WorkflowsTab({ agents, readOnly }: { agents: AgentConfig[]; readOnly: b
                   <div>
                     <label className="text-[0.65rem] font-mono uppercase text-muted-foreground block mb-0.5">Max per run</label>
                     <input
+                      data-testid="workflow-maxperrun-input"
                       type="number"
                       min={1}
                       max={10}
@@ -816,6 +834,7 @@ function WorkflowsTab({ agents, readOnly }: { agents: AgentConfig[]; readOnly: b
                       Cron expression
                     </label>
                     <input
+                      data-testid="workflow-cron-input"
                       type="text"
                       value={newCron}
                       onChange={(e) => setNewCron(e.target.value)}
@@ -840,6 +859,7 @@ function WorkflowsTab({ agents, readOnly }: { agents: AgentConfig[]; readOnly: b
                     Default prompt (sent to step 1 on each scheduled run)
                   </label>
                   <textarea
+                    data-testid="workflow-defaultprompt-textarea"
                     value={newDefaultPrompt}
                     onChange={(e) => setNewDefaultPrompt(e.target.value)}
                     rows={2}
@@ -855,6 +875,7 @@ function WorkflowsTab({ agents, readOnly }: { agents: AgentConfig[]; readOnly: b
 
           <div className="flex gap-2">
             <button
+              data-testid="workflow-save-button"
               type="button"
               onClick={handleSave}
               disabled={formMode === "ui" ? (!newName.trim() || newSteps.length === 0) : !jsonDraft.trim()}
@@ -863,6 +884,7 @@ function WorkflowsTab({ agents, readOnly }: { agents: AgentConfig[]; readOnly: b
               {editingId ? "Save changes" : "Create"}
             </button>
             <button
+              data-testid="workflow-cancel-button"
               type="button"
               onClick={resetForm}
               className="px-3 py-1.5 rounded-md text-xs border border-border hover:bg-secondary"
@@ -911,11 +933,11 @@ function WorkflowsTab({ agents, readOnly }: { agents: AgentConfig[]; readOnly: b
                   confirming === wf.id ? (
                     <div className="flex items-center gap-1 shrink-0">
                       <span style={{ fontSize: "0.65rem", color: "var(--destructive)", fontWeight: 500, padding: "0 2px" }}>Remove?</span>
-                      <button type="button" onClick={() => handleDelete(wf.id)}
+                      <button data-testid="workflow-confirm-delete" type="button" onClick={() => handleDelete(wf.id)}
                         style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "none", background: "var(--destructive)", color: "#fff", cursor: "pointer", lineHeight: 1 }}>
                         Yes
                       </button>
-                      <button type="button" onClick={() => setConfirming(null)}
+                      <button data-testid="workflow-cancel-delete" type="button" onClick={() => setConfirming(null)}
                         style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "1px solid var(--border)", background: "transparent", color: "var(--foreground)", cursor: "pointer", lineHeight: 1 }}>
                         No
                       </button>
@@ -923,6 +945,7 @@ function WorkflowsTab({ agents, readOnly }: { agents: AgentConfig[]; readOnly: b
                   ) : (
                     <div className="flex items-center gap-1 shrink-0">
                       <button
+                        data-testid="workflow-edit-button"
                         type="button"
                         onClick={() => startEdit(wf)}
                         title="Edit workflow"
@@ -931,6 +954,7 @@ function WorkflowsTab({ agents, readOnly }: { agents: AgentConfig[]; readOnly: b
                         <Pencil className="w-3.5 h-3.5" />
                       </button>
                       <button
+                        data-testid="workflow-delete-button"
                         type="button"
                         onClick={() => setConfirming(wf.id)}
                         title="Delete workflow"
@@ -947,6 +971,7 @@ function WorkflowsTab({ agents, readOnly }: { agents: AgentConfig[]; readOnly: b
                 <div className="mt-3 pt-3 border-t border-border flex items-end gap-2">
                   <div className="flex-1">
                     <textarea
+                      data-testid={`workflow-run-prompt-${wf.id}`}
                       value={runPrompt[wf.id] ?? ""}
                       onChange={(e) => setRunPrompt((p) => ({ ...p, [wf.id]: e.target.value }))}
                       rows={2}
@@ -956,6 +981,7 @@ function WorkflowsTab({ agents, readOnly }: { agents: AgentConfig[]; readOnly: b
                     />
                   </div>
                   <button
+                    data-testid="workflow-run-button"
                     type="button"
                     onClick={() => handleRun(wf.id)}
                     disabled={runningId === wf.id || !(runPrompt[wf.id] ?? "").trim()}
diff --git a/packages/cms-admin/src/components/build-history.tsx b/packages/cms-admin/src/components/build-history.tsx
index 6ab7ae054..7c430a0ba 100644
--- a/packages/cms-admin/src/components/build-history.tsx
+++ b/packages/cms-admin/src/components/build-history.tsx
@@ -132,6 +132,7 @@ export function BuildHistory({ siteId, livePollMs = 3000 }: BuildHistoryProps){
         return (
           <div key={b.sha} style={{ border: "1px solid var(--border)", borderRadius: "6px", overflow: "hidden" }}>
             <button
+              data-testid={`build-history-expand-${b.sha}`}
               onClick={() => setExpanded(isExpanded ? null : b.sha)}
               style={{
                 width: "100%",
diff --git a/packages/cms-admin/src/components/chat/artifact-card.tsx b/packages/cms-admin/src/components/chat/artifact-card.tsx
index af2bb81aa..928733e5a 100644
--- a/packages/cms-admin/src/components/chat/artifact-card.tsx
+++ b/packages/cms-admin/src/components/chat/artifact-card.tsx
@@ -92,6 +92,7 @@ export function ArtifactCard({ title, html }: ArtifactCardProps) {
             { id: "code" as const, label: "Code", icon: Code },
           ]).map(({ id, label, icon: Icon }) => (
             <button
+              data-testid={`artifact-tab-${id}`}
               key={id}
               onClick={() => setTab(id)}
               style={{
@@ -137,6 +138,7 @@ export function ArtifactCard({ title, html }: ArtifactCardProps) {
       ) : (
         <div style={{ position: "relative" }}>
           <button
+            data-testid="artifact-code-copy"
             onClick={handleCopy}
             style={{
               position: "absolute",
@@ -190,6 +192,7 @@ export function ArtifactCard({ title, html }: ArtifactCardProps) {
         }}
       >
         <button
+          data-testid="artifact-save-button"
           onClick={handleSave}
           disabled={saving || saved}
           style={{
@@ -218,6 +221,7 @@ export function ArtifactCard({ title, html }: ArtifactCardProps) {
         </button>
 
         <button
+          data-testid="artifact-download-button"
           onClick={handleDownload}
           style={{
             display: "flex",
diff --git a/packages/cms-admin/src/components/chat/chat-input.tsx b/packages/cms-admin/src/components/chat/chat-input.tsx
index 10291b481..0a9865f86 100644
--- a/packages/cms-admin/src/components/chat/chat-input.tsx
+++ b/packages/cms-admin/src/components/chat/chat-input.tsx
@@ -290,6 +290,7 @@ export function ChatInput({ onSend, disabled, placeholder, visible, lastUserMess
                 </>
               )}
               <button
+                data-testid={`chat-remove-upload-${i}`}
                 onClick={() => removeUpload(i)}
                 style={{
                   position: "absolute",
@@ -339,6 +340,7 @@ export function ChatInput({ onSend, disabled, placeholder, visible, lastUserMess
       >
         {/* Textarea — full width top row */}
         <textarea
+          data-testid="chat-input-textarea"
           ref={textareaRef}
           value={value}
           onChange={(e) => setValue(e.target.value)}
@@ -366,6 +368,7 @@ export function ChatInput({ onSend, disabled, placeholder, visible, lastUserMess
         {/* Bottom row: + on left, send on right */}
         <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: "6px" }}>
           <button
+            data-testid="chat-upload-button"
             onClick={() => fileInputRef.current?.click()}
             disabled={disabled || uploading}
             title="Upload files"
@@ -392,6 +395,7 @@ export function ChatInput({ onSend, disabled, placeholder, visible, lastUserMess
             )}
           </button>
           <input
+            data-testid="chat-file-input"
             ref={fileInputRef}
             type="file"
             accept={ACCEPT_TYPES}
@@ -404,6 +408,7 @@ export function ChatInput({ onSend, disabled, placeholder, visible, lastUserMess
           />
 
           <button
+            data-testid="chat-send-button"
             onClick={handleSend}
             disabled={disabled || (!value.trim() && uploads.length === 0)}
             style={{
diff --git a/packages/cms-admin/src/components/chat/chat-interface.tsx b/packages/cms-admin/src/components/chat/chat-interface.tsx
index 766d51004..ab661d0db 100644
--- a/packages/cms-admin/src/components/chat/chat-interface.tsx
+++ b/packages/cms-admin/src/components/chat/chat-interface.tsx
@@ -657,6 +657,7 @@ export function ChatInterface({ collections, activeSiteId, visible }: ChatInterf
         <>
           {/* Backdrop */}
           <div
+            data-testid="chat-history-backdrop"
             onClick={() => setShowHistory(false)}
             style={{
               position: "fixed", inset: 0, zIndex: 998,
@@ -680,6 +681,7 @@ export function ChatInterface({ collections, activeSiteId, visible }: ChatInterf
               }}>
                 <div style={{ display: "flex", gap: "0" }}>
                   <button
+                    data-testid="chat-drawer-tab-conversations"
                     onClick={() => setDrawerTab("conversations")}
                     style={{
                       background: "none", border: "none", cursor: "pointer", padding: "6px 12px 10px",
@@ -692,6 +694,7 @@ export function ChatInterface({ collections, activeSiteId, visible }: ChatInterf
                     Chats
                   </button>
                   <button
+                    data-testid="chat-drawer-tab-memory"
                     onClick={() => { setDrawerTab("memory"); loadMemories(); }}
                     style={{
                       background: "none", border: "none", cursor: "pointer", padding: "6px 12px 10px",
@@ -715,6 +718,7 @@ export function ChatInterface({ collections, activeSiteId, visible }: ChatInterf
                   </button>
                 </div>
                 <button
+                  data-testid="chat-drawer-close"
                   onClick={() => setShowHistory(false)}
                   style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", padding: "4px" }}
                 >
@@ -736,6 +740,7 @@ export function ChatInterface({ collections, activeSiteId, visible }: ChatInterf
                     }}>
                       <Search style={{ width: "12px", height: "12px", color: "var(--muted-foreground)", flexShrink: 0 }} />
                       <input
+                        data-testid="chat-drawer-search-input"
                         value={convSearch}
                         onChange={(e) => setConvSearch(e.target.value)}
                         onKeyDown={(e) => { if (e.key === "Enter") searchChats(); }}
@@ -747,6 +752,7 @@ export function ChatInterface({ collections, activeSiteId, visible }: ChatInterf
                       />
                       {convSearch && (
                         <button
+                          data-testid="chat-drawer-search-clear"
                           onClick={async () => {
                             setConvSearch("");
                             const res = await fetch("/api/cms/chat/conversations");
@@ -832,6 +838,7 @@ export function ChatInterface({ collections, activeSiteId, visible }: ChatInterf
                   </div>
                   <div style={{ display: "flex", gap: "6px" }}>
                     <button
+                      data-testid="chat-drawer-import-confirm"
                       onClick={confirmImport}
                       style={{
                         flex: 1, padding: "6px 12px", borderRadius: "6px", fontSize: "0.7rem", fontWeight: 600,
@@ -842,6 +849,7 @@ export function ChatInterface({ collections, activeSiteId, visible }: ChatInterf
                       Merge {importPreview.chats.new + importPreview.memories.new} items
                     </button>
                     <button
+                      data-testid="chat-drawer-import-cancel"
                       onClick={cancelImport}
                       style={{
                         padding: "6px 12px", borderRadius: "6px", fontSize: "0.7rem",
@@ -870,6 +878,7 @@ export function ChatInterface({ collections, activeSiteId, visible }: ChatInterf
               {!importPreview && (
                 <div style={{ display: "flex", gap: "6px" }}>
                   <button
+                    data-testid="chat-drawer-export-all"
                     onClick={exportAll}
                     style={{
                       flex: 1, display: "flex", alignItems: "center", justifyContent: "center", gap: "6px",
@@ -882,6 +891,7 @@ export function ChatInterface({ collections, activeSiteId, visible }: ChatInterf
                     Export all
                   </button>
                   <button
+                    data-testid="chat-drawer-import-all"
                     onClick={importAll}
                     style={{
                       flex: 1, display: "flex", alignItems: "center", justifyContent: "center", gap: "6px",
@@ -921,6 +931,7 @@ export function ChatInterface({ collections, activeSiteId, visible }: ChatInterf
         lastUserMessage={messages.filter((m) => m.role === "user").pop()?.content}
       >
         <button
+          data-testid="chat-input-thinking-toggle"
           type="button"
           onClick={() => { const next = !showThinking; setShowThinking(next); localStorage.setItem("cms-chat-show-thinking", String(next)); }}
           title={showThinking ? "Hide thinking process" : "Show thinking process"}
@@ -978,6 +989,7 @@ function HistoryItem({ id, title, updatedAt, isActive, starred, onLoad, onRename
         }}
       >
         <input
+          data-testid="chat-history-item-rename-input"
           ref={inputRef}
           value={editValue}
           onChange={(e) => setEditValue(e.target.value)}
@@ -991,11 +1003,11 @@ function HistoryItem({ id, title, updatedAt, isActive, starred, onLoad, onRename
             color: "var(--foreground)", outline: "none", fontFamily: "inherit",
           }}
         />
-        <button onClick={() => { onRename(editValue); setEditing(false); }}
+        <button data-testid="chat-history-item-rename-confirm" onClick={() => { onRename(editValue); setEditing(false); }}
           style={{ background: "none", border: "none", cursor: "pointer", color: "rgb(74 222 128)", padding: "2px" }}>
           <Check style={{ width: "14px", height: "14px" }} />
         </button>
-        <button onClick={() => { setEditValue(title); setEditing(false); }}
+        <button data-testid="chat-history-item-rename-cancel" onClick={() => { setEditValue(title); setEditing(false); }}
           style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", padding: "2px" }}>
           <X style={{ width: "14px", height: "14px" }} />
         </button>
@@ -1023,6 +1035,7 @@ function HistoryItem({ id, title, updatedAt, isActive, starred, onLoad, onRename
         <Star style={{ width: "10px", height: "10px", color: "#F7BB2E", fill: "#F7BB2E", flexShrink: 0, marginLeft: "10px" }} />
       )}
       <button
+        data-testid="chat-history-item-load"
         onClick={onLoad}
         style={{
           flex: 1, textAlign: "left", padding: starred ? "10px 8px 10px 6px" : "10px 16px",
@@ -1040,6 +1053,7 @@ function HistoryItem({ id, title, updatedAt, isActive, starred, onLoad, onRename
 
       {/* More button */}
       <button
+        data-testid="chat-history-item-menu-toggle"
         onClick={(e) => { e.stopPropagation(); setMenuOpen(!menuOpen); setConfirmDelete(false); }}
         style={{
           background: "none", border: "none", cursor: "pointer",
@@ -1065,6 +1079,7 @@ function HistoryItem({ id, title, updatedAt, isActive, starred, onLoad, onRename
           }}
         >
           <button
+            data-testid="chat-history-menu-star"
             onClick={(e) => { e.stopPropagation(); onStar(); setMenuOpen(false); }}
             style={menuItemStyle}
             onMouseEnter={(e) => { e.currentTarget.style.background = "var(--muted)"; }}
@@ -1074,6 +1089,7 @@ function HistoryItem({ id, title, updatedAt, isActive, starred, onLoad, onRename
             {starred ? "Unstar" : "Star"}
           </button>
           <button
+            data-testid="chat-history-menu-copy-id"
             onClick={(e) => { e.stopPropagation(); navigator.clipboard.writeText(id); setMenuOpen(false); }}
             style={menuItemStyle}
             onMouseEnter={(e) => { e.currentTarget.style.background = "var(--muted)"; }}
@@ -1083,6 +1099,7 @@ function HistoryItem({ id, title, updatedAt, isActive, starred, onLoad, onRename
             Copy ID
           </button>
           <button
+            data-testid="chat-history-menu-rename"
             onClick={(e) => { e.stopPropagation(); setMenuOpen(false); setEditing(true); }}
             style={menuItemStyle}
             onMouseEnter={(e) => { e.currentTarget.style.background = "var(--muted)"; }}
@@ -1094,17 +1111,18 @@ function HistoryItem({ id, title, updatedAt, isActive, starred, onLoad, onRename
           {confirmDelete ? (
             <div style={{ display: "flex", alignItems: "center", gap: "4px", padding: "5px 12px" }}>
               <span style={{ fontSize: "0.65rem", color: "var(--destructive)", fontWeight: 500, padding: "0 2px" }}>Delete?</span>
-              <button onClick={(e) => { e.stopPropagation(); onDelete(); setMenuOpen(false); }}
+              <button data-testid="chat-history-delete-confirm-yes" onClick={(e) => { e.stopPropagation(); onDelete(); setMenuOpen(false); }}
                 style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px",
                   border: "none", background: "var(--destructive)", color: "#fff",
                   cursor: "pointer", lineHeight: 1 }}>Yes</button>
-              <button onClick={(e) => { e.stopPropagation(); setConfirmDelete(false); }}
+              <button data-testid="chat-history-delete-confirm-no" onClick={(e) => { e.stopPropagation(); setConfirmDelete(false); }}
                 style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px",
                   border: "1px solid var(--border)", background: "transparent",
                   color: "var(--foreground)", cursor: "pointer", lineHeight: 1 }}>No</button>
             </div>
           ) : (
             <button
+              data-testid="chat-history-menu-delete"
               onClick={(e) => { e.stopPropagation(); setConfirmDelete(true); }}
               style={{ ...menuItemStyle, color: "var(--destructive)" }}
               onMouseEnter={(e) => { e.currentTarget.style.background = "rgba(239,68,68,0.1)"; }}
@@ -1159,6 +1177,7 @@ function MemoryPanel({ memories, search, onSearchChange, onSearch, onAdd, onDele
         }}>
           <Search style={{ width: "12px", height: "12px", color: "var(--muted-foreground)", flexShrink: 0 }} />
           <input
+            data-testid="chat-memory-search-input"
             value={search}
             onChange={(e) => onSearchChange(e.target.value)}
             onKeyDown={(e) => { if (e.key === "Enter") onSearch(); }}
@@ -1170,6 +1189,7 @@ function MemoryPanel({ memories, search, onSearchChange, onSearch, onAdd, onDele
           />
         </div>
         <button
+          data-testid="chat-memory-add-button"
           onClick={() => setAddMode(true)}
           title="Add memory"
           style={{
@@ -1182,6 +1202,7 @@ function MemoryPanel({ memories, search, onSearchChange, onSearch, onAdd, onDele
           <Plus style={{ width: "14px", height: "14px" }} />
         </button>
         <button
+          data-testid="chat-memory-import-button"
           onClick={onImport}
           title="Import memories"
           style={{
@@ -1194,6 +1215,7 @@ function MemoryPanel({ memories, search, onSearchChange, onSearch, onAdd, onDele
           <Upload style={{ width: "14px", height: "14px" }} />
         </button>
         <button
+          data-testid="chat-memory-export-button"
           onClick={onExport}
           title="Export memories"
           style={{
@@ -1211,6 +1233,7 @@ function MemoryPanel({ memories, search, onSearchChange, onSearch, onAdd, onDele
       {addMode && (
         <div style={{ padding: "4px 16px 8px", display: "flex", gap: "6px" }}>
           <input
+            data-testid="chat-memory-add-input"
             ref={inputRef}
             value={addValue}
             onChange={(e) => setAddValue(e.target.value)}
@@ -1230,6 +1253,7 @@ function MemoryPanel({ memories, search, onSearchChange, onSearch, onAdd, onDele
             }}
           />
           <button
+            data-testid="chat-memory-add-save"
             onClick={() => {
               if (addValue.trim()) {
                 onAdd(addValue.trim());
@@ -1246,6 +1270,7 @@ function MemoryPanel({ memories, search, onSearchChange, onSearch, onAdd, onDele
             Save
           </button>
           <button
+            data-testid="chat-memory-add-cancel"
             onClick={() => { setAddValue(""); setAddMode(false); }}
             style={{
               background: "transparent", border: "1px solid var(--border)",
@@ -1312,17 +1337,18 @@ function MemoryRow({ memory, onDelete }: { memory: MemoryItem; onDelete: () => v
           {confirm ? (
             <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
               <span style={{ fontSize: "0.65rem", color: "var(--destructive)", fontWeight: 500, padding: "0 2px" }}>Remove?</span>
-              <button onClick={onDelete}
+              <button data-testid="chat-memory-delete-confirm-yes" onClick={onDelete}
                 style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px",
                   border: "none", background: "var(--destructive)", color: "#fff",
                   cursor: "pointer", lineHeight: 1 }}>Yes</button>
-              <button onClick={() => setConfirm(false)}
+              <button data-testid="chat-memory-delete-confirm-no" onClick={() => setConfirm(false)}
                 style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px",
                   border: "1px solid var(--border)", background: "transparent",
                   color: "var(--foreground)", cursor: "pointer", lineHeight: 1 }}>No</button>
             </div>
           ) : (
             <button
+              data-testid="chat-memory-row-delete"
               onClick={() => setConfirm(true)}
               style={{
                 background: "none", border: "none", cursor: "pointer",
diff --git a/packages/cms-admin/src/components/chat/inline-form.tsx b/packages/cms-admin/src/components/chat/inline-form.tsx
index 0a2c2126e..96f00d0e8 100644
--- a/packages/cms-admin/src/components/chat/inline-form.tsx
+++ b/packages/cms-admin/src/components/chat/inline-form.tsx
@@ -103,6 +103,7 @@ export function InlineForm({ form, onSaved }: InlineFormProps) {
         }}
       >
         <button
+          data-testid="inline-form-save-button"
           onClick={handleSave}
           disabled={saving}
           style={{
@@ -166,6 +167,7 @@ function FieldEditor({ field, value, onChange }: { field: InlineFormField; value
         <div>
           <label style={labelStyle}>{field.label}{field.required && " *"}</label>
           <input
+            data-testid="inline-form-text-input"
             type="text"
             value={String(value ?? "")}
             onChange={(e) => onChange(e.target.value)}
@@ -179,6 +181,7 @@ function FieldEditor({ field, value, onChange }: { field: InlineFormField; value
         <div>
           <label style={labelStyle}>{field.label}{field.required && " *"}</label>
           <textarea
+            data-testid="inline-form-textarea-input"
             value={String(value ?? "")}
             onChange={(e) => onChange(e.target.value)}
             rows={4}
@@ -192,6 +195,7 @@ function FieldEditor({ field, value, onChange }: { field: InlineFormField; value
         <div>
           <label style={labelStyle}>{field.label}{field.required && " *"}</label>
           <select
+            data-testid="inline-form-select-field"
             value={String(value ?? "")}
             onChange={(e) => onChange(e.target.value)}
             style={{ ...inputStyle, cursor: "pointer" }}
@@ -208,6 +212,7 @@ function FieldEditor({ field, value, onChange }: { field: InlineFormField; value
       return (
         <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
           <button
+            data-testid="inline-form-toggle-button"
             type="button"
             onClick={() => onChange(!value)}
             style={{
@@ -251,6 +256,7 @@ function FieldEditor({ field, value, onChange }: { field: InlineFormField; value
         <div>
           <label style={labelStyle}>{field.label}</label>
           <input
+            data-testid="inline-form-tags-input"
             type="text"
             value={Array.isArray(value) ? (value as string[]).join(", ") : String(value ?? "")}
             onChange={(e) => onChange(e.target.value.split(",").map((t) => t.trim()).filter(Boolean))}
@@ -265,6 +271,7 @@ function FieldEditor({ field, value, onChange }: { field: InlineFormField; value
         <div>
           <label style={labelStyle}>{field.label}</label>
           <input
+            data-testid="inline-form-text-input"
             type="text"
             value={String(value ?? "")}
             onChange={(e) => onChange(e.target.value)}
diff --git a/packages/cms-admin/src/components/chat/markdown-renderer.tsx b/packages/cms-admin/src/components/chat/markdown-renderer.tsx
index c71af16e9..ae52c72d9 100644
--- a/packages/cms-admin/src/components/chat/markdown-renderer.tsx
+++ b/packages/cms-admin/src/components/chat/markdown-renderer.tsx
@@ -33,6 +33,7 @@ function CopyButton({ text }: { text: string }) {
   }, [text]);
   return (
     <button
+      data-testid="markdown-copy-button"
       onClick={handleCopy}
       title="Copy"
       style={{
@@ -452,6 +453,7 @@ function DocPill({ collection, slug, variant }: { collection: string; slug: stri
   const label = variant === "edit" ? "Edit" : "View";
   return (
     <button
+      data-testid="markdown-doc-pill"
       type="button"
       onClick={async (e) => {
         e.preventDefault();
@@ -580,6 +582,7 @@ function InlineRich({ text }: { text: string }) {
         const formName = formMatch[1];
         parts.push(
           <button
+            data-testid="markdown-form-inbox-button"
             key={match.index}
             onClick={() => {
               window.dispatchEvent(new CustomEvent("cms:navigate-to-doc", { detail: { path: `/admin/forms/${formName}` } }));
@@ -601,6 +604,7 @@ function InlineRich({ text }: { text: string }) {
       if (linkMatch) {
         parts.push(
           <a
+            data-testid="markdown-inline-link"
             key={match.index}
             href={linkMatch[2]}
             target="_blank"
diff --git a/packages/cms-admin/src/components/chat/message-list.tsx b/packages/cms-admin/src/components/chat/message-list.tsx
index 1e28573d9..0e57dacb8 100644
--- a/packages/cms-admin/src/components/chat/message-list.tsx
+++ b/packages/cms-admin/src/components/chat/message-list.tsx
@@ -64,6 +64,7 @@ function MessageCopyButton({ text }: { text: string }) {
   }, [text]);
   return (
     <button
+      data-testid="message-copy-button"
       onClick={handleCopy}
       title="Copy response"
       style={{
@@ -221,6 +222,7 @@ export function MessageList({ messages, isThinking, thinkingText, thinkingStartT
         {isThinking && (
           <div style={{ padding: "16px 0" }}>
             <div
+              data-testid="message-thinking-container"
               style={{
                 display: "flex",
                 gap: "12px",
diff --git a/packages/cms-admin/src/components/chat/page-preview-card.tsx b/packages/cms-admin/src/components/chat/page-preview-card.tsx
index c6c4a4d08..339bb4760 100644
--- a/packages/cms-admin/src/components/chat/page-preview-card.tsx
+++ b/packages/cms-admin/src/components/chat/page-preview-card.tsx
@@ -135,6 +135,7 @@ export function PagePreviewCard({ pagePath }: PagePreviewCardProps) {
                 <RefreshCw style={{ width: "20px", height: "20px", opacity: 0.5 }} className="animate-spin" />
                 Building preview...
                 <button
+                  data-testid="preview-cancel-button"
                   onClick={() => setStatus("error")}
                   style={{
                     marginTop: "4px", background: "none", border: "1px solid var(--border)",
@@ -172,6 +173,7 @@ export function PagePreviewCard({ pagePath }: PagePreviewCardProps) {
         </div>
         {fullUrl && (
           <a
+            data-testid="preview-open-link"
             href={fullUrl}
             target="_blank"
             rel="noopener noreferrer"
diff --git a/packages/cms-admin/src/components/chat/welcome-screen.tsx b/packages/cms-admin/src/components/chat/welcome-screen.tsx
index 76688e3fe..e7c70a0e4 100644
--- a/packages/cms-admin/src/components/chat/welcome-screen.tsx
+++ b/packages/cms-admin/src/components/chat/welcome-screen.tsx
@@ -89,6 +89,7 @@ export function WelcomeScreen({ siteName, onSuggestionClick }: WelcomeScreenProp
       >
         {SUGGESTIONS.map(({ icon: Icon, label, message }) => (
           <button
+            data-testid="welcome-suggestion-button"
             key={label}
             onClick={() => onSuggestionClick(message)}
             style={{
diff --git a/packages/cms-admin/src/components/clone-agent-button.tsx b/packages/cms-admin/src/components/clone-agent-button.tsx
index 3e76766a3..5ed93a96c 100644
--- a/packages/cms-admin/src/components/clone-agent-button.tsx
+++ b/packages/cms-admin/src/components/clone-agent-button.tsx
@@ -22,6 +22,7 @@ export function CloneAgentButton({ id }: { id: string }) {
 
   return (
     <button
+      data-testid="clone-agent-button"
       type="button"
       onClick={handleClone}
       disabled={cloning}
diff --git a/packages/cms-admin/src/components/collection-list-page.tsx b/packages/cms-admin/src/components/collection-list-page.tsx
index 8cb2f43be..aa201d702 100644
--- a/packages/cms-admin/src/components/collection-list-page.tsx
+++ b/packages/cms-admin/src/components/collection-list-page.tsx
@@ -81,6 +81,7 @@ export function CollectionListPage({
             <div style={{ display: "flex", border: "1px solid var(--border)", borderRadius: "6px", overflow: "hidden" }}>
               {(["grid", "list"] as ViewMode[]).map((v) => (
                 <button
+                  data-testid={`collection-view-toggle-${v}`}
                   key={v}
                   type="button"
                   onClick={() => changeView(v)}
@@ -100,7 +101,7 @@ export function CollectionListPage({
               <>
                 {can("settings.edit") && (
                   <Link href={`/admin/settings/${collection}`}>
-                    <button type="button" style={{
+                    <button data-testid={`collection-edit-schema-button-${collection}`} type="button" style={{
                       height: "28px", display: "inline-flex", alignItems: "center", gap: "0.35rem",
                       padding: "0 0.65rem", borderRadius: "6px", fontSize: "0.75rem", fontWeight: 500,
                       background: "transparent", color: "var(--foreground)", border: "1px solid var(--border)",
@@ -112,7 +113,7 @@ export function CollectionListPage({
                   </Link>
                 )}
                 {can("import.execute") && (
-                  <button type="button" onClick={() => setImportOpen(true)} style={{
+                  <button data-testid={`collection-import-button-${collection}`} type="button" onClick={() => setImportOpen(true)} style={{
                     height: "28px", display: "inline-flex", alignItems: "center", gap: "0.35rem",
                     padding: "0 0.65rem", borderRadius: "6px", fontSize: "0.75rem", fontWeight: 500,
                     background: "transparent", color: "var(--foreground)", border: "1px solid var(--border)",
diff --git a/packages/cms-admin/src/components/collection-list.tsx b/packages/cms-admin/src/components/collection-list.tsx
index f8f0de842..5d8dbdc77 100644
--- a/packages/cms-admin/src/components/collection-list.tsx
+++ b/packages/cms-admin/src/components/collection-list.tsx
@@ -142,6 +142,7 @@ function RowMenu({ doc, collection, onClone, onToggle, onTrash, cloning, preview
   return (
     <div style={{ position: "relative" }}>
       <button
+        data-testid={`collection-row-menu-${doc.slug}`}
         ref={btnRef}
         type="button"
         onClick={openMenu}
@@ -167,6 +168,7 @@ function RowMenu({ doc, collection, onClone, onToggle, onTrash, cloning, preview
           </Link>
           {previewUrl && (
             <button
+              data-testid={`collection-row-preview-${doc.slug}`}
               type="button"
               onClick={(e) => { e.preventDefault(); e.stopPropagation(); window.open(previewUrl, "_blank"); setOpen(false); }}
               style={{ display: "flex", alignItems: "center", gap: "0.5rem", padding: "0.4rem 0.6rem", borderRadius: "5px", fontSize: "0.8rem", color: "var(--foreground)", background: "none", border: "none", cursor: "pointer", width: "100%" }}
@@ -176,6 +178,7 @@ function RowMenu({ doc, collection, onClone, onToggle, onTrash, cloning, preview
             </button>
           )}
           <button
+            data-testid={`collection-row-publish-${doc.slug}`}
             type="button"
             onClick={(e) => { onToggle(e); setOpen(false); }}
             style={{ display: "flex", alignItems: "center", gap: "0.5rem", padding: "0.4rem 0.6rem", borderRadius: "5px", fontSize: "0.8rem", color: "var(--foreground)", background: "none", border: "none", cursor: "pointer", width: "100%" }}
@@ -185,6 +188,7 @@ function RowMenu({ doc, collection, onClone, onToggle, onTrash, cloning, preview
             {doc.status === "published" ? "Unpublish" : "Publish"}
           </button>
           <button
+            data-testid={`collection-row-clone-${doc.slug}`}
             type="button"
             onClick={(e) => { onClone(e); setOpen(false); }}
             disabled={cloning}
@@ -194,6 +198,7 @@ function RowMenu({ doc, collection, onClone, onToggle, onTrash, cloning, preview
             <Copy style={{ width: "0.8rem", height: "0.8rem" }} /> {cloning ? "Cloning…" : "Clone"}
           </button>
           <button
+            data-testid={`collection-row-favorite-${doc.slug}`}
             type="button"
             onClick={(e) => {
               e.preventDefault();
@@ -220,10 +225,12 @@ function RowMenu({ doc, collection, onClone, onToggle, onTrash, cloning, preview
               <span style={{ fontSize: "0.75rem", color: "var(--destructive)", fontWeight: 500, flex: 1 }}>Move to trash?</span>
               <button
                 type="button"
+                data-testid="collection-trash-confirm"
                 onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); onTrash(e); setOpen(false); setConfirmTrash(false); }}
                 style={{ fontSize: "0.7rem", padding: "0.15rem 0.5rem", borderRadius: "4px", border: "none", background: "var(--destructive)", color: "#fff", cursor: "pointer", lineHeight: 1, fontWeight: 500 }}
               >Yes</button>
               <button
+                data-testid="collection-trash-cancel"
                 type="button"
                 onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); setConfirmTrash(false); }}
                 style={{ fontSize: "0.7rem", padding: "0.15rem 0.5rem", borderRadius: "4px", border: "1px solid var(--border)", background: "transparent", color: "var(--foreground)", cursor: "pointer", lineHeight: 1 }}
@@ -231,6 +238,7 @@ function RowMenu({ doc, collection, onClone, onToggle, onTrash, cloning, preview
             </div>
           ) : (
             <button
+              data-testid="collection-trash-button"
               type="button"
               onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); setConfirmTrash(true); }}
               style={{ display: "flex", alignItems: "center", gap: "0.5rem", padding: "0.4rem 0.6rem", borderRadius: "5px", fontSize: "0.8rem", color: "var(--destructive)", background: "none", border: "none", cursor: "pointer", width: "100%" }}
@@ -409,6 +417,7 @@ export function CollectionList({ collection, titleField, fields, initialDocs, re
     return (
       <th style={thStyle}>
         <button
+          data-testid={`collection-sort-${sk}`}
           type="button"
           onClick={() => toggleSort(sk)}
           style={{ display: "flex", alignItems: "center", gap: "0.25rem", background: "none", border: "none", cursor: "pointer", color: active ? "var(--foreground)" : "var(--muted-foreground)", fontSize: "0.72rem", fontWeight: active ? 600 : 500, padding: 0 }}
@@ -479,6 +488,7 @@ export function CollectionList({ collection, titleField, fields, initialDocs, re
         <div style={{ position: "relative", flex: "1", minWidth: "180px" }}>
           <Search style={{ position: "absolute", left: "0.625rem", top: "50%", transform: "translateY(-50%)", width: "0.8rem", height: "0.8rem", color: "var(--muted-foreground)", pointerEvents: "none" }} />
           <input
+            data-testid="collection-search-input"
             type="text"
             value={search}
             onChange={(e) => setSearch(e.target.value)}
@@ -489,6 +499,7 @@ export function CollectionList({ collection, titleField, fields, initialDocs, re
         <div style={{ display: "flex", gap: "0.25rem", flexWrap: "wrap" }}>
           {filterOptions.map((opt) => (
             <button
+              data-testid={`filter-${opt.value}`}
               key={opt.value}
               type="button"
               onClick={() => setStatusFilter(opt.value)}
@@ -515,6 +526,7 @@ export function CollectionList({ collection, titleField, fields, initialDocs, re
               ...siteLocales.map((l) => ({ value: l, label: `${LOCALE_FLAGS[l] ?? ""} ${l.toUpperCase()}` })),
             ].map((opt) => (
               <button
+                data-testid={`locale-filter-${opt.value}`}
                 key={opt.value}
                 type="button"
                 onClick={() => setLocaleFilter(opt.value)}
@@ -616,8 +628,8 @@ export function CollectionList({ collection, titleField, fields, initialDocs, re
 
                 return (
                   <tr
+                    data-testid={`collection-list-item-${doc.slug}`}
                     key={doc.id ?? doc.slug}
-                    data-testid={`collection-item-${doc.slug}`}
                     style={{ borderTop: i === 0 ? "none" : "1px solid var(--border)", transition: "background 120ms" }}
                     className="hover:bg-secondary/50"
                   >
@@ -654,7 +666,7 @@ export function CollectionList({ collection, titleField, fields, initialDocs, re
 
                     {/* Status */}
                     <td style={{ padding: "0.625rem 0.75rem", whiteSpace: "nowrap" }}>
-                      <button type="button" onClick={(e) => !readOnly && toggleStatus(e, doc)} title={readOnly ? doc.status : doc.status === "published" ? "Click to unpublish" : "Click to publish"} style={{ background: "none", border: "none", cursor: readOnly ? "default" : "pointer", padding: 0 }}>
+                      <button data-testid={`collection-status-toggle-${doc.slug}`} type="button" onClick={(e) => !readOnly && toggleStatus(e, doc)} title={readOnly ? doc.status : doc.status === "published" ? "Click to unpublish" : "Click to publish"} style={{ background: "none", border: "none", cursor: readOnly ? "default" : "pointer", padding: 0 }}>
                         <span style={{ display: "inline-flex", alignItems: "center", gap: "0.35rem" }}>
                           {isScheduled ? (
                             <Badge variant="outline" className="bg-violet-500/10 text-violet-400 border-violet-500/20 gap-1">
diff --git a/packages/cms-admin/src/components/command-palette.tsx b/packages/cms-admin/src/components/command-palette.tsx
index b3fcd6a5c..8466edad1 100644
--- a/packages/cms-admin/src/components/command-palette.tsx
+++ b/packages/cms-admin/src/components/command-palette.tsx
@@ -475,6 +475,7 @@ function CommandPalette({ onClose }: { onClose: () => void }) {
 
   return (
     <div
+      data-testid="command-palette-backdrop"
       onClick={onBackdropClick}
       style={{
         position: "fixed", inset: 0, zIndex: 200,
@@ -500,6 +501,7 @@ function CommandPalette({ onClose }: { onClose: () => void }) {
         <div style={{ display: "flex", alignItems: "center", gap: "0.75rem", padding: "0.875rem 1rem", borderBottom: "1px solid var(--border)" }}>
           <Search style={{ width: "1.1rem", height: "1.1rem", color: "var(--muted-foreground)", flexShrink: 0 }} />
           <input
+            data-testid="command-palette-search-input"
             ref={inputRef}
             type="text"
             value={query}
@@ -514,11 +516,12 @@ function CommandPalette({ onClose }: { onClose: () => void }) {
             spellCheck={false}
           />
           {query && (
-            <button type="button" onClick={() => setQuery("")} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", padding: "0.125rem" }}>
+            <button data-testid="command-palette-clear-search" type="button" onClick={() => setQuery("")} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", padding: "0.125rem" }}>
               <X style={{ width: "0.875rem", height: "0.875rem" }} />
             </button>
           )}
           <button
+            data-testid="command-palette-close"
             type="button"
             onClick={onClose}
             style={{ padding: "0.2rem", borderRadius: "4px", border: "none", color: "var(--muted-foreground)", flexShrink: 0, background: "none", cursor: "pointer", display: "flex", alignItems: "center" }}
@@ -558,6 +561,7 @@ function CommandPalette({ onClose }: { onClose: () => void }) {
                 const globalIdx = group.startIdx + localIdx;
                 return (
                   <button
+                    data-testid={`command-palette-item-${item.id}`}
                     key={item.id}
                     type="button"
                     data-idx={globalIdx}
diff --git a/packages/cms-admin/src/components/config-repair-panel.tsx b/packages/cms-admin/src/components/config-repair-panel.tsx
index 5cce0543b..ca9f1cba2 100644
--- a/packages/cms-admin/src/components/config-repair-panel.tsx
+++ b/packages/cms-admin/src/components/config-repair-panel.tsx
@@ -160,6 +160,7 @@ export function ConfigRepairPanel({ siteName, rawErrors }: Props) {
                   {diagnosis.issues.length} {diagnosis.issues.length === 1 ? "issue" : "issues"} found
                 </h2>
                 <button
+                  data-testid="config-repair-copy-button"
                   onClick={handleCopy}
                   title="Copy all issues as markdown — paste into AI site builder"
                   style={{
@@ -206,6 +207,7 @@ export function ConfigRepairPanel({ siteName, rawErrors }: Props) {
                     )}
                   </div>
                   <button
+                    data-testid="config-repair-expand-button"
                     onClick={() => setExpanded((p) => ({ ...p, [i]: !p[i] }))}
                     style={{
                       marginTop: "0.4rem", fontSize: "0.7rem", color: "var(--primary)",
@@ -261,6 +263,7 @@ export function ConfigRepairPanel({ siteName, rawErrors }: Props) {
                   )}
                   <div style={{ display: "flex", gap: "0.5rem", alignItems: "center", flexWrap: "wrap" }}>
                     <button
+                      data-testid="config-repair-fix-button"
                       onClick={() => setPhase("confirming")}
                       style={{
                         padding: "0.5rem 1.1rem", borderRadius: "7px",
@@ -295,6 +298,7 @@ export function ConfigRepairPanel({ siteName, rawErrors }: Props) {
               )}
               <div style={{ display: "flex", gap: "0.5rem" }}>
                 <button
+                  data-testid="config-repair-confirm-fix-button"
                   onClick={handleFix}
                   disabled={phase === "fixing"}
                   style={{
@@ -310,6 +314,7 @@ export function ConfigRepairPanel({ siteName, rawErrors }: Props) {
                   {phase === "fixing" ? "Fixing…" : "Ja, overskriv"}
                 </button>
                 <button
+                  data-testid="config-repair-cancel-fix-button"
                   onClick={() => setPhase("report")}
                   disabled={phase === "fixing"}
                   style={{
diff --git a/packages/cms-admin/src/components/deploy-modal.tsx b/packages/cms-admin/src/components/deploy-modal.tsx
index 4fe2398eb..24387ad1c 100644
--- a/packages/cms-admin/src/components/deploy-modal.tsx
+++ b/packages/cms-admin/src/components/deploy-modal.tsx
@@ -123,6 +123,7 @@ export function DeployModal({ open, onClose, configured, providerLabel, appName,
 
   return (
     <div
+      data-testid="deploy-modal-backdrop"
       style={{
         position: "fixed", inset: 0, zIndex: 9999,
         display: "flex", alignItems: "center", justifyContent: "center",
@@ -131,6 +132,7 @@ export function DeployModal({ open, onClose, configured, providerLabel, appName,
       onClick={handleClose}
     >
       <div
+        data-testid="deploy-modal-content"
         style={{
           background: "var(--card)", border: "1px solid var(--border)",
           borderRadius: "16px", padding: "2rem", width: "28rem",
@@ -147,6 +149,7 @@ export function DeployModal({ open, onClose, configured, providerLabel, appName,
             </h2>
           </div>
           <button
+            data-testid="deploy-modal-close-button"
             type="button"
             onClick={handleClose}
             style={{
@@ -178,6 +181,7 @@ export function DeployModal({ open, onClose, configured, providerLabel, appName,
             </div>
 
             <button
+              data-testid="deploy-modal-deploy-button"
               type="button"
               onClick={handleDeploy}
               style={{
@@ -196,6 +200,7 @@ export function DeployModal({ open, onClose, configured, providerLabel, appName,
               marginTop: "1rem", cursor: "pointer",
             }}>
               <input
+                data-testid="deploy-modal-skip-dialog-checkbox"
                 type="checkbox"
                 checked={skipDialog}
                 onChange={(e) => {
@@ -295,6 +300,7 @@ export function DeployModal({ open, onClose, configured, providerLabel, appName,
             {/* Success */}
             {isDone && finalUrl && (
               <a
+                data-testid="deploy-modal-success-link"
                 href={finalUrl}
                 target="_blank"
                 rel="noopener noreferrer"
@@ -315,6 +321,7 @@ export function DeployModal({ open, onClose, configured, providerLabel, appName,
             {/* Close button when done/error */}
             {(isDone || isError) && (
               <button
+                data-testid="deploy-modal-final-close-button"
                 type="button"
                 onClick={handleClose}
                 style={{
diff --git a/packages/cms-admin/src/components/deploy-output-browser.tsx b/packages/cms-admin/src/components/deploy-output-browser.tsx
index b3daa2112..37670480a 100644
--- a/packages/cms-admin/src/components/deploy-output-browser.tsx
+++ b/packages/cms-admin/src/components/deploy-output-browser.tsx
@@ -177,7 +177,7 @@ export function DeployOutputBrowser({ siteId }: Props) {
               {stats.totalFiles} files · {stats.htmlPages} HTML · {fmtBytes(stats.totalBytes)}
               {stats.lastModified && ` · ${fmtRel(stats.lastModified)}`}
             </span>
-            <button onClick={refresh} title="Refresh"
+            <button data-testid="deploy-browser-refresh-button" onClick={refresh} title="Refresh"
               style={{ display: "inline-flex", alignItems: "center", gap: "0.25rem", padding: "0.15rem 0.4rem",
                 background: "transparent", border: "1px solid var(--border)", borderRadius: "4px",
                 color: "var(--muted-foreground)", fontSize: "0.65rem", cursor: "pointer" }}>
@@ -234,7 +234,7 @@ function TreeNode({ relPath, tree, depth, onToggle, onSelect, selected }: {
           const expanded = child?.expanded ?? false;
           return (
             <div key={e.path}>
-              <button onClick={() => onToggle(e.path)}
+              <button data-testid="deploy-browser-dir-toggle" onClick={() => onToggle(e.path)}
                 style={{ display: "flex", alignItems: "center", gap: "0.35rem", padding: "0.15rem 0.25rem",
                   background: "transparent", border: "none", color: "var(--foreground)", cursor: "pointer", width: "100%", textAlign: "left",
                   paddingLeft: depth * 14 + 4 }}>
@@ -249,7 +249,7 @@ function TreeNode({ relPath, tree, depth, onToggle, onSelect, selected }: {
         const isSelected = selected?.path === e.path;
         const Icon = IMG_EXT.test(e.name) ? ImageIcon : FileText;
         return (
-          <button key={e.path}
+          <button data-testid="deploy-browser-file-select" key={e.path}
             onClick={() => onSelect(e)}
             style={{
               display: "flex", alignItems: "center", gap: "0.35rem", padding: "0.15rem 0.25rem",
@@ -301,7 +301,7 @@ function FilePreview({ entry, siteId, iframeRef }: {
     <div style={{ display: "flex", flexDirection: "column", gap: "0.25rem", minWidth: 0 }}>
       <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", fontSize: "0.7rem", color: "var(--muted-foreground)" }}>
         <code style={{ fontFamily: "var(--font-mono)", fontSize: "0.7rem" }}>deploy/{entry.path}</code>
-        <a href={fileUrl} target="_blank" rel="noopener noreferrer"
+        <a data-testid="deploy-browser-open-raw-link" href={fileUrl} target="_blank" rel="noopener noreferrer"
           style={{ display: "inline-flex", alignItems: "center", gap: "0.2rem", color: "var(--primary)", textDecoration: "none" }}>
           <ExternalLink size={10} /> Open raw
         </a>
diff --git a/packages/cms-admin/src/components/deploy-wizard/deploy-wizard.tsx b/packages/cms-admin/src/components/deploy-wizard/deploy-wizard.tsx
index c24eecbf6..d82e5f304 100644
--- a/packages/cms-admin/src/components/deploy-wizard/deploy-wizard.tsx
+++ b/packages/cms-admin/src/components/deploy-wizard/deploy-wizard.tsx
@@ -92,6 +92,7 @@ export function DeployWizard() {
       {state.step < 4 && (
         <div style={{ display: "flex", justifyContent: "space-between", marginTop: "2rem", paddingTop: "1.5rem", borderTop: "1px solid var(--border)" }}>
           <button
+            data-testid="deploy-wizard-back-button"
             onClick={() => update({ step: Math.max(1, state.step - 1) as WizardState["step"] })}
             disabled={state.step === 1}
             style={{
@@ -109,6 +110,7 @@ export function DeployWizard() {
           </button>
 
           <button
+            data-testid="deploy-wizard-next-button"
             onClick={() => update({ step: Math.min(4, state.step + 1) as WizardState["step"] })}
             disabled={!canNext}
             style={{
diff --git a/packages/cms-admin/src/components/deploy-wizard/step-configure.tsx b/packages/cms-admin/src/components/deploy-wizard/step-configure.tsx
index 9abc82402..48be7e681 100644
--- a/packages/cms-admin/src/components/deploy-wizard/step-configure.tsx
+++ b/packages/cms-admin/src/components/deploy-wizard/step-configure.tsx
@@ -64,6 +64,7 @@ export function StepConfigure({ appName, region, vmSize, adminEmail, onUpdate }:
         <div>
           <label style={labelStyle}>App name</label>
           <input
+            data-testid="deploy-app-name-input"
             type="text"
             value={appName}
             onChange={(e) => onUpdate({ appName: e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, "") })}
@@ -84,6 +85,7 @@ export function StepConfigure({ appName, region, vmSize, adminEmail, onUpdate }:
         <div>
           <label style={labelStyle}>Admin email</label>
           <input
+            data-testid="deploy-admin-email-input"
             type="email"
             value={adminEmail}
             onChange={(e) => onUpdate({ adminEmail: e.target.value })}
@@ -128,6 +130,7 @@ export function StepConfigure({ appName, region, vmSize, adminEmail, onUpdate }:
           Prefer to self-host? Download a Docker package with everything you need.
         </p>
         <button
+          data-testid="deploy-download-docker-button"
           onClick={handleDownloadZip}
           disabled={!appName}
           style={{
diff --git a/packages/cms-admin/src/components/deploy-wizard/step-connect.tsx b/packages/cms-admin/src/components/deploy-wizard/step-connect.tsx
index e6fec7982..4c7de2af3 100644
--- a/packages/cms-admin/src/components/deploy-wizard/step-connect.tsx
+++ b/packages/cms-admin/src/components/deploy-wizard/step-connect.tsx
@@ -84,6 +84,7 @@ export function StepConnect({ flyToken, flyOrg, onUpdate }: Props) {
           </label>
           <div style={{ display: "flex", gap: "0.5rem" }}>
             <input
+              data-testid="step-connect-fly-token"
               type="password"
               value={flyToken}
               onChange={(e) => {
@@ -95,6 +96,7 @@ export function StepConnect({ flyToken, flyOrg, onUpdate }: Props) {
               style={{ ...inputStyle, flex: 1 }}
             />
             <button
+              data-testid="step-connect-verify-button"
               onClick={handleVerify}
               disabled={!flyToken || verifying}
               style={{
@@ -115,6 +117,7 @@ export function StepConnect({ flyToken, flyOrg, onUpdate }: Props) {
             </button>
           </div>
           <a
+            data-testid="step-connect-get-token-link"
             href="https://fly.io/dashboard/personal/tokens"
             target="_blank"
             rel="noopener noreferrer"
@@ -155,6 +158,7 @@ export function StepConnect({ flyToken, flyOrg, onUpdate }: Props) {
             <div style={{ display: "flex", flexDirection: "column", gap: "0.4rem" }}>
               {orgs.map((org) => (
                 <button
+                  data-testid={`step-connect-org-${org.slug}`}
                   key={org.slug}
                   onClick={() => onUpdate({ flyOrg: org.slug })}
                   type="button"
diff --git a/packages/cms-admin/src/components/deploy-wizard/step-deploy.tsx b/packages/cms-admin/src/components/deploy-wizard/step-deploy.tsx
index 67054a374..2236ea643 100644
--- a/packages/cms-admin/src/components/deploy-wizard/step-deploy.tsx
+++ b/packages/cms-admin/src/components/deploy-wizard/step-deploy.tsx
@@ -146,7 +146,7 @@ export function StepDeploy({ state }: Props) {
           const isActive = isCurrent || isCompleted;
 
           return (
-            <div key={step.key} style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+            <div key={step.key} data-testid={`deploy-step-${step.key}`} style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
               <div style={{
                 width: 22,
                 height: 22,
@@ -216,6 +216,7 @@ export function StepDeploy({ state }: Props) {
       {isDone && finalUrl && (
         <div style={{ marginTop: "1.5rem" }}>
           <a
+            data-testid="deploy-success-url"
             href={finalUrl}
             target="_blank"
             rel="noopener noreferrer"
diff --git a/packages/cms-admin/src/components/deploy-wizard/step-template.tsx b/packages/cms-admin/src/components/deploy-wizard/step-template.tsx
index 3952c7b55..008dd267d 100644
--- a/packages/cms-admin/src/components/deploy-wizard/step-template.tsx
+++ b/packages/cms-admin/src/components/deploy-wizard/step-template.tsx
@@ -85,6 +85,7 @@ export function StepTemplate({ selected, onSelect }: Props) {
           }}>
             {sites.map((site) => (
               <button
+                data-testid={`deploy-site-select-${site.id}`}
                 key={site.id}
                 type="button"
                 onClick={() => onSelect(`site:${site.id}`)}
diff --git a/packages/cms-admin/src/components/deploy-wizard/template-card.tsx b/packages/cms-admin/src/components/deploy-wizard/template-card.tsx
index 0ac3320c7..b98c56c40 100644
--- a/packages/cms-admin/src/components/deploy-wizard/template-card.tsx
+++ b/packages/cms-admin/src/components/deploy-wizard/template-card.tsx
@@ -15,6 +15,7 @@ interface Props {
 export function TemplateCard({ name, description, tags, screenshotUrl, selected, onClick }: Props) {
   return (
     <button
+      data-testid="deploy-template-card"
       onClick={onClick}
       type="button"
       style={{
@@ -41,6 +42,7 @@ export function TemplateCard({ name, description, tags, screenshotUrl, selected,
         {screenshotUrl && (
           // eslint-disable-next-line @next/next/no-img-element
           <img
+            data-testid="deploy-template-screenshot"
             src={screenshotUrl}
             alt={name}
             loading="lazy"
diff --git a/packages/cms-admin/src/components/dev-inspector.tsx b/packages/cms-admin/src/components/dev-inspector.tsx
index 9ec8a531c..0b3d63d4f 100644
--- a/packages/cms-admin/src/components/dev-inspector.tsx
+++ b/packages/cms-admin/src/components/dev-inspector.tsx
@@ -120,6 +120,7 @@ export function DevInspector() {
     <>
       {/* Toggle badge — always visible, clickable */}
       <button
+        data-testid="dev-inspector-toggle-button"
         type="button"
         onClick={toggle}
         title="Toggle dev inspector (Ctrl+I)"
diff --git a/packages/cms-admin/src/components/editor/ai-bubble-menu.tsx b/packages/cms-admin/src/components/editor/ai-bubble-menu.tsx
index eccd97e6c..b8066bbda 100644
--- a/packages/cms-admin/src/components/editor/ai-bubble-menu.tsx
+++ b/packages/cms-admin/src/components/editor/ai-bubble-menu.tsx
@@ -98,6 +98,7 @@ export function AIBubbleMenu({ editor }: Props) {
           </div>
           {QUICK_ACTIONS.map((action) => (
             <button
+              data-testid="ai-bubble-action-button"
               key={action.label}
               type="button"
               disabled={loading}
@@ -120,6 +121,7 @@ export function AIBubbleMenu({ editor }: Props) {
             </button>
           ))}
           <button
+            data-testid="ai-bubble-custom-button"
             type="button"
             disabled={loading}
             onClick={() => setShowCustom((o) => !o)}
@@ -144,6 +146,7 @@ export function AIBubbleMenu({ editor }: Props) {
         {showCustom && (
           <div style={{ padding: "0.5rem", display: "flex", gap: "0.375rem" }}>
             <input
+              data-testid="ai-bubble-custom-input"
               type="text"
               value={customInstruction}
               onChange={(e) => setCustomInstruction(e.target.value)}
@@ -167,6 +170,7 @@ export function AIBubbleMenu({ editor }: Props) {
               }}
             />
             <button
+              data-testid="ai-bubble-custom-submit"
               type="button"
               disabled={loading || !customInstruction.trim()}
               onClick={() => rewrite(customInstruction)}
diff --git a/packages/cms-admin/src/components/editor/ai-panel.tsx b/packages/cms-admin/src/components/editor/ai-panel.tsx
index fdc9d146f..58ff33a14 100644
--- a/packages/cms-admin/src/components/editor/ai-panel.tsx
+++ b/packages/cms-admin/src/components/editor/ai-panel.tsx
@@ -206,6 +206,7 @@ export function AIPanel({ collection, colConfig, doc, onClose, onInsert }: Props
           <span style={{ fontWeight: 600, fontSize: "0.875rem" }}>AI Assistant</span>
         </div>
         <button
+          data-testid="ai-panel-close-button"
           type="button"
           onClick={onClose}
           style={{ background: "transparent", border: "none", cursor: "pointer", color: "var(--muted-foreground)", padding: "0.25rem" }}
@@ -246,6 +247,7 @@ export function AIPanel({ collection, colConfig, doc, onClose, onInsert }: Props
 
             {/* Generate new version — primary action */}
             <button
+              data-testid="ai-panel-generate-version"
               type="button"
               onClick={() => {
                 const prompt = `Generate a completely new version of this document. Use the existing title and topic as a guide, but write fresh content with a new structure and angle. Return only the content for the "${insertTarget || richTextFields[0]?.name || "content"}" field.`;
@@ -314,6 +316,7 @@ export function AIPanel({ collection, colConfig, doc, onClose, onInsert }: Props
               "Make the title more engaging",
             ].map((suggestion) => (
               <button
+                data-testid={`ai-panel-suggestion-${suggestion.toLowerCase().replace(/\s+/g, '-')}`}
                 key={suggestion}
                 type="button"
                 onClick={() => { setInput(suggestion); inputRef.current?.focus(); }}
@@ -361,6 +364,7 @@ export function AIPanel({ collection, colConfig, doc, onClose, onInsert }: Props
             {msg.role === "assistant" && msg.content && (
               <div style={{ display: "flex", gap: "0.375rem", paddingLeft: "0.25rem" }}>
                 <button
+                  data-testid={`ai-panel-copy-message-${idx}`}
                   type="button"
                   onClick={() => copyMessage(msg.content, idx)}
                   title="Copy"
@@ -382,6 +386,7 @@ export function AIPanel({ collection, colConfig, doc, onClose, onInsert }: Props
                 </button>
                 {insertTarget && (
                   <button
+                    data-testid={`ai-panel-insert-message-${idx}`}
                     type="button"
                     onClick={() => insertMessage(msg.content)}
                     style={{
@@ -417,6 +422,7 @@ export function AIPanel({ collection, colConfig, doc, onClose, onInsert }: Props
         flexShrink: 0,
       }}>
         <textarea
+          data-testid="ai-panel-input"
           ref={inputRef}
           value={input}
           onChange={(e) => setInput(e.target.value)}
@@ -440,6 +446,7 @@ export function AIPanel({ collection, colConfig, doc, onClose, onInsert }: Props
           onBlur={(e) => { e.target.style.borderColor = "var(--border)"; }}
         />
         <button
+          data-testid="ai-panel-send-button"
           type="button"
           onClick={send}
           disabled={!input.trim() || streaming}
diff --git a/packages/cms-admin/src/components/editor/blocks-editor.tsx b/packages/cms-admin/src/components/editor/blocks-editor.tsx
index 621234052..ee1122ae2 100644
--- a/packages/cms-admin/src/components/editor/blocks-editor.tsx
+++ b/packages/cms-admin/src/components/editor/blocks-editor.tsx
@@ -261,6 +261,7 @@ export function BlocksEditor({ field, value, onChange, locked, blocksConfig = []
       {blocks.length >= 2 && (
         <div style={{ display: "flex", justifyContent: "flex-end", gap: "0.25rem" }}>
           <button
+            data-testid="blocks-open-all-button"
             type="button"
             onClick={() => toggleAll(true)}
             disabled={allOpen}
@@ -275,6 +276,7 @@ export function BlocksEditor({ field, value, onChange, locked, blocksConfig = []
           </button>
           <span style={{ fontSize: "0.6rem", color: "var(--muted-foreground)", opacity: 0.3 }}>|</span>
           <button
+            data-testid="blocks-close-all-button"
             type="button"
             onClick={() => toggleAll(false)}
             disabled={allClosed}
@@ -306,6 +308,7 @@ export function BlocksEditor({ field, value, onChange, locked, blocksConfig = []
           <div
             key={i}
             ref={flashIdx === i ? flashRef : undefined}
+            data-testid={`block-item-${i}`}
             style={{
               border: flashIdx === i ? "1px solid var(--primary)" : "1px solid var(--border)",
               borderRadius: "8px",
@@ -317,6 +320,7 @@ export function BlocksEditor({ field, value, onChange, locked, blocksConfig = []
           >
             {/* Header */}
             <div
+              data-testid={`block-header-${i}`}
               onClick={() => toggle(i)}
               style={{
                 display: "flex",
@@ -349,16 +353,16 @@ export function BlocksEditor({ field, value, onChange, locked, blocksConfig = []
                 {getBlockLabel(block, config)}
               </span>
               {!locked && (
-                <span style={{ display: "flex", gap: "0.25rem", alignItems: "center" }} onClick={(e) => e.stopPropagation()}>
+                <span data-testid={`block-actions-${i}`} style={{ display: "flex", gap: "0.25rem", alignItems: "center" }} onClick={(e) => e.stopPropagation()}>
                   {confirmRemoveIdx === i ? (
                     <>
                       <span style={{ fontSize: "0.65rem", color: "var(--destructive)", fontWeight: 500, padding: "0 2px", whiteSpace: "nowrap" }}>Remove?</span>
-                      <button type="button" onClick={() => {
+                      <button data-testid={`block-remove-confirm-${i}`} type="button" onClick={() => {
                         if (confirmTimer.current) clearTimeout(confirmTimer.current);
                         setConfirmRemoveIdx(null);
                         removeBlock(i);
                       }} style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "none", background: "var(--destructive)", color: "#fff", cursor: "pointer", lineHeight: 1 }}>Yes</button>
-                      <button type="button" onClick={() => {
+                      <button data-testid={`block-remove-cancel-${i}`} type="button" onClick={() => {
                         if (confirmTimer.current) clearTimeout(confirmTimer.current);
                         setConfirmRemoveIdx(null);
                       }} style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "1px solid var(--border)", background: "transparent", color: "var(--foreground)", cursor: "pointer", lineHeight: 1 }}>No</button>
@@ -366,20 +370,20 @@ export function BlocksEditor({ field, value, onChange, locked, blocksConfig = []
                   ) : (
                     <>
                     {config?.propertyFields && config.propertyFields.length > 0 && (
-                      <button type="button" onClick={() => setPropsOpenIdx(propsOpenIdx === i ? null : i)} title="Properties" style={{ background: "none", border: "none", cursor: "pointer", color: propsOpenIdx === i ? "var(--primary)" : "var(--muted-foreground)", padding: "2px" }} className="hover:text-primary transition-colors">
+                      <button data-testid={`block-properties-${i}`} type="button" onClick={() => setPropsOpenIdx(propsOpenIdx === i ? null : i)} title="Properties" style={{ background: "none", border: "none", cursor: "pointer", color: propsOpenIdx === i ? "var(--primary)" : "var(--muted-foreground)", padding: "2px" }} className="hover:text-primary transition-colors">
                         <Settings2 style={{ width: 14, height: 14 }} />
                       </button>
                     )}
-                    <button type="button" disabled={i === 0} onClick={() => moveBlock(i, -1)} style={{ background: "none", border: "none", cursor: i === 0 ? "not-allowed" : "pointer", color: "var(--muted-foreground)", padding: "2px", opacity: i === 0 ? 0.3 : 1 }}>
+                    <button data-testid={`block-move-up-${i}`} type="button" disabled={i === 0} onClick={() => moveBlock(i, -1)} style={{ background: "none", border: "none", cursor: i === 0 ? "not-allowed" : "pointer", color: "var(--muted-foreground)", padding: "2px", opacity: i === 0 ? 0.3 : 1 }}>
                       <ArrowUp style={{ width: 14, height: 14 }} />
                     </button>
-                    <button type="button" disabled={i === blocks.length - 1} onClick={() => moveBlock(i, 1)} style={{ background: "none", border: "none", cursor: i === blocks.length - 1 ? "not-allowed" : "pointer", color: "var(--muted-foreground)", padding: "2px", opacity: i === blocks.length - 1 ? 0.3 : 1 }}>
+                    <button data-testid={`block-move-down-${i}`} type="button" disabled={i === blocks.length - 1} onClick={() => moveBlock(i, 1)} style={{ background: "none", border: "none", cursor: i === blocks.length - 1 ? "not-allowed" : "pointer", color: "var(--muted-foreground)", padding: "2px", opacity: i === blocks.length - 1 ? 0.3 : 1 }}>
                       <ArrowDown style={{ width: 14, height: 14 }} />
                     </button>
-                    <button type="button" onClick={() => cloneBlock(i)} title="Clone block" style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", padding: "2px" }} className="hover:text-primary transition-colors">
+                    <button data-testid={`block-clone-${i}`} type="button" onClick={() => cloneBlock(i)} title="Clone block" style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", padding: "2px" }} className="hover:text-primary transition-colors">
                       <Copy style={{ width: 14, height: 14 }} />
                     </button>
-                    <button type="button" onClick={() => {
+                    <button data-testid={`block-remove-trigger-${i}`} type="button" onClick={() => {
                       if (confirmTimer.current) clearTimeout(confirmTimer.current);
                       setConfirmRemoveIdx(i);
                       confirmTimer.current = setTimeout(() => setConfirmRemoveIdx(null), 3000);
@@ -493,6 +497,7 @@ export function BlocksEditor({ field, value, onChange, locked, blocksConfig = []
         <div ref={pickerContainerRef} style={{ display: "flex", alignItems: "flex-start", gap: "0.5rem", marginTop: "0.25rem" }}>
           {!showPicker ? (
             <button
+              data-testid="blocks-add-button"
               type="button"
               onClick={() => { setShowPicker(true); setPickerHighlight(0); }}
               style={{
@@ -530,6 +535,7 @@ export function BlocksEditor({ field, value, onChange, locked, blocksConfig = []
           ) : (
             <div style={{ width: "220px" }}>
               <input
+                data-testid="blocks-picker-input"
                 ref={pickerInputRef}
                 type="text"
                 value={pickerQuery}
@@ -580,6 +586,7 @@ export function BlocksEditor({ field, value, onChange, locked, blocksConfig = []
                       const highlighted = pickerHighlight === idx;
                       return (
                         <button
+                          data-testid={`blocks-picker-option-${name}`}
                           key={name}
                           type="button"
                           onMouseDown={(e) => { e.preventDefault(); addBlock(name); setShowPicker(false); setPickerQuery(""); setPickerHighlight(-1); }}
diff --git a/packages/cms-admin/src/components/editor/columns-editor.tsx b/packages/cms-admin/src/components/editor/columns-editor.tsx
index f2ccc9f80..4b4598029 100644
--- a/packages/cms-admin/src/components/editor/columns-editor.tsx
+++ b/packages/cms-admin/src/components/editor/columns-editor.tsx
@@ -150,6 +150,7 @@ export function ColumnsEditor({ block, onChange, locked, blocksConfig = [] }: Co
           <div style={{ display: "flex", gap: "0.35rem", flexWrap: "wrap", alignItems: "center" }}>
             {LAYOUT_PRESETS.map((preset) => (
               <button
+                data-testid="columns-layout-preset-button"
                 key={preset.value}
                 type="button"
                 onClick={() => requestLayout(preset.value)}
@@ -172,11 +173,11 @@ export function ColumnsEditor({ block, onChange, locked, blocksConfig = [] }: Co
             {/* Open all / Close all — right-aligned */}
             {totalBlocks >= 2 && (
               <div style={{ display: "flex", gap: "0.25rem", marginLeft: "auto" }}>
-                <button type="button" onClick={() => toggleAllColumns(true)} disabled={allOpen}
+                <button data-testid="columns-open-all-button" type="button" onClick={() => toggleAllColumns(true)} disabled={allOpen}
                   style={{ background: "none", border: "none", cursor: allOpen ? "default" : "pointer", fontSize: "0.6rem", color: "var(--muted-foreground)", opacity: allOpen ? 0.4 : 1, padding: "0.1rem 0.3rem" }}
                   className={allOpen ? "" : "hover:text-foreground transition-colors"}>Open all</button>
                 <span style={{ fontSize: "0.6rem", color: "var(--muted-foreground)", opacity: 0.3 }}>|</span>
-                <button type="button" onClick={() => toggleAllColumns(false)} disabled={allClosed}
+                <button data-testid="columns-close-all-button" type="button" onClick={() => toggleAllColumns(false)} disabled={allClosed}
                   style={{ background: "none", border: "none", cursor: allClosed ? "default" : "pointer", fontSize: "0.6rem", color: "var(--muted-foreground)", opacity: allClosed ? 0.4 : 1, padding: "0.1rem 0.3rem" }}
                   className={allClosed ? "" : "hover:text-foreground transition-colors"}>Close all</button>
               </div>
@@ -197,9 +198,9 @@ export function ColumnsEditor({ block, onChange, locked, blocksConfig = [] }: Co
               <span style={{ color: "var(--destructive)", fontWeight: 500 }}>
                 Column {droppedColumnsWithContent(pendingLayout).join(", ")} content will be removed.
               </span>
-              <button type="button" onClick={() => applyLayout(pendingLayout)}
+              <button data-testid="columns-layout-confirm-ok" type="button" onClick={() => applyLayout(pendingLayout)}
                 style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "none", background: "var(--destructive)", color: "#fff", cursor: "pointer", lineHeight: 1 }}>OK</button>
-              <button type="button" onClick={() => setPendingLayout(null)}
+              <button data-testid="columns-layout-confirm-cancel" type="button" onClick={() => setPendingLayout(null)}
                 style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "1px solid var(--border)", background: "transparent", color: "var(--foreground)", cursor: "pointer", lineHeight: 1 }}>Cancel</button>
             </div>
           )}
@@ -239,6 +240,7 @@ export function ColumnsEditor({ block, onChange, locked, blocksConfig = [] }: Co
               Editing Column {focusedCol + 1}
             </span>
             <button
+              data-testid="columns-focused-close-button"
               type="button"
               onClick={() => setFocusedCol(null)}
               style={{
@@ -315,6 +317,7 @@ export function ColumnsEditor({ block, onChange, locked, blocksConfig = [] }: Co
                   Column {colIdx + 1}
                 </span>
                 <button
+                  data-testid="columns-expand-button"
                   type="button"
                   onClick={() => setFocusedCol(colIdx)}
                   title="Expand column editor"
diff --git a/packages/cms-admin/src/components/editor/document-editor.tsx b/packages/cms-admin/src/components/editor/document-editor.tsx
index ac24a2996..be1ccfff2 100644
--- a/packages/cms-admin/src/components/editor/document-editor.tsx
+++ b/packages/cms-admin/src/components/editor/document-editor.tsx
@@ -53,12 +53,12 @@ function ConfirmDialog({ message, confirmLabel = "Delete", onConfirm, onCancel }
       }}>
         <p style={{ fontSize: "0.9rem", color: "var(--foreground)", margin: 0 }}>{message}</p>
         <div style={{ display: "flex", justifyContent: "flex-end", gap: "0.5rem" }}>
-          <button type="button" onClick={onCancel} style={{
+          <button data-testid="confirm-dialog-cancel" type="button" onClick={onCancel} style={{
             padding: "0.4rem 0.875rem", borderRadius: "6px",
             border: "1px solid var(--border)", background: "transparent",
             color: "var(--foreground)", fontSize: "0.8rem", cursor: "pointer",
           }}>Cancel</button>
-          <button type="button" onClick={onConfirm} style={{
+          <button data-testid="confirm-dialog-confirm" type="button" onClick={onConfirm} style={{
             padding: "0.4rem 0.875rem", borderRadius: "6px",
             border: "none", background: "var(--destructive)",
             color: "#fff", fontSize: "0.8rem", cursor: "pointer",
@@ -108,6 +108,7 @@ function RichtextCollapsible({ field, value, onChange, locked, blocksConfig, def
     <div style={{ border: "1px solid var(--border)", borderRadius: "8px", background: "var(--card)" }}>
       {/* Header */}
       <div
+        data-testid="richtext-collapsible-header"
         onClick={toggle}
         style={{
           display: "flex", alignItems: "center", gap: "0.5rem",
@@ -126,7 +127,7 @@ function RichtextCollapsible({ field, value, onChange, locked, blocksConfig, def
           {open ? (field.label ?? field.name) : (previewShort || (field.label ?? field.name))}
         </span>
         {/* Lock button */}
-        <span onClick={(e) => { e.stopPropagation(); onToggleLock(); }} style={{
+        <span data-testid="richtext-collapsible-lock" onClick={(e) => { e.stopPropagation(); onToggleLock(); }} style={{
           display: "flex", alignItems: "center", gap: "0.2rem",
           fontSize: "0.65rem", color: locked ? "var(--primary)" : "var(--muted-foreground)",
           opacity: locked ? 1 : 0.45, cursor: "pointer", fontFamily: "monospace",
@@ -271,6 +272,7 @@ function CreateTranslationDialog({
           <div style={{ display: "flex", flexDirection: "column", gap: "0.35rem" }}>
             <label style={{ fontSize: "0.7rem", fontFamily: "monospace", textTransform: "uppercase", letterSpacing: "0.05em", color: "var(--muted-foreground)" }}>Slug for translation</label>
             <input
+              data-testid="create-translation-slug-input"
               type="text"
               value={newSlug}
               onChange={e => setNewSlug(e.target.value)}
@@ -284,6 +286,7 @@ function CreateTranslationDialog({
 
         <label style={{ display: "flex", alignItems: "center", gap: "0.5rem", cursor: "pointer" }}>
           <input
+            data-testid="create-translation-ai-checkbox"
             type="checkbox"
             checked={useAi}
             onChange={e => setUseAi(e.target.checked)}
@@ -303,8 +306,8 @@ function CreateTranslationDialog({
         {error && <p style={{ fontSize: "0.75rem", color: "var(--destructive)", margin: 0 }}>{error}</p>}
 
         <div style={{ display: "flex", justifyContent: "flex-end", gap: "0.5rem" }}>
-          <button type="button" onClick={onClose} style={{ padding: "0.4rem 0.875rem", borderRadius: "6px", border: "1px solid var(--border)", background: "transparent", color: "var(--foreground)", fontSize: "0.8rem", cursor: "pointer" }}>Cancel</button>
-          <button type="button" onClick={create} disabled={creating} style={{ padding: "0.4rem 0.875rem", borderRadius: "6px", border: "none", background: "var(--primary)", color: "var(--primary-foreground)", fontSize: "0.8rem", cursor: creating ? "wait" : "pointer", display: "inline-flex", alignItems: "center", gap: "0.4rem" }}>
+          <button data-testid="create-translation-cancel" type="button" onClick={onClose} style={{ padding: "0.4rem 0.875rem", borderRadius: "6px", border: "1px solid var(--border)", background: "transparent", color: "var(--foreground)", fontSize: "0.8rem", cursor: "pointer" }}>Cancel</button>
+          <button data-testid="create-translation-confirm" type="button" onClick={create} disabled={creating} style={{ padding: "0.4rem 0.875rem", borderRadius: "6px", border: "none", background: "var(--primary)", color: "var(--primary-foreground)", fontSize: "0.8rem", cursor: creating ? "wait" : "pointer", display: "inline-flex", alignItems: "center", gap: "0.4rem" }}>
             {creating && <Loader2 size={14} className="animate-spin" />}
             {creating ? (useAi ? "Translating…" : "Creating…") : (useAi ? "Translate & create" : "Create translation")}
           </button>
@@ -351,6 +354,7 @@ function ScheduleButton({ publishAt, onSchedule, label = "Scheduled", defaultLab
   return (
     <div ref={ref} style={{ position: "relative" }}>
       <button
+        data-testid="schedule-button-trigger"
         type="button"
         onClick={() => setOpen((o) => !o)}
         title={isScheduled ? `${label}: ${publishAt!.replace("T", " ")}` : defaultLabel}
@@ -379,6 +383,7 @@ function ScheduleButton({ publishAt, onSchedule, label = "Scheduled", defaultLab
           <CustomDateTimeInput value={value} onChange={setValue} />
           <div style={{ display: "flex", gap: "0.5rem" }}>
             <button
+              data-testid="schedule-button-set"
               type="button"
               onClick={() => {
                 onSchedule(value ? value + ":00" : undefined);
@@ -390,6 +395,7 @@ function ScheduleButton({ publishAt, onSchedule, label = "Scheduled", defaultLab
             </button>
             {publishAt && (
               <button
+                data-testid="schedule-button-clear"
                 type="button"
                 onClick={() => { onSchedule(undefined); setValue(""); setOpen(false); }}
                 style={{ padding: "0.35rem 0.625rem", borderRadius: "5px", border: "1px solid var(--border)", background: "transparent", color: "var(--muted-foreground)", fontSize: "0.8rem", cursor: "pointer" }}
@@ -521,7 +527,7 @@ function RevisionPanel({ collection, slug, currentData, onRestore, onClose }: {
     }}>
       <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0.75rem 1rem", borderBottom: "1px solid var(--border)" }}>
         <span style={{ fontWeight: 600, fontSize: "0.875rem" }}>Revision history</span>
-        <button type="button" onClick={onClose} style={{ background: "transparent", border: "none", cursor: "pointer", color: "var(--muted-foreground)", fontSize: "1.1rem", lineHeight: 1 }}>×</button>
+        <button data-testid="revision-panel-close" type="button" onClick={onClose} style={{ background: "transparent", border: "none", cursor: "pointer", color: "var(--muted-foreground)", fontSize: "1.1rem", lineHeight: 1 }}>×</button>
       </div>
       <div style={{ flex: 1, overflowY: "auto", padding: "0.5rem 0" }}>
         {loading && <p style={{ padding: "1rem", fontSize: "0.8rem", color: "var(--muted-foreground)" }}>Loading…</p>}
@@ -548,6 +554,7 @@ function RevisionPanel({ collection, slug, currentData, onRestore, onClose }: {
                   </p>
                   {changedFields.length > 0 && (
                     <button
+                      data-testid="revision-diff-toggle"
                       type="button"
                       onClick={() => setExpanded(isOpen ? null : idx)}
                       style={{ fontSize: "0.65rem", color: "var(--primary)", background: "transparent", border: "none", cursor: "pointer", padding: 0, marginTop: "0.2rem" }}
@@ -557,6 +564,7 @@ function RevisionPanel({ collection, slug, currentData, onRestore, onClose }: {
                   )}
                 </div>
                 <button
+                  data-testid="revision-restore"
                   type="button"
                   onClick={() => restore(idx)}
                   disabled={restoring === idx}
@@ -698,6 +706,7 @@ function TranslationGroupSection({ doc, collection, onSaved, labelStyle, valueSt
       )}
       {!linking ? (
         <button
+          data-testid="translation-group-link-button"
           type="button"
           onClick={() => setLinking(true)}
           style={{
@@ -712,6 +721,7 @@ function TranslationGroupSection({ doc, collection, onSaved, labelStyle, valueSt
       ) : (
         <div style={{ marginTop: "0.4rem", display: "flex", flexDirection: "column", gap: "0.35rem" }}>
           <input
+            data-testid="translation-group-search-input"
             type="text"
             value={search}
             onChange={(e) => { setSearch(e.target.value); searchDocs(e.target.value); }}
@@ -725,6 +735,7 @@ function TranslationGroupSection({ doc, collection, onSaved, labelStyle, valueSt
           />
           {results.map(r => (
             <button
+              data-testid="translation-group-result"
               key={r.slug}
               type="button"
               onClick={() => linkDoc(r.slug)}
@@ -740,6 +751,7 @@ function TranslationGroupSection({ doc, collection, onSaved, labelStyle, valueSt
             </button>
           ))}
           <button
+            data-testid="translation-group-cancel"
             type="button"
             onClick={() => { setLinking(false); setSearch(""); setResults([]); setLinkError(""); }}
             style={{
@@ -833,6 +845,7 @@ function PropertiesPanel({ doc, collection, locales, onClose, onSaved }: {
     <>
     {/* Backdrop — click outside to close */}
     <div
+      data-testid="properties-panel-backdrop"
       style={{ position: "fixed", inset: 0, zIndex: 99 }}
       onClick={onClose}
     />
@@ -844,7 +857,7 @@ function PropertiesPanel({ doc, collection, locales, onClose, onSaved }: {
     }}>
       <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0.75rem 1rem", borderBottom: "1px solid var(--border)" }}>
         <span style={{ fontWeight: 600, fontSize: "0.875rem" }}>Properties</span>
-        <button type="button" onClick={onClose} style={{ background: "transparent", border: "none", cursor: "pointer", color: "var(--muted-foreground)", fontSize: "1.1rem", lineHeight: 1 }}>×</button>
+        <button data-testid="properties-panel-close" type="button" onClick={onClose} style={{ background: "transparent", border: "none", cursor: "pointer", color: "var(--muted-foreground)", fontSize: "1.1rem", lineHeight: 1 }}>×</button>
       </div>
 
       <div style={{ flex: 1, overflowY: "auto", padding: "1rem", display: "flex", flexDirection: "column", gap: "1.25rem" }}>
@@ -852,6 +865,7 @@ function PropertiesPanel({ doc, collection, locales, onClose, onSaved }: {
         <div>
           <p style={labelStyle}>ID</p>
           <p
+            data-testid="properties-id-copy"
             style={{ ...valueStyle, color: "var(--muted-foreground)", fontSize: "0.72rem", cursor: "pointer" }}
             title="Click to copy"
             onClick={() => { navigator.clipboard.writeText(doc.id); }}
@@ -863,6 +877,7 @@ function PropertiesPanel({ doc, collection, locales, onClose, onSaved }: {
           <p style={labelStyle}>Slug</p>
           <div style={{ display: "flex", gap: "0.5rem" }}>
             <input
+              data-testid="properties-slug-input"
               type="text"
               value={slug}
               onChange={e => { setSlug(e.target.value); setError(""); }}
@@ -877,6 +892,7 @@ function PropertiesPanel({ doc, collection, locales, onClose, onSaved }: {
             />
             {slugChanged && (
               <button
+                data-testid="properties-slug-save"
                 type="button"
                 onClick={saveSlug}
                 disabled={saving || !!slugError}
@@ -908,6 +924,7 @@ function PropertiesPanel({ doc, collection, locales, onClose, onSaved }: {
             if (!suggested || suggested === slug) return null;
             return (
               <button
+                data-testid="properties-slug-from-title"
                 type="button"
                 onClick={() => setSlug(suggested)}
                 style={{
@@ -942,6 +959,7 @@ function PropertiesPanel({ doc, collection, locales, onClose, onSaved }: {
             <p style={labelStyle}>Locale</p>
             <p style={{ fontSize: "0.65rem", color: "var(--muted-foreground)", margin: "0.15rem 0 0.4rem" }}>Change locale</p>
             <select
+              data-testid="properties-locale-select"
               value={docLocale}
               onChange={async (e) => {
                 const newLocale = e.target.value;
@@ -1456,6 +1474,7 @@ export function DocumentEditor({ collection, colConfig, blocksConfig = [], local
           {locales && locales.length > 1 && (
             <div style={{ position: "relative" }} ref={localeRef}>
               <button
+                data-testid="locale-selector-button"
                 type="button"
                 onClick={() => translations.length > 0 ? setLocaleOpen(o => !o) : undefined}
                 title={translations.length > 0 ? "Switch between translations" : locale ? `Document language: ${locale.toUpperCase()}` : "No locale set — use Properties to assign"}
@@ -1768,6 +1787,7 @@ export function DocumentEditor({ collection, colConfig, blocksConfig = [], local
           ))}
           {sourceDoc && (
             <button
+              data-testid="side-by-side-toggle"
               type="button"
               onClick={() => setSideBySide(!sideBySide)}
               title="Show source document side-by-side"
@@ -1791,6 +1811,7 @@ export function DocumentEditor({ collection, colConfig, blocksConfig = [], local
             const available = (locales ?? []).filter(l => !existingLocs.includes(l));
             return available.length > 0 ? (
               <button
+                data-testid="add-translation-button"
                 type="button"
                 onClick={() => setCreateTranslationOpen(true)}
                 style={{
@@ -1820,6 +1841,7 @@ export function DocumentEditor({ collection, colConfig, blocksConfig = [], local
             <div style={{ display: "flex", alignItems: "center", gap: 0, fontSize: "0.7rem", fontFamily: "monospace", borderBottom: "1px solid var(--border)", marginBottom: "0.5rem" }}>
               {siblings.length > 1 ? siblings.map(s => (
                 <button
+                  data-testid="sibling-locale-selector"
                   key={s.locale}
                   type="button"
                   onClick={() => setSbsLocale(s.locale)}
@@ -1860,6 +1882,7 @@ export function DocumentEditor({ collection, colConfig, blocksConfig = [], local
             <span>Created {formatDate(doc.createdAt)}</span>
             <span>Updated {formatDate(doc.updatedAt)}</span>
             <span
+              data-testid="document-id-copy"
               title="Click to copy document ID"
               onClick={() => { navigator.clipboard.writeText(doc.id); }}
               style={{ cursor: "pointer", opacity: 0.5 }}
@@ -1928,6 +1951,7 @@ export function DocumentEditor({ collection, colConfig, blocksConfig = [], local
                   </label>
                   {field.required && <span className="text-xs text-primary">*</span>}
                   <button
+                    data-testid="field-lock-button"
                     type="button"
                     title={isLocked ? "AI locked — click to unlock" : "Click to AI lock this field"}
                     onClick={() => {
@@ -1963,6 +1987,7 @@ export function DocumentEditor({ collection, colConfig, blocksConfig = [], local
                   </button>
                   {isReadTime && readTimeBodyField && (
                     <button
+                      data-testid="readtime-suggest"
                       type="button"
                       onClick={() => {
                         const body = doc.data[readTimeBodyField.name];
diff --git a/packages/cms-admin/src/components/editor/field-editor.tsx b/packages/cms-admin/src/components/editor/field-editor.tsx
index 2b883d30a..9a31096a2 100644
--- a/packages/cms-admin/src/components/editor/field-editor.tsx
+++ b/packages/cms-admin/src/components/editor/field-editor.tsx
@@ -125,6 +125,7 @@ function MultiRelationPicker({ collection, value, onChange, disabled, documentLo
     <div ref={ref} style={{ position: "relative" }}>
       {/* chips + open button */}
       <div
+        data-testid="relation-multi-picker-toggle"
         onClick={() => !disabled && setOpen((o) => !o)}
         style={{
           display: "flex", flexWrap: "wrap", gap: "0.4rem", alignItems: "center",
@@ -146,6 +147,7 @@ function MultiRelationPicker({ collection, value, onChange, disabled, documentLo
             {labelFor(slug)}
             {!disabled && (
               <button
+                data-testid="relation-remove-chip-button"
                 type="button"
                 onClick={(e) => { e.stopPropagation(); removeSlug(slug); }}
                 style={{ background: "none", border: "none", cursor: "pointer", padding: 0, lineHeight: 1, color: "var(--muted-foreground)" }}
@@ -170,6 +172,7 @@ function MultiRelationPicker({ collection, value, onChange, disabled, documentLo
         }}>
           <div style={{ padding: "0.5rem" }}>
             <input
+              data-testid="relation-multi-search-input"
               autoFocus
               type="text"
               value={query}
@@ -192,6 +195,7 @@ function MultiRelationPicker({ collection, value, onChange, disabled, documentLo
             )}
             {filtered.map((opt) => (
               <button
+                data-testid="relation-multi-option-button"
                 key={opt.slug}
                 type="button"
                 onClick={() => addSlug(opt.slug)}
@@ -242,6 +246,7 @@ function RelationPicker({ collection, value, onChange, disabled, documentLocale
   return (
     <div ref={ref} style={{ position: "relative", display: "inline-block", minWidth: "200px", maxWidth: "360px" }}>
       <button
+        data-testid="relation-single-picker-toggle"
         type="button"
         disabled={disabled}
         onClick={() => setOpen((o) => !o)}
@@ -268,6 +273,7 @@ function RelationPicker({ collection, value, onChange, disabled, documentLocale
         }}>
           <div style={{ padding: "0.5rem" }}>
             <input
+              data-testid="relation-single-search-input"
               autoFocus
               type="text"
               value={query}
@@ -289,6 +295,7 @@ function RelationPicker({ collection, value, onChange, disabled, documentLocale
             {/* Clear option */}
             {value && (
               <button
+                data-testid="relation-single-clear-button"
                 type="button"
                 onClick={() => { onChange(""); setOpen(false); setQuery(""); }}
                 style={{ width: "100%", textAlign: "left", padding: "0.5rem 1rem", fontSize: "0.8rem", color: "var(--muted-foreground)", background: "transparent", border: "none", cursor: "pointer" }}
@@ -298,6 +305,7 @@ function RelationPicker({ collection, value, onChange, disabled, documentLocale
             )}
             {filtered.map((opt) => (
               <button
+                data-testid="relation-single-option-button"
                 key={opt.slug}
                 type="button"
                 onClick={() => { onChange(opt.slug); setOpen(false); setQuery(""); }}
@@ -355,13 +363,13 @@ function SimpleStringArray({ values, onChange, locked }: { values: string[]; onC
               {confirmIdx === i ? (
                 <>
                   <span style={{ fontSize: "0.65rem", color: "var(--destructive)", fontWeight: 500, padding: "0 2px" }}>Remove?</span>
-                  <button type="button" onClick={() => { if (confirmTimer.current) clearTimeout(confirmTimer.current); setConfirmIdx(null); onChange(values.filter((_, j) => j !== i)); }}
+                  <button data-testid="string-array-delete-confirm-yes" type="button" onClick={() => { if (confirmTimer.current) clearTimeout(confirmTimer.current); setConfirmIdx(null); onChange(values.filter((_, j) => j !== i)); }}
                     style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "none", background: "var(--destructive)", color: "#fff", cursor: "pointer", lineHeight: 1 }}>Yes</button>
-                  <button type="button" onClick={() => { if (confirmTimer.current) clearTimeout(confirmTimer.current); setConfirmIdx(null); }}
+                  <button data-testid="string-array-delete-confirm-no" type="button" onClick={() => { if (confirmTimer.current) clearTimeout(confirmTimer.current); setConfirmIdx(null); }}
                     style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "1px solid var(--border)", background: "transparent", color: "var(--foreground)", cursor: "pointer", lineHeight: 1 }}>No</button>
                 </>
               ) : (
-                <button type="button" onClick={() => {
+                <button data-testid="string-array-delete-button" type="button" onClick={() => {
                   if (!item.trim()) { onChange(values.filter((_, j) => j !== i)); return; }
                   if (confirmTimer.current) clearTimeout(confirmTimer.current);
                   setConfirmIdx(i);
@@ -373,7 +381,7 @@ function SimpleStringArray({ values, onChange, locked }: { values: string[]; onC
         </div>
       ))}
       {!locked && (
-        <button type="button" onClick={() => onChange([...values, ""])}
+        <button data-testid="string-array-add-button" type="button" onClick={() => onChange([...values, ""])}
           style={{ alignSelf: "flex-start", background: "none", border: "1px dashed var(--border)", borderRadius: "5px", cursor: "pointer", color: "var(--muted-foreground)", fontSize: "0.75rem", padding: "0.25rem 0.75rem", marginTop: "0.1rem" }}
           className="hover:border-primary hover:text-primary transition-colors"
         >
@@ -437,6 +445,7 @@ export function FieldEditor({ field, value, onChange, locked, blocksConfig, docu
       return (
         <label data-testid={testId} className="flex items-center gap-3 cursor-pointer w-fit">
           <div
+            data-testid="boolean-field-toggle-div"
             onClick={() => !locked && onChange(!value)}
             className={cn(
               "w-10 h-5 rounded-full transition-colors relative cursor-pointer",
@@ -570,6 +579,7 @@ export function FieldEditor({ field, value, onChange, locked, blocksConfig, docu
           {!locked && (
             <div style={{ display: "flex", gap: "0.35rem" }}>
               <label
+                data-testid="image-field-upload-label"
                 title="Upload image"
                 style={{
                   display: "inline-flex", alignItems: "center", gap: "0.3rem",
@@ -580,11 +590,12 @@ export function FieldEditor({ field, value, onChange, locked, blocksConfig, docu
                 }}
                 className="hover:border-primary hover:text-primary transition-colors"
               >
-                <input ref={imgInputRef} type="file" accept="image/*" onChange={handleImageUpload} disabled={locked || imgUploading} style={{ display: "none" }} />
+                <input data-testid="image-field-file-input" ref={imgInputRef} type="file" accept="image/*" onChange={handleImageUpload} disabled={locked || imgUploading} style={{ display: "none" }} />
                 <Upload style={{ width: 12, height: 12 }} />
                 {imgUploading ? "..." : "Upload"}
               </label>
               <button
+                data-testid="image-field-browse-button"
                 type="button"
                 onClick={openMediaBrowser}
                 title="Browse Media"
@@ -646,6 +657,7 @@ export function FieldEditor({ field, value, onChange, locked, blocksConfig, docu
                     Media Library
                   </span>
                   <button
+                    data-testid="media-browser-close-button"
                     type="button"
                     onClick={() => setMediaBrowserOpen(false)}
                     style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", padding: "0.25rem" }}
@@ -656,6 +668,7 @@ export function FieldEditor({ field, value, onChange, locked, blocksConfig, docu
                 {/* Search */}
                 <div style={{ padding: "0.5rem 0.75rem", borderBottom: "1px solid var(--border)" }}>
                   <input
+                    data-testid="media-browser-search-field"
                     type="text"
                     value={mediaSearch}
                     onChange={(e) => setMediaSearch(e.target.value)}
@@ -689,6 +702,7 @@ export function FieldEditor({ field, value, onChange, locked, blocksConfig, docu
                     }}>
                       {mediaItems.filter((item) => !mediaSearch || item.name.toLowerCase().includes(mediaSearch.toLowerCase())).map((item) => (
                         <button
+                          data-testid="media-browser-item-button"
                           key={item.url}
                           type="button"
                           onClick={() => {
@@ -839,13 +853,13 @@ export function FieldEditor({ field, value, onChange, locked, blocksConfig, docu
                   {audioConfirm ? (
                     <>
                       <span style={{ fontSize: "0.65rem", color: "var(--destructive)", fontWeight: 500, padding: "0 2px" }}>Remove?</span>
-                      <button type="button" onClick={() => { if (audioConfirmTimer.current) clearTimeout(audioConfirmTimer.current); setAudioConfirm(false); onChange(""); }}
+                      <button data-testid="audio-field-delete-confirm-yes" type="button" onClick={() => { if (audioConfirmTimer.current) clearTimeout(audioConfirmTimer.current); setAudioConfirm(false); onChange(""); }}
                         style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "none", background: "var(--destructive)", color: "#fff", cursor: "pointer", lineHeight: 1 }}>Yes</button>
-                      <button type="button" onClick={() => { if (audioConfirmTimer.current) clearTimeout(audioConfirmTimer.current); setAudioConfirm(false); }}
+                      <button data-testid="audio-field-delete-confirm-no" type="button" onClick={() => { if (audioConfirmTimer.current) clearTimeout(audioConfirmTimer.current); setAudioConfirm(false); }}
                         style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "1px solid var(--border)", background: "transparent", color: "var(--foreground)", cursor: "pointer", lineHeight: 1 }}>No</button>
                     </>
                   ) : (
-                    <button type="button" onClick={() => { setAudioConfirm(true); audioConfirmTimer.current = setTimeout(() => setAudioConfirm(false), 3000); }}
+                    <button data-testid="audio-field-delete-button" type="button" onClick={() => { setAudioConfirm(true); audioConfirmTimer.current = setTimeout(() => setAudioConfirm(false), 3000); }}
                       style={{ width: "18px", height: "18px", borderRadius: "50%", border: "none", background: "transparent", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--muted-foreground)", fontSize: "0.9rem", lineHeight: 1 }} title="Remove audio">×</button>
                   )}
                 </div>
@@ -865,6 +879,7 @@ export function FieldEditor({ field, value, onChange, locked, blocksConfig, docu
           {!locked && (
             <div style={{ display: "flex", gap: "0.35rem" }}>
               <label
+                data-testid="audio-field-upload-label"
                 title="Upload audio"
                 style={{
                   display: "inline-flex", alignItems: "center", gap: "0.3rem",
@@ -875,11 +890,12 @@ export function FieldEditor({ field, value, onChange, locked, blocksConfig, docu
                 }}
                 className="hover:border-primary hover:text-primary transition-colors"
               >
-                <input ref={audioInputRef} type="file" accept="audio/*" onChange={handleAudioUpload} disabled={locked || audioUploading} style={{ display: "none" }} />
+                <input data-testid="audio-field-upload-input" ref={audioInputRef} type="file" accept="audio/*" onChange={handleAudioUpload} disabled={locked || audioUploading} style={{ display: "none" }} />
                 <Upload style={{ width: 12, height: 12 }} />
                 {audioUploading ? "..." : "Upload"}
               </label>
               <button
+                data-testid="audio-field-browse-button"
                 type="button"
                 onClick={openAudioBrowser}
                 title="Browse Media"
@@ -901,25 +917,26 @@ export function FieldEditor({ field, value, onChange, locked, blocksConfig, docu
           {/* Media browser modal — same as image field */}
           {audioBrowserOpen && (
             <div
+              data-testid="audio-browser-modal"
               style={{ position: "fixed", inset: 0, zIndex: 100, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(0,0,0,0.5)" }}
               onClick={(e) => { if (e.target === e.currentTarget) setAudioBrowserOpen(false); }}
             >
               <div style={{ background: "var(--popover)", border: "1px solid var(--border)", borderRadius: "12px", boxShadow: "0 8px 40px rgba(0,0,0,0.4)", width: "min(640px, 90vw)", maxHeight: "70vh", display: "flex", flexDirection: "column", overflow: "hidden" }}>
                 <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0.75rem 1rem", borderBottom: "1px solid var(--border)" }}>
                   <span style={{ fontWeight: 500, fontSize: "0.9rem" }}>Media Library</span>
-                  <button type="button" onClick={() => setAudioBrowserOpen(false)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", padding: "0.25rem" }}>
+                  <button data-testid="audio-browser-close-button" type="button" onClick={() => setAudioBrowserOpen(false)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", padding: "0.25rem" }}>
                     <X style={{ width: "16px", height: "16px" }} />
                   </button>
                 </div>
                 <div style={{ padding: "0.5rem 0.75rem", borderBottom: "1px solid var(--border)" }}>
-                  <input type="text" value={audioSearch} onChange={(e) => setAudioSearch(e.target.value)} placeholder="Search media…" autoFocus
+                  <input data-testid="audio-browser-search-field" type="text" value={audioSearch} onChange={(e) => setAudioSearch(e.target.value)} placeholder="Search media…" autoFocus
                     style={{ width: "100%", padding: "0.35rem 0.5rem", borderRadius: "6px", border: "1px solid var(--border)", background: "color-mix(in srgb, var(--input) 30%, var(--background))", color: "var(--foreground)", fontSize: "0.8rem", outline: "none" }} />
                 </div>
                 <div style={{ overflowY: "auto", padding: "0.75rem" }}>
                   {audioLoading && <div style={{ padding: "2rem", textAlign: "center", fontSize: "0.85rem", color: "var(--muted-foreground)" }}>Loading media...</div>}
                   {!audioLoading && audioItems.length === 0 && <div style={{ padding: "2rem", textAlign: "center", fontSize: "0.85rem", color: "var(--muted-foreground)" }}>No media found</div>}
                   {!audioLoading && audioItems.filter((item) => !audioSearch || item.name.toLowerCase().includes(audioSearch.toLowerCase())).map((item) => (
-                    <button key={item.url} type="button" onClick={() => {
+                    <button data-testid="audio-browser-item-button" key={item.url} type="button" onClick={() => {
                       let storedUrl = item.url;
                       try { storedUrl = new URL(item.url).pathname; } catch {}
                       onChange(storedUrl);
@@ -1011,11 +1028,12 @@ export function FieldEditor({ field, value, onChange, locked, blocksConfig, docu
                 }}
                 className="hover:border-primary hover:text-primary transition-colors"
               >
-                <input ref={intInputRef} type="file" accept=".html,.htm,.zip" onChange={handleIntUpload} disabled={locked || intUploading} style={{ display: "none" }} />
+                <input data-testid="int-field-file-input" ref={intInputRef} type="file" accept=".html,.htm,.zip" onChange={handleIntUpload} disabled={locked || intUploading} style={{ display: "none" }} />
                 <Upload style={{ width: 12, height: 12 }} />
                 {intUploading ? "..." : "Upload"}
               </label>
               <button
+                data-testid="int-field-browse-button"
                 type="button"
                 onClick={openIntBrowser}
                 title="Browse Interactives"
@@ -1037,25 +1055,26 @@ export function FieldEditor({ field, value, onChange, locked, blocksConfig, docu
           {/* Interactive browser modal */}
           {intBrowserOpen && (
             <div
+              data-testid="int-browser-overlay"
               style={{ position: "fixed", inset: 0, zIndex: 100, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(0,0,0,0.5)" }}
               onClick={(e) => { if (e.target === e.currentTarget) setIntBrowserOpen(false); }}
             >
               <div style={{ background: "var(--popover)", border: "1px solid var(--border)", borderRadius: "12px", boxShadow: "0 8px 40px rgba(0,0,0,0.4)", width: "min(480px, 90vw)", maxHeight: "70vh", display: "flex", flexDirection: "column", overflow: "hidden" }}>
                 <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0.75rem 1rem", borderBottom: "1px solid var(--border)" }}>
                   <span style={{ fontWeight: 500, fontSize: "0.9rem" }}>Interactives</span>
-                  <button type="button" onClick={() => setIntBrowserOpen(false)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", padding: "0.25rem" }}>
+                  <button data-testid="int-browser-close-button" type="button" onClick={() => setIntBrowserOpen(false)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", padding: "0.25rem" }}>
                     <X style={{ width: "16px", height: "16px" }} />
                   </button>
                 </div>
                 <div style={{ padding: "0.5rem 0.75rem", borderBottom: "1px solid var(--border)" }}>
-                  <input type="text" value={intSearch} onChange={(e) => setIntSearch(e.target.value)} placeholder="Search interactives…" autoFocus
+                  <input data-testid="int-browser-search-field" type="text" value={intSearch} onChange={(e) => setIntSearch(e.target.value)} placeholder="Search interactives…" autoFocus
                     style={{ width: "100%", padding: "0.35rem 0.5rem", borderRadius: "6px", border: "1px solid var(--border)", background: "color-mix(in srgb, var(--input) 30%, var(--background))", color: "var(--foreground)", fontSize: "0.8rem", outline: "none" }} />
                 </div>
                 <div style={{ overflowY: "auto", padding: "0.5rem" }}>
                   {intLoading && <div style={{ padding: "2rem", textAlign: "center", fontSize: "0.85rem", color: "var(--muted-foreground)" }}>Loading...</div>}
                   {!intLoading && intItems.length === 0 && <div style={{ padding: "2rem", textAlign: "center", fontSize: "0.85rem", color: "var(--muted-foreground)" }}>No interactives found</div>}
                   {!intLoading && intItems.filter((i) => !intSearch || i.title.toLowerCase().includes(intSearch.toLowerCase()) || i.id.toLowerCase().includes(intSearch.toLowerCase())).map((item) => (
-                    <button key={item.id} type="button" onClick={() => { onChange(item.id); setIntBrowserOpen(false); }}
+                    <button data-testid="int-browser-item-button" key={item.id} type="button" onClick={() => { onChange(item.id); setIntBrowserOpen(false); }}
                       style={{ width: "100%", textAlign: "left", padding: "0.5rem 0.75rem", fontSize: "0.8rem", background: item.id === strVal ? "var(--accent)" : "transparent", border: "none", cursor: "pointer", display: "flex", alignItems: "center", gap: "0.5rem", borderRadius: "4px", marginBottom: "2px" }} className="hover:bg-accent">
                       <span style={{ fontSize: "1rem", color: "#F7BB2E" }}>⚡</span>
                       <span style={{ flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{item.title}</span>
@@ -1142,11 +1161,12 @@ export function FieldEditor({ field, value, onChange, locked, blocksConfig, docu
                 }}
                 className="hover:border-primary hover:text-primary transition-colors"
               >
-                <input ref={fileInputRef} type="file" onChange={handleFileUpload} disabled={locked || fileUploading} style={{ display: "none" }} />
+                <input data-testid="file-field-upload-input" ref={fileInputRef} type="file" onChange={handleFileUpload} disabled={locked || fileUploading} style={{ display: "none" }} />
                 <Upload style={{ width: 12, height: 12 }} />
                 {fileUploading ? "..." : "Upload"}
               </label>
               <button
+                data-testid="file-field-browse-button"
                 type="button"
                 onClick={openFileBrowser}
                 title="Browse Media"
@@ -1168,25 +1188,26 @@ export function FieldEditor({ field, value, onChange, locked, blocksConfig, docu
           {/* Media browser modal */}
           {fileBrowserOpen && (
             <div
+              data-testid="file-browser-modal"
               style={{ position: "fixed", inset: 0, zIndex: 100, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(0,0,0,0.5)" }}
               onClick={(e) => { if (e.target === e.currentTarget) setFileBrowserOpen(false); }}
             >
               <div style={{ background: "var(--popover)", border: "1px solid var(--border)", borderRadius: "12px", boxShadow: "0 8px 40px rgba(0,0,0,0.4)", width: "min(640px, 90vw)", maxHeight: "70vh", display: "flex", flexDirection: "column", overflow: "hidden" }}>
                 <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0.75rem 1rem", borderBottom: "1px solid var(--border)" }}>
                   <span style={{ fontWeight: 500, fontSize: "0.9rem" }}>Media Library</span>
-                  <button type="button" onClick={() => setFileBrowserOpen(false)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", padding: "0.25rem" }}>
+                  <button data-testid="file-browser-close-button" type="button" onClick={() => setFileBrowserOpen(false)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", padding: "0.25rem" }}>
                     <X style={{ width: "16px", height: "16px" }} />
                   </button>
                 </div>
                 <div style={{ padding: "0.5rem 0.75rem", borderBottom: "1px solid var(--border)" }}>
-                  <input type="text" value={fileSearch} onChange={(e) => setFileSearch(e.target.value)} placeholder="Search media…" autoFocus
+                  <input data-testid="file-browser-search-input" type="text" value={fileSearch} onChange={(e) => setFileSearch(e.target.value)} placeholder="Search media…" autoFocus
                     style={{ width: "100%", padding: "0.35rem 0.5rem", borderRadius: "6px", border: "1px solid var(--border)", background: "color-mix(in srgb, var(--input) 30%, var(--background))", color: "var(--foreground)", fontSize: "0.8rem", outline: "none" }} />
                 </div>
                 <div style={{ overflowY: "auto", padding: "0.75rem" }}>
                   {fileLoading && <div style={{ padding: "2rem", textAlign: "center", fontSize: "0.85rem", color: "var(--muted-foreground)" }}>Loading media...</div>}
                   {!fileLoading && fileItems.length === 0 && <div style={{ padding: "2rem", textAlign: "center", fontSize: "0.85rem", color: "var(--muted-foreground)" }}>No media found</div>}
                   {!fileLoading && fileItems.filter((item) => !fileSearch || item.name.toLowerCase().includes(fileSearch.toLowerCase())).map((item) => (
-                    <button key={item.url} type="button" onClick={() => {
+                    <button data-testid={`file-browser-item-${item.url.replace(/[^a-z0-9]/g, '-')}`} key={item.url} type="button" onClick={() => {
                       let storedUrl = item.url;
                       try { storedUrl = new URL(item.url).pathname; } catch {}
                       onChange(storedUrl);
diff --git a/packages/cms-admin/src/components/editor/htmldoc-editor.tsx b/packages/cms-admin/src/components/editor/htmldoc-editor.tsx
index a02d95827..bee3d190f 100644
--- a/packages/cms-admin/src/components/editor/htmldoc-editor.tsx
+++ b/packages/cms-admin/src/components/editor/htmldoc-editor.tsx
@@ -83,6 +83,7 @@ function EmptyState({ onChange, locked }: { onChange: (html: string) => void; lo
   return (
     <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
       <div
+        data-testid="htmldoc-upload-area"
         onDragOver={(e) => { e.preventDefault(); setDragging(true); }}
         onDragLeave={() => setDragging(false)}
         onDrop={handleDrop}
@@ -106,6 +107,7 @@ function EmptyState({ onChange, locked }: { onChange: (html: string) => void; lo
         <Upload style={{ width: "24px", height: "24px", opacity: 0.5 }} />
         <span>Drop an HTML file here or click to upload</span>
         <input
+          data-testid="htmldoc-file-input"
           ref={fileRef}
           type="file"
           accept=".html,.htm"
@@ -123,6 +125,7 @@ function EmptyState({ onChange, locked }: { onChange: (html: string) => void; lo
       </div>
 
       <Textarea
+        data-testid="htmldoc-paste-textarea"
         value={pasteValue}
         onChange={(e) => setPasteValue(e.target.value)}
         placeholder="Paste HTML here..."
@@ -134,6 +137,7 @@ function EmptyState({ onChange, locked }: { onChange: (html: string) => void; lo
 
       {pasteValue.trim() && (
         <button
+          data-testid="htmldoc-use-paste-button"
           type="button"
           onClick={() => onChange(pasteValue)}
           style={{
@@ -318,7 +322,7 @@ export function HtmlDocEditor({ field, value, onChange, locked }: Props) {
       <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
         <div style={TAB_CONTAINER_STYLE}>
           {(["preview", "code"] as EditMode[]).map((m) => (
-            <button key={m} type="button" style={tabStyle(mode === m)} onClick={() => setMode(m)}>
+            <button data-testid={`htmldoc-mode-${m}`} key={m} type="button" style={tabStyle(mode === m)} onClick={() => setMode(m)}>
               {m === "preview" && <Eye style={ICON_SIZE} />}
               {m === "code" && <Code2 style={ICON_SIZE} />}
               {m === "preview" ? "Preview" : "Code"}
@@ -356,6 +360,7 @@ export function HtmlDocEditor({ field, value, onChange, locked }: Props) {
         <div style={TAB_CONTAINER_STYLE}>
           {(["preview", "visual", "ai", "code"] as EditMode[]).map((m) => (
             <button
+              data-testid={`htmldoc-tab-${m}`}
               key={m}
               type="button"
               style={tabStyle(mode === m)}
@@ -389,6 +394,7 @@ export function HtmlDocEditor({ field, value, onChange, locked }: Props) {
             {dirty && (
               <>
                 <button
+                  data-testid="htmldoc-visual-reset-button"
                   type="button"
                   onClick={handleVisualReset}
                   style={{
@@ -402,6 +408,7 @@ export function HtmlDocEditor({ field, value, onChange, locked }: Props) {
                   Reset
                 </button>
                 <button
+                  data-testid="htmldoc-visual-save-button"
                   type="button"
                   onClick={handleVisualSave}
                   disabled={saving}
@@ -423,6 +430,7 @@ export function HtmlDocEditor({ field, value, onChange, locked }: Props) {
 
         {/* Fullscreen toggle (all modes) */}
         <button
+          data-testid="htmldoc-fullscreen-toggle"
           type="button"
           onClick={() => setFullscreen((f) => !f)}
           style={{
@@ -575,6 +583,7 @@ export function HtmlDocEditor({ field, value, onChange, locked }: Props) {
                   </div>
                   <div style={{ display: "flex", gap: "0.4rem" }}>
                     <button
+                      data-testid="htmldoc-ai-apply-button"
                       type="button"
                       onClick={handleAiApply}
                       style={{
@@ -589,6 +598,7 @@ export function HtmlDocEditor({ field, value, onChange, locked }: Props) {
                       Apply
                     </button>
                     <button
+                      data-testid="htmldoc-ai-revert-button"
                       type="button"
                       onClick={handleAiRevert}
                       style={{
@@ -617,6 +627,7 @@ export function HtmlDocEditor({ field, value, onChange, locked }: Props) {
               }}
             >
               <textarea
+                data-testid="htmldoc-ai-instruction-textarea"
                 value={aiInstruction}
                 onChange={(e) => setAiInstruction(e.target.value)}
                 placeholder="e.g. Make the hero section use a dark blue gradient..."
@@ -641,6 +652,7 @@ export function HtmlDocEditor({ field, value, onChange, locked }: Props) {
                 }}
               />
               <button
+                data-testid="htmldoc-ai-send-button"
                 type="button"
                 onClick={handleAiSend}
                 disabled={!aiInstruction.trim() || aiLoading || locked}
@@ -665,6 +677,7 @@ export function HtmlDocEditor({ field, value, onChange, locked }: Props) {
       {/* ── Code mode ───────────────────────────────────────────────── */}
       {mode === "code" && (
         <Textarea
+          data-testid="htmldoc-code-textarea"
           value={codeValue}
           onChange={(e) => setCodeValue(e.target.value)}
           onBlur={handleCodeBlur}
diff --git a/packages/cms-admin/src/components/editor/image-gallery-editor.tsx b/packages/cms-admin/src/components/editor/image-gallery-editor.tsx
index b7f1e04a2..8ddda13dd 100644
--- a/packages/cms-admin/src/components/editor/image-gallery-editor.tsx
+++ b/packages/cms-admin/src/components/editor/image-gallery-editor.tsx
@@ -93,6 +93,7 @@ export function ImageGalleryEditor({ value: rawValue = [], onChange, disabled }:
 
       {/* Upload zone */}
       <div
+        data-testid="gallery-upload-zone"
         onClick={() => !disabled && inputRef.current?.click()}
         onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
         onDragLeave={() => setDragOver(false)}
@@ -120,6 +121,7 @@ export function ImageGalleryEditor({ value: rawValue = [], onChange, disabled }:
         </p>
       </div>
       <input
+        data-testid="gallery-file-input"
         ref={inputRef}
         type="file"
         accept="image/*"
@@ -136,6 +138,7 @@ export function ImageGalleryEditor({ value: rawValue = [], onChange, disabled }:
       {!disabled && (
         <div style={{ display: "flex", gap: "0.35rem" }}>
           <button
+            data-testid="gallery-browse-media"
             type="button"
             onClick={() => setMediaBrowserOpen(true)}
             style={actionBtnStyle}
@@ -145,6 +148,7 @@ export function ImageGalleryEditor({ value: rawValue = [], onChange, disabled }:
             Browse Media
           </button>
           <button
+            data-testid="gallery-add-url"
             type="button"
             onClick={() => setShowUrlInput(!showUrlInput)}
             style={actionBtnStyle}
@@ -160,6 +164,7 @@ export function ImageGalleryEditor({ value: rawValue = [], onChange, disabled }:
       {showUrlInput && (
         <div style={{ display: "flex", gap: "0.35rem" }}>
           <input
+            data-testid="gallery-url-input"
             type="url"
             value={urlInputValue}
             onChange={(e) => setUrlInputValue(e.target.value)}
@@ -179,6 +184,7 @@ export function ImageGalleryEditor({ value: rawValue = [], onChange, disabled }:
             }}
           />
           <button
+            data-testid="gallery-url-add"
             type="button"
             onClick={() => {
               if (urlInputValue.trim()) {
@@ -198,6 +204,7 @@ export function ImageGalleryEditor({ value: rawValue = [], onChange, disabled }:
       {/* Media browser modal */}
       {mediaBrowserOpen && (
         <div
+          data-testid="gallery-media-browser-backdrop"
           style={{ position: "fixed", inset: 0, zIndex: 100, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(0,0,0,0.5)" }}
           onClick={(e) => { if (e.target === e.currentTarget) setMediaBrowserOpen(false); }}
         >
@@ -211,12 +218,12 @@ export function ImageGalleryEditor({ value: rawValue = [], onChange, disabled }:
                 <ImageIcon style={{ width: 16, height: 16, display: "inline", verticalAlign: "text-bottom", marginRight: "0.4rem" }} />
                 Media Library
               </span>
-              <button type="button" onClick={() => setMediaBrowserOpen(false)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", padding: "0.25rem" }}>
+              <button data-testid="media-browser-close" type="button" onClick={() => setMediaBrowserOpen(false)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", padding: "0.25rem" }}>
                 <X style={{ width: 16, height: 16 }} />
               </button>
             </div>
             <div style={{ padding: "0.5rem 0.75rem", borderBottom: "1px solid var(--border)" }}>
-              <input type="text" value={mediaSearch} onChange={(e) => setMediaSearch(e.target.value)} placeholder="Search images…" autoFocus
+              <input data-testid="media-search-input" type="text" value={mediaSearch} onChange={(e) => setMediaSearch(e.target.value)} placeholder="Search images…" autoFocus
                 style={{ width: "100%", padding: "0.35rem 0.5rem", borderRadius: "6px", border: "1px solid var(--border)", background: "color-mix(in srgb, var(--input) 30%, var(--background))", color: "var(--foreground)", fontSize: "0.8rem", outline: "none" }} />
             </div>
             <div style={{ overflowY: "auto", padding: "0.75rem" }}>
@@ -225,7 +232,7 @@ export function ImageGalleryEditor({ value: rawValue = [], onChange, disabled }:
               {!mediaLoading && mediaItems.length > 0 && (
                 <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(110px, 1fr))", gap: "0.5rem" }}>
                   {mediaItems.filter((item) => !mediaSearch || item.name.toLowerCase().includes(mediaSearch.toLowerCase())).map((item) => (
-                    <button key={item.url} type="button" onClick={() => {
+                    <button data-testid={`media-item-${item.name}`} key={item.url} type="button" onClick={() => {
                       let storedUrl = item.url;
                       try { storedUrl = new URL(item.url).pathname; } catch { /* already relative */ }
                       onChange([...value, { url: storedUrl, alt: item.name.replace(/\.[^.]+$/, "") }]);
@@ -261,6 +268,7 @@ export function ImageGalleryEditor({ value: rawValue = [], onChange, disabled }:
             >
               {/* Thumbnail */}
               <div
+                data-testid={`gallery-img-thumbnail-${idx}`}
                 style={{ aspectRatio: "16/9", overflow: "hidden", cursor: disabled ? "default" : "pointer" }}
                 onClick={() => !disabled && setEditingUrlIdx(editingUrlIdx === idx ? null : idx)}
                 title="Click to edit URL"
@@ -276,6 +284,7 @@ export function ImageGalleryEditor({ value: rawValue = [], onChange, disabled }:
               {/* URL editor (shown when thumbnail clicked) */}
               {editingUrlIdx === idx && (
                 <input
+                  data-testid={`gallery-img-url-edit-${idx}`}
                   value={img.url}
                   onChange={(e) => updateUrl(idx, e.target.value)}
                   onKeyDown={(e) => { if (e.key === "Enter" || e.key === "Escape") setEditingUrlIdx(null); }}
@@ -296,6 +305,7 @@ export function ImageGalleryEditor({ value: rawValue = [], onChange, disabled }:
 
               {/* Alt text */}
               <input
+                data-testid={`gallery-img-alt-${idx}`}
                 value={img.alt}
                 onChange={(e) => updateAlt(idx, e.target.value)}
                 placeholder="Alt text…"
@@ -319,6 +329,7 @@ export function ImageGalleryEditor({ value: rawValue = [], onChange, disabled }:
               }}>
                 {idx > 0 && (
                   <button
+                    data-testid={`gallery-img-move-left-${idx}`}
                     type="button"
                     title="Move left"
                     onClick={() => moveImage(idx, idx - 1)}
@@ -327,6 +338,7 @@ export function ImageGalleryEditor({ value: rawValue = [], onChange, disabled }:
                 )}
                 {idx < value.length - 1 && (
                   <button
+                    data-testid={`gallery-img-move-right-${idx}`}
                     type="button"
                     title="Move right"
                     onClick={() => moveImage(idx, idx + 1)}
@@ -336,13 +348,13 @@ export function ImageGalleryEditor({ value: rawValue = [], onChange, disabled }:
                 {confirmRemoveIdx === idx ? (
                   <>
                     <span style={{ fontSize: "0.6rem", color: "var(--destructive)", fontWeight: 500, padding: "0 1px" }}>Remove?</span>
-                    <button type="button" onClick={() => { if (confirmTimer.current) clearTimeout(confirmTimer.current); setConfirmRemoveIdx(null); removeImage(idx); }}
+                    <button data-testid={`gallery-img-confirm-yes-${idx}`} type="button" onClick={() => { if (confirmTimer.current) clearTimeout(confirmTimer.current); setConfirmRemoveIdx(null); removeImage(idx); }}
                       style={{ ...iconBtn, fontSize: "0.55rem", padding: "0 4px", width: "auto", background: "var(--destructive)", color: "#fff", borderRadius: "3px" }}>Yes</button>
-                    <button type="button" onClick={() => { if (confirmTimer.current) clearTimeout(confirmTimer.current); setConfirmRemoveIdx(null); }}
+                    <button data-testid={`gallery-img-confirm-no-${idx}`} type="button" onClick={() => { if (confirmTimer.current) clearTimeout(confirmTimer.current); setConfirmRemoveIdx(null); }}
                       style={{ ...iconBtn, fontSize: "0.55rem", padding: "0 4px", width: "auto", border: "1px solid var(--border)", borderRadius: "3px" }}>No</button>
                   </>
                 ) : (
-                  <button type="button" title="Remove" onClick={() => { if (confirmTimer.current) clearTimeout(confirmTimer.current); setConfirmRemoveIdx(idx); confirmTimer.current = setTimeout(() => setConfirmRemoveIdx(null), 3000); }}
+                  <button data-testid={`gallery-img-remove-${idx}`} type="button" title="Remove" onClick={() => { if (confirmTimer.current) clearTimeout(confirmTimer.current); setConfirmRemoveIdx(idx); confirmTimer.current = setTimeout(() => setConfirmRemoveIdx(null), 3000); }}
                     style={{ ...iconBtn, color: "var(--destructive)", fontSize: "0.75rem", fontWeight: 700 }}>×</button>
                 )}
               </div>
diff --git a/packages/cms-admin/src/components/editor/interactive-ai-panel.tsx b/packages/cms-admin/src/components/editor/interactive-ai-panel.tsx
index 1d08d319d..a77d010eb 100644
--- a/packages/cms-admin/src/components/editor/interactive-ai-panel.tsx
+++ b/packages/cms-admin/src/components/editor/interactive-ai-panel.tsx
@@ -206,6 +206,7 @@ CRITICAL: Dollar signs in JavaScript strings MUST be preserved literally. Write
             <div style={{ display: "flex", flexDirection: "column", gap: "0.375rem", maxWidth: "260px", margin: "0 auto" }}>
               {["Add a smooth fade-in animation", "Make it responsive for mobile", "Change the color scheme to dark blue", "Add a hover tooltip on data points"].map((s) => (
                 <button
+                  data-testid={`interactive-ai-suggestion-${s.toLowerCase().replace(/\s+/g, '-')}`}
                   key={s}
                   onClick={() => { setInput(s); textareaRef.current?.focus(); }}
                   style={{
@@ -256,6 +257,7 @@ CRITICAL: Dollar signs in JavaScript strings MUST be preserved literally. Write
                   )}
                   <div style={{ display: "flex", gap: "0.375rem", justifyContent: "flex-end" }}>
                     <button
+                      data-testid={`interactive-ai-copy-message-${i}`}
                       onClick={() => copyMessage(msg.content, i)}
                       style={{ display: "inline-flex", alignItems: "center", gap: "0.25rem", padding: "0.25rem 0.5rem", borderRadius: "5px", border: "1px solid var(--border)", background: "transparent", color: "var(--muted-foreground)", fontSize: "0.65rem", cursor: "pointer" }}
                     >
@@ -263,6 +265,7 @@ CRITICAL: Dollar signs in JavaScript strings MUST be preserved literally. Write
                     </button>
                     {html && (
                       <button
+                        data-testid={`interactive-ai-apply-message-${i}`}
                         onClick={() => applyHtml(msg.content)}
                         style={{ display: "inline-flex", alignItems: "center", gap: "0.375rem", padding: "0.375rem 0.75rem", borderRadius: "6px", border: "none", background: "var(--primary)", color: "var(--primary-foreground)", fontSize: "0.75rem", fontWeight: 600, cursor: "pointer" }}
                       >
@@ -280,6 +283,7 @@ CRITICAL: Dollar signs in JavaScript strings MUST be preserved literally. Write
       {/* Input */}
       <div style={{ padding: "0.625rem 0.75rem 2rem", borderTop: "1px solid var(--border)", display: "flex", gap: "0.5rem", alignItems: "flex-end" }}>
         <textarea
+          data-testid="interactive-ai-input"
           ref={textareaRef}
           value={input}
           onChange={(e) => setInput(e.target.value)}
@@ -296,6 +300,7 @@ CRITICAL: Dollar signs in JavaScript strings MUST be preserved literally. Write
           onBlur={(e) => { e.target.style.borderColor = "var(--border)"; }}
         />
         <Button
+          data-testid="interactive-ai-send-button"
           size="sm"
           onClick={send}
           disabled={!input.trim() || streaming}
diff --git a/packages/cms-admin/src/components/editor/map-editor.tsx b/packages/cms-admin/src/components/editor/map-editor.tsx
index 61b6df9f9..a3cbbf19f 100644
--- a/packages/cms-admin/src/components/editor/map-editor.tsx
+++ b/packages/cms-admin/src/components/editor/map-editor.tsx
@@ -116,6 +116,7 @@ export function MapEditor({ value, onChange, defaultCenter, defaultZoom, locked
         <div style={{ position: "relative", flex: 1 }}>
           <MapPin style={{ position: "absolute", left: 8, top: "50%", transform: "translateY(-50%)", width: 14, height: 14, color: "var(--muted-foreground)" }} />
           <input
+            data-testid="map-editor-address-input"
             type="text"
             value={address}
             onChange={(e) => setAddress(e.target.value)}
@@ -126,6 +127,7 @@ export function MapEditor({ value, onChange, defaultCenter, defaultZoom, locked
           />
         </div>
         <button
+          data-testid="map-editor-search-button"
           type="button"
           onClick={() => handleSearch(address)}
           disabled={searching || !address.trim() || locked}
diff --git a/packages/cms-admin/src/components/editor/map-leaflet.tsx b/packages/cms-admin/src/components/editor/map-leaflet.tsx
index 800d82fc8..30022d5cc 100644
--- a/packages/cms-admin/src/components/editor/map-leaflet.tsx
+++ b/packages/cms-admin/src/components/editor/map-leaflet.tsx
@@ -102,5 +102,5 @@ export default function MapLeaflet({ lat, lng, zoom, hasMarker, onMarkerDrag, on
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [lat, lng, zoom, hasMarker]);
 
-  return <div ref={containerRef} style={{ width: "100%", height: "100%" }} />;
+  return <div data-testid="map-leaflet-container" ref={containerRef} style={{ width: "100%", height: "100%" }} />;
 }
diff --git a/packages/cms-admin/src/components/editor/rich-text-editor.tsx b/packages/cms-admin/src/components/editor/rich-text-editor.tsx
index 4858adbfe..53e4a836f 100644
--- a/packages/cms-admin/src/components/editor/rich-text-editor.tsx
+++ b/packages/cms-admin/src/components/editor/rich-text-editor.tsx
@@ -85,6 +85,7 @@ function CtxBtn({ title, active, danger, onClick, children }: {
 }) {
   return (
     <button
+      data-testid="ctx-btn"
       type="button"
       title={title}
       onMouseDown={(e) => { e.preventDefault(); onClick(); }}
@@ -257,13 +258,13 @@ function ImageNodeView({ node, updateAttributes, deleteNode, selected }: NodeVie
             {del.confirming ? (
               <>
                 <span style={{ fontSize: "0.65rem", color: "var(--destructive)", fontWeight: 500, padding: "0 2px" }}>Remove?</span>
-                <button type="button" onMouseDown={(e) => { e.preventDefault(); del.confirm(); }}
+                <button data-testid="image-delete-confirm" type="button" onMouseDown={(e) => { e.preventDefault(); del.confirm(); }}
                   style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "none", background: "var(--destructive)", color: "#fff", cursor: "pointer", lineHeight: 1 }}>Yes</button>
-                <button type="button" onMouseDown={(e) => { e.preventDefault(); del.cancel(); }}
+                <button data-testid="image-delete-cancel" type="button" onMouseDown={(e) => { e.preventDefault(); del.cancel(); }}
                   style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "1px solid var(--border)", background: "transparent", color: "var(--foreground)", cursor: "pointer", lineHeight: 1 }}>No</button>
               </>
             ) : (
-              <button type="button" onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); del.request(); }}
+              <button data-testid="image-delete-trigger" type="button" onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); del.request(); }}
                 style={{ width: "18px", height: "18px", borderRadius: "50%", border: "none", background: "transparent", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--muted-foreground)", fontSize: "0.9rem", lineHeight: 1, flexShrink: 0 }}
                 title="Remove image">×</button>
             )}
@@ -271,6 +272,7 @@ function ImageNodeView({ node, updateAttributes, deleteNode, selected }: NodeVie
         )}
         {selected && (
           <div
+            data-testid="image-resize-handle"
             title="Drag to resize"
             onMouseDown={handleResizeMouseDown}
             style={{
@@ -398,11 +400,12 @@ function BlockMarkerView({ node, deleteNode, editor, getPos }: NodeViewProps) {
         {del.confirming ? (
           <>
             <span style={{ fontSize: "0.75rem", color: "var(--destructive)", fontWeight: 500 }}>Remove block?</span>
-            <button type="button" onMouseDown={(e) => { e.preventDefault(); del.confirm(); }} style={{ ...btnSm, background: "var(--destructive)", color: "#fff", border: "none" }}>Confirm</button>
-            <button type="button" onMouseDown={(e) => { e.preventDefault(); del.cancel(); }} style={btnSm}>Cancel</button>
+            <button data-testid="block-delete-confirm" type="button" onMouseDown={(e) => { e.preventDefault(); del.confirm(); }} style={{ ...btnSm, background: "var(--destructive)", color: "#fff", border: "none" }}>Confirm</button>
+            <button data-testid="block-delete-cancel" type="button" onMouseDown={(e) => { e.preventDefault(); del.cancel(); }} style={btnSm}>Cancel</button>
           </>
         ) : (
           <button
+            data-testid="block-delete-trigger"
             type="button"
             onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); del.request(); }}
             style={{
@@ -635,6 +638,7 @@ function VideoNodeView({ node, updateAttributes, deleteNode, selected }: NodeVie
         {/* Resize handle — absolute inside container (no overflow:hidden here), above footer */}
         {selected && !editing && (
           <div
+            data-testid="video-resize-handle"
             title="Træk for at ændre størrelse"
             onMouseDown={handleResizeMouseDown}
             style={{
@@ -657,13 +661,13 @@ function VideoNodeView({ node, updateAttributes, deleteNode, selected }: NodeVie
         <div style={{ display: "flex", alignItems: "center", gap: "2px", padding: "0.2rem 0.375rem", borderTop: "1px solid var(--border)", backgroundColor: "var(--muted)", borderRadius: "0 0 6px 6px" }}>
           {editing ? (
             <>
-              <input ref={urlInputRef} type="url" value={draft} onChange={(e) => setDraft(e.target.value)}
+              <input data-testid="video-url-input" ref={urlInputRef} type="url" value={draft} onChange={(e) => setDraft(e.target.value)}
                 onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); confirm(); } if (e.key === "Escape") { e.preventDefault(); setEditing(false); } }}
                 placeholder="YouTube or Vimeo URL"
                 style={{ flex: 1, minWidth: 0, fontSize: "0.75rem", padding: "0.2rem 0.5rem", borderRadius: "4px", border: "1px solid var(--border)", background: "var(--background)", color: "var(--foreground)", fontFamily: "monospace" }}
               />
               <span style={{ fontSize: "0.65rem", color: "var(--muted-foreground)", whiteSpace: "nowrap", padding: "0 4px" }}>Start:</span>
-              <input type="number" value={draftStart} onChange={(e) => setDraftStart(e.target.value)}
+              <input data-testid="video-start-input" type="number" value={draftStart} onChange={(e) => setDraftStart(e.target.value)}
                 min={0} placeholder="0"
                 style={{ width: "52px", fontSize: "0.75rem", padding: "0.2rem 0.35rem", borderRadius: "4px", border: "1px solid var(--border)", background: "var(--background)", color: "var(--foreground)" }}
               />
@@ -681,18 +685,18 @@ function VideoNodeView({ node, updateAttributes, deleteNode, selected }: NodeVie
                 <span style={{ fontSize: "0.65rem", color: "var(--muted-foreground)", fontFamily: "monospace", background: "var(--accent)", borderRadius: "3px", padding: "0.1rem 0.3rem", flexShrink: 0 }}>⏱ {startAt}s</span>
               )}
               <span style={{ flex: 1 }} />
-              <button type="button" onMouseDown={(e) => { e.preventDefault(); setDraft(url); setDraftStart(String(startAt || 0)); setEditing(true); }}
+              <button data-testid="video-edit-button" type="button" onMouseDown={(e) => { e.preventDefault(); setDraft(url); setDraftStart(String(startAt || 0)); setEditing(true); }}
                 style={{ fontSize: "0.7rem", padding: "0.15rem 0.375rem", borderRadius: "3px", border: "1px solid var(--border)", cursor: "pointer", background: "transparent", color: "var(--foreground)" }}>Edit</button>
               {del.confirming ? (
                 <>
                   <span style={{ fontSize: "0.65rem", color: "var(--destructive)", fontWeight: 500, padding: "0 2px" }}>Remove?</span>
-                  <button type="button" onMouseDown={(e) => { e.preventDefault(); del.confirm(); }}
+                  <button data-testid="video-delete-confirm" type="button" onMouseDown={(e) => { e.preventDefault(); del.confirm(); }}
                     style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "none", background: "var(--destructive)", color: "#fff", cursor: "pointer", lineHeight: 1 }}>Yes</button>
-                  <button type="button" onMouseDown={(e) => { e.preventDefault(); del.cancel(); }}
+                  <button data-testid="video-delete-cancel" type="button" onMouseDown={(e) => { e.preventDefault(); del.cancel(); }}
                     style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "1px solid var(--border)", background: "transparent", color: "var(--foreground)", cursor: "pointer", lineHeight: 1 }}>No</button>
                 </>
               ) : (
-                <button type="button" onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); del.request(); }}
+                <button data-testid="video-delete-trigger" type="button" onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); del.request(); }}
                   style={{ width: "18px", height: "18px", borderRadius: "50%", border: "none", background: "transparent", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--muted-foreground)", fontSize: "0.9rem", lineHeight: 1, flexShrink: 0 }}
                   title="Remove video">×</button>
               )}
@@ -835,6 +839,7 @@ function AudioNodeView({ node, updateAttributes, deleteNode, selected }: NodeVie
       <NodeViewWrapper draggable contentEditable={false} style={{ display: "flex", justifyContent: wrapperJustify, margin: "0.75rem 0", position: "relative" }}>
         <DragHandle />
         <div
+          data-testid="audio-upload-zone"
           onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
           onDragLeave={() => setDragOver(false)}
           onDrop={(e) => { e.preventDefault(); setDragOver(false); const f = e.dataTransfer.files?.[0]; if (f) handleUpload(f); }}
@@ -848,7 +853,7 @@ function AudioNodeView({ node, updateAttributes, deleteNode, selected }: NodeVie
           }}
         >
           {uploading ? "Uploading…" : "Drop or click to upload audio"}
-          <input ref={fileRef} type="file" accept="audio/*" style={{ display: "none" }}
+          <input data-testid="audio-file-input" ref={fileRef} type="file" accept="audio/*" style={{ display: "none" }}
             onChange={(e) => { const f = e.target.files?.[0]; if (f) handleUpload(f); e.target.value = ""; }} />
         </div>
       </NodeViewWrapper>
@@ -876,15 +881,15 @@ function AudioNodeView({ node, updateAttributes, deleteNode, selected }: NodeVie
             display: "flex", alignItems: "center", justifyContent: "center", gap: "0.5rem",
           }}>
             <span style={{ fontSize: "0.8rem", color: "var(--destructive)", fontWeight: 600 }}>Remove audio?</span>
-            <button type="button" onMouseDown={(e) => { e.preventDefault(); del.confirm(); }} style={{ ...btnSm, background: "var(--destructive)", color: "#fff", border: "none" }}>Confirm</button>
-            <button type="button" onMouseDown={(e) => { e.preventDefault(); del.cancel(); }} style={btnSm}>Cancel</button>
+            <button data-testid="audio-delete-confirm" type="button" onMouseDown={(e) => { e.preventDefault(); del.confirm(); }} style={{ ...btnSm, background: "var(--destructive)", color: "#fff", border: "none" }}>Confirm</button>
+            <button data-testid="audio-delete-cancel" type="button" onMouseDown={(e) => { e.preventDefault(); del.cancel(); }} style={btnSm}>Cancel</button>
           </div>
         )}
         <div style={{ display: "flex", alignItems: "center", gap: "4px", padding: "0.2rem 0.375rem", borderTop: "1px solid var(--border)", backgroundColor: "var(--muted)", borderRadius: "0 0 6px 6px" }}>
           <span style={{ fontSize: "0.7rem", color: "var(--muted-foreground)", padding: "0 4px", flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
             {title || "Audio"}
           </span>
-          <button type="button" onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); del.request(); }}
+          <button data-testid="audio-delete-trigger" type="button" onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); del.request(); }}
             style={{ width: "18px", height: "18px", borderRadius: "50%", border: "none", background: "transparent", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--muted-foreground)", fontSize: "0.9rem", lineHeight: 1, flexShrink: 0 }}
             title="Remove audio">×</button>
         </div>
@@ -1075,13 +1080,13 @@ function InteractiveNodeView({ node, deleteNode, updateAttributes, selected }: N
           {del.confirming ? (
             <>
               <span style={{ fontSize: "0.65rem", color: "var(--destructive)", fontWeight: 500, padding: "0 2px" }}>Remove?</span>
-              <button type="button" onMouseDown={(e) => { e.preventDefault(); del.confirm(); }}
+              <button data-testid="interactive-delete-confirm" type="button" onMouseDown={(e) => { e.preventDefault(); del.confirm(); }}
                 style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "none", background: "var(--destructive)", color: "#fff", cursor: "pointer", lineHeight: 1 }}>Yes</button>
-              <button type="button" onMouseDown={(e) => { e.preventDefault(); del.cancel(); }}
+              <button data-testid="interactive-delete-cancel" type="button" onMouseDown={(e) => { e.preventDefault(); del.cancel(); }}
                 style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "1px solid var(--border)", background: "transparent", color: "var(--foreground)", cursor: "pointer", lineHeight: 1 }}>No</button>
             </>
           ) : (
-            <button type="button" onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); del.request(); }}
+            <button data-testid="interactive-delete-trigger" type="button" onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); del.request(); }}
               style={{ width: "18px", height: "18px", borderRadius: "50%", border: "none", background: "transparent", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--muted-foreground)", fontSize: "0.9rem", lineHeight: 1, flexShrink: 0 }}
               title="Remove interactive">×</button>
           )}
@@ -1089,6 +1094,7 @@ function InteractiveNodeView({ node, deleteNode, updateAttributes, selected }: N
         {/* Resize knob (same as Image) */}
         {selected && (
           <div
+            data-testid="interactive-resize-handle"
             title="Drag to resize"
             onMouseDown={handleResizeMouseDown}
             style={{
@@ -1308,20 +1314,20 @@ function MapEmbedNodeView({ node, updateAttributes, deleteNode, selected }: Node
             }}>
               <span>📍 {address}</span>
               <span style={{ display: "flex", gap: "0.25rem" }}>
-                <button type="button" onClick={() => { setEditing(true); setInputVal(address); }}
+                <button data-testid="map-edit-button" type="button" onClick={() => { setEditing(true); setInputVal(address); }}
                   style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "1px solid var(--border)", background: "transparent", color: "var(--foreground)", cursor: "pointer", lineHeight: 1 }}>
                   Edit
                 </button>
                 {del.confirming ? (
                   <>
                     <span style={{ fontSize: "0.65rem", color: "var(--destructive)", fontWeight: 500, padding: "0 2px" }}>Remove?</span>
-                    <button type="button" onClick={del.confirm}
+                    <button data-testid="map-delete-confirm" type="button" onClick={del.confirm}
                       style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "none", background: "var(--destructive)", color: "#fff", cursor: "pointer", lineHeight: 1 }}>Yes</button>
-                    <button type="button" onClick={del.cancel}
+                    <button data-testid="map-delete-cancel" type="button" onClick={del.cancel}
                       style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "1px solid var(--border)", background: "transparent", color: "var(--foreground)", cursor: "pointer", lineHeight: 1 }}>No</button>
                   </>
                 ) : (
-                  <button type="button" onClick={del.request}
+                  <button data-testid="map-delete-trigger" type="button" onClick={del.request}
                     style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "1px solid var(--border)", background: "transparent", color: "var(--muted-foreground)", cursor: "pointer", lineHeight: 1 }}>×</button>
                 )}
               </span>
@@ -1330,7 +1336,7 @@ function MapEmbedNodeView({ node, updateAttributes, deleteNode, selected }: Node
         ) : (
           <div style={{ padding: "1.5rem", display: "flex", flexDirection: "column", alignItems: "center", gap: "0.5rem", background: "var(--card)" }}>
             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--muted-foreground)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
-            <form onSubmit={(e) => {
+            <form data-testid="map-address-form" onSubmit={(e) => {
               e.preventDefault();
               if (inputVal.trim()) {
                 // Destroy old map before re-rendering
@@ -1343,6 +1349,7 @@ function MapEmbedNodeView({ node, updateAttributes, deleteNode, selected }: Node
               }
             }} style={{ display: "flex", gap: "0.25rem", width: "100%", maxWidth: 320 }}>
               <input
+                data-testid="map-address-input"
                 type="text"
                 value={inputVal}
                 onChange={(e) => setInputVal(e.target.value)}
@@ -1354,7 +1361,7 @@ function MapEmbedNodeView({ node, updateAttributes, deleteNode, selected }: Node
                   color: "var(--foreground)", outline: "none",
                 }}
               />
-              <button type="submit" style={{
+              <button data-testid="map-show-button" type="submit" style={{
                 padding: "0.35rem 0.75rem", borderRadius: "6px", border: "none",
                 background: "#F7BB2E", color: "#0D0D0D", fontSize: "0.75rem",
                 fontWeight: 600, cursor: "pointer",
@@ -1509,6 +1516,7 @@ function FileNodeView({ node, updateAttributes, deleteNode, selected }: NodeView
 
   const mediaBrowserModal = mediaBrowserOpen && (
     <div
+      data-testid="file-media-browser-modal"
       style={{
         position: "fixed", inset: 0, zIndex: 100,
         display: "flex", alignItems: "center", justifyContent: "center",
@@ -1532,6 +1540,7 @@ function FileNodeView({ node, updateAttributes, deleteNode, selected }: NodeView
             Media Library
           </span>
           <button
+            data-testid="file-media-browser-close"
             type="button"
             onClick={() => setMediaBrowserOpen(false)}
             style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", padding: "0.25rem", fontSize: "1.1rem", lineHeight: 1 }}
@@ -1542,6 +1551,7 @@ function FileNodeView({ node, updateAttributes, deleteNode, selected }: NodeView
         {/* Search */}
         <div style={{ padding: "0.5rem 0.75rem", borderBottom: "1px solid var(--border)" }}>
           <input
+            data-testid="file-media-search-input"
             type="text"
             value={mediaSearch}
             onChange={(e) => setMediaSearch(e.target.value)}
@@ -1582,6 +1592,7 @@ function FileNodeView({ node, updateAttributes, deleteNode, selected }: NodeView
               }}>
                 {filtered.map((item) => (
                   <button
+                    data-testid="file-media-item-button"
                     key={item.url}
                     type="button"
                     onClick={() => {
@@ -1668,18 +1679,18 @@ function FileNodeView({ node, updateAttributes, deleteNode, selected }: NodeView
             <>
               <span style={{ fontSize: "0.8rem" }}>Drop file here or</span>
               <div style={{ display: "flex", gap: "0.5rem" }}>
-                <button type="button" onClick={(e) => { e.stopPropagation(); fileRef.current?.click(); }}
+                <button data-testid="file-upload-button" type="button" onClick={(e) => { e.stopPropagation(); fileRef.current?.click(); }}
                   style={btnStyle} className="hover:border-primary hover:text-primary">
                   <IconAttachment /> Upload file
                 </button>
-                <button type="button" onClick={(e) => { e.stopPropagation(); openMediaBrowser(); }}
+                <button data-testid="file-browse-media-button" type="button" onClick={(e) => { e.stopPropagation(); openMediaBrowser(); }}
                   style={btnStyle} className="hover:border-primary hover:text-primary">
                   <IconFile /> Browse Media
                 </button>
               </div>
             </>
           )}
-          <input ref={fileRef} type="file" accept="*" style={{ display: "none" }}
+          <input data-testid="file-input" ref={fileRef} type="file" accept="*" style={{ display: "none" }}
             onChange={(e) => { const f = e.target.files?.[0]; if (f) handleUpload(f); e.target.value = ""; }} />
         </div>
         {mediaBrowserModal}
@@ -1710,7 +1721,7 @@ function FileNodeView({ node, updateAttributes, deleteNode, selected }: NodeView
         {/* Footer bar — download + delete (matches Image/Video/Int pattern) */}
         <div style={{ display: "flex", alignItems: "center", gap: "4px", padding: "0.15rem 0.375rem", borderTop: "1px solid var(--border)", backgroundColor: "var(--muted)" }}>
           <span style={{ fontSize: "0.65rem", color: "var(--muted-foreground)", padding: "0 4px", opacity: 0.6, flex: 1 }}>File</span>
-          <a href={src} download={filename} target="_blank" rel="noopener noreferrer"
+          <a data-testid="file-download-link" href={src} download={filename} target="_blank" rel="noopener noreferrer"
             onMouseDown={(e) => e.stopPropagation()}
             style={{ width: "18px", height: "18px", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--muted-foreground)", flexShrink: 0 }}
             title="Download">
@@ -1719,13 +1730,13 @@ function FileNodeView({ node, updateAttributes, deleteNode, selected }: NodeView
           {del.confirming ? (
             <>
               <span style={{ fontSize: "0.65rem", color: "var(--destructive)", fontWeight: 500, padding: "0 2px" }}>Remove?</span>
-              <button type="button" onMouseDown={(e) => { e.preventDefault(); del.confirm(); }}
+              <button data-testid="file-delete-confirm" type="button" onMouseDown={(e) => { e.preventDefault(); del.confirm(); }}
                 style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "none", background: "var(--destructive)", color: "#fff", cursor: "pointer", lineHeight: 1 }}>Yes</button>
-              <button type="button" onMouseDown={(e) => { e.preventDefault(); del.cancel(); }}
+              <button data-testid="file-delete-cancel" type="button" onMouseDown={(e) => { e.preventDefault(); del.cancel(); }}
                 style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "1px solid var(--border)", background: "transparent", color: "var(--foreground)", cursor: "pointer", lineHeight: 1 }}>No</button>
             </>
           ) : (
-            <button type="button" onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); del.request(); }}
+            <button data-testid="file-delete-trigger" type="button" onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); del.request(); }}
               style={{ width: "18px", height: "18px", borderRadius: "50%", border: "none", background: "transparent", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--muted-foreground)", fontSize: "0.9rem", lineHeight: 1, flexShrink: 0 }}
               title="Remove file">×</button>
           )}
@@ -1870,6 +1881,7 @@ function CalloutNodeView({ node, updateAttributes, deleteNode, selected }: NodeV
 
   const btnVariant = (v: CalloutVariant, label: string) => (
     <button
+      data-testid={`callout-variant-${v}`}
       type="button"
       onMouseDown={(e) => { e.preventDefault(); updateAttributes({ variant: v }); }}
       style={{
@@ -1907,11 +1919,11 @@ function CalloutNodeView({ node, updateAttributes, deleteNode, selected }: NodeV
           {del.confirming ? (
             <>
               <span style={{ fontSize: "0.7rem", color: "var(--destructive)", fontWeight: 500, padding: "0 2px" }}>Remove?</span>
-              <button type="button" onMouseDown={(e) => { e.preventDefault(); del.confirm(); }} style={{ ...btnSm, background: "var(--destructive)", color: "#fff", border: "none", fontSize: "0.65rem" }}>Yes</button>
-              <button type="button" onMouseDown={(e) => { e.preventDefault(); del.cancel(); }} style={{ ...btnSm, fontSize: "0.65rem" }}>No</button>
+              <button data-testid="callout-delete-confirm" type="button" onMouseDown={(e) => { e.preventDefault(); del.confirm(); }} style={{ ...btnSm, background: "var(--destructive)", color: "#fff", border: "none", fontSize: "0.65rem" }}>Yes</button>
+              <button data-testid="callout-delete-cancel" type="button" onMouseDown={(e) => { e.preventDefault(); del.cancel(); }} style={{ ...btnSm, fontSize: "0.65rem" }}>No</button>
             </>
           ) : (
-            <button type="button" onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); del.request(); }}
+            <button data-testid="callout-delete-trigger" type="button" onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); del.request(); }}
               style={{ width: "16px", height: "16px", borderRadius: "50%", border: "none", background: "transparent", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--muted-foreground)", fontSize: "0.8rem", lineHeight: 1, flexShrink: 0 }}
               title="Remove callout">×</button>
           )}
@@ -2036,6 +2048,7 @@ function SnippetNodeView({ node, selected, deleteNode }: NodeViewProps) {
         }}
       >
         <div
+          data-testid="snippet-header"
           onClick={() => setExpanded(!expanded)}
           style={{
             padding: "0.5rem 0.75rem",
@@ -2063,13 +2076,13 @@ function SnippetNodeView({ node, selected, deleteNode }: NodeViewProps) {
           {del.confirming ? (
             <span style={{ display: "flex", alignItems: "center", gap: "0.2rem" }}>
               <span style={{ fontSize: "0.65rem", color: "var(--destructive)", fontWeight: 500, padding: "0 2px" }}>Remove?</span>
-              <button type="button" onClick={(e) => { e.stopPropagation(); del.confirm(); }}
+              <button data-testid="snippet-delete-confirm" type="button" onClick={(e) => { e.stopPropagation(); del.confirm(); }}
                 style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "none", background: "var(--destructive)", color: "#fff", cursor: "pointer", lineHeight: 1 }}>Yes</button>
-              <button type="button" onClick={(e) => { e.stopPropagation(); del.cancel(); }}
+              <button data-testid="snippet-delete-cancel" type="button" onClick={(e) => { e.stopPropagation(); del.cancel(); }}
                 style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "1px solid var(--border)", background: "transparent", color: "var(--foreground)", cursor: "pointer", lineHeight: 1 }}>No</button>
             </span>
           ) : (
-            <button type="button" onClick={(e) => { e.stopPropagation(); del.request(); }}
+            <button data-testid="snippet-delete-trigger" type="button" onClick={(e) => { e.stopPropagation(); del.request(); }}
               style={{ background: "transparent", border: "none", cursor: "pointer", color: "var(--muted-foreground)", padding: "0 2px", fontSize: "0.7rem", lineHeight: 1 }}>×</button>
           )}
         </div>
@@ -2225,6 +2238,7 @@ function SvgNodeView({ node, selected, updateAttributes, deleteNode }: NodeViewP
           </div>
         )}
         <input
+          data-testid="svg-caption-input"
           type="text"
           value={captionDraft}
           onChange={(e) => setCaptionDraft(e.target.value)}
@@ -2254,13 +2268,13 @@ function SvgNodeView({ node, selected, updateAttributes, deleteNode }: NodeViewP
           {del.confirming ? (
             <>
               <span style={{ fontSize: "0.65rem", color: "var(--destructive)", fontWeight: 500, padding: "0 2px" }}>Remove?</span>
-              <button type="button" onClick={del.confirm}
+              <button data-testid="svg-delete-confirm" type="button" onClick={del.confirm}
                 style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "none", background: "var(--destructive)", color: "#fff", cursor: "pointer", lineHeight: 1 }}>Yes</button>
-              <button type="button" onClick={del.cancel}
+              <button data-testid="svg-delete-cancel" type="button" onClick={del.cancel}
                 style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "1px solid var(--border)", background: "transparent", color: "var(--foreground)", cursor: "pointer", lineHeight: 1 }}>No</button>
             </>
           ) : (
-            <button type="button" onClick={del.request}
+            <button data-testid="svg-delete-trigger" type="button" onClick={del.request}
               style={{ background: "transparent", border: "none", cursor: "pointer", color: "var(--muted-foreground)", padding: "0 2px", fontSize: "0.7rem", lineHeight: 1 }}>×</button>
           )}
         </div>
@@ -2463,6 +2477,7 @@ function LinkPopup({ onConfirm, onRemove, onClose, initial }: {
       {/* Input */}
       <div style={{ position: "relative" }}>
         <input
+          data-testid="link-url-input"
           ref={inputRef}
           value={url}
           onChange={(e) => setUrl(e.target.value)}
@@ -2477,6 +2492,7 @@ function LinkPopup({ onConfirm, onRemove, onClose, initial }: {
           <div style={{ position: "relative", marginBottom: "0.5rem", border: "1px solid var(--border)", borderTop: "none", borderRadius: "0 0 0.5rem 0.5rem", overflow: "hidden", maxHeight: "200px", overflowY: "auto" }}>
             {suggestions.map((s, i) => (
               <button
+                data-testid="link-suggestion-button"
                 key={s.url}
                 type="button"
                 onMouseDown={(e) => { e.preventDefault(); confirm(s.url); }}
@@ -2509,6 +2525,7 @@ function LinkPopup({ onConfirm, onRemove, onClose, initial }: {
       {/* Actions */}
       <div style={{ display: "flex", gap: "0.5rem" }}>
         <button
+          data-testid="link-apply-button"
           type="button"
           onClick={() => confirm(url)}
           style={{ flex: 1, padding: "0.375rem 0.75rem", borderRadius: "0.5rem", backgroundColor: "var(--primary)", color: "var(--primary-foreground)", fontSize: "0.8rem", fontWeight: 600, border: "none", cursor: "pointer" }}
@@ -2517,6 +2534,7 @@ function LinkPopup({ onConfirm, onRemove, onClose, initial }: {
         </button>
         {initial && (
           <button
+            data-testid="link-remove-button"
             type="button"
             onClick={onRemove}
             style={{ padding: "0.375rem 0.75rem", borderRadius: "0.5rem", backgroundColor: "transparent", color: "var(--destructive)", fontSize: "0.8rem", border: "1px solid var(--destructive)", cursor: "pointer" }}
@@ -3082,6 +3100,7 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
                     const isHovered = hoveredKey === h.key;
                     return (
                       <button
+                        data-testid={`heading-option-${h.key}`}
                         key={h.key}
                         type="button"
                         onMouseDown={(e) => { e.preventDefault(); applyHeading(h.key); }}
@@ -3211,7 +3230,7 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
                     { color: "#e9d5ff", label: "Purple" },
                     { color: "#fed7aa", label: "Orange" },
                   ].map(({ color, label }) => (
-                    <button key={color} type="button" title={label}
+                    <button data-testid={`highlight-color-${label.toLowerCase()}`} key={color} type="button" title={label}
                       onMouseDown={(e) => { e.preventDefault(); editor.chain().focus().toggleHighlight({ color }).run(); setHighlightOpen(false); }}
                       style={{
                         width: 22, height: 22, borderRadius: "50%",
@@ -3221,7 +3240,7 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
                         outlineOffset: "1px",
                       }} />
                   ))}
-                  <button type="button" title="Clear highlight"
+                  <button data-testid="highlight-clear-button" type="button" title="Clear highlight"
                     onMouseDown={(e) => { e.preventDefault(); editor.chain().focus().unsetHighlight().run(); setHighlightOpen(false); }}
                     style={{
                       width: 22, height: 22, borderRadius: "50%",
@@ -3280,7 +3299,7 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
                 }}>
                   {mediaSubMenu === null && (<>
                     {/* Image — has sub-options */}
-                    <button type="button" style={{
+                    <button data-testid="media-menu-image" type="button" style={{
                       display: "flex", alignItems: "center", justifyContent: "space-between",
                       width: "100%", padding: "0.5rem 0.75rem", border: "none",
                       background: "transparent", color: "var(--foreground)",
@@ -3294,7 +3313,7 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
                       <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
                     </button>
                     {/* Video */}
-                    <button type="button" style={{
+                    <button data-testid="media-menu-video" type="button" style={{
                       display: "flex", alignItems: "center", gap: "0.5rem",
                       width: "100%", padding: "0.5rem 0.75rem", border: "none",
                       background: "transparent", color: "var(--foreground)",
@@ -3307,7 +3326,7 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
                       <IconVideo />Video
                     </button>
                     {/* Audio — has sub-options */}
-                    <button type="button" style={{
+                    <button data-testid="media-menu-audio" type="button" style={{
                       display: "flex", alignItems: "center", justifyContent: "space-between",
                       width: "100%", padding: "0.5rem 0.75rem", border: "none",
                       background: "transparent", color: "var(--foreground)",
@@ -3321,7 +3340,7 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
                       <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
                     </button>
                     {/* File attachment */}
-                    <button type="button" style={{
+                    <button data-testid="media-menu-file" type="button" style={{
                       display: "flex", alignItems: "center", gap: "0.5rem",
                       width: "100%", padding: "0.5rem 0.75rem", border: "none",
                       background: "transparent", color: "var(--foreground)",
@@ -3337,7 +3356,7 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
                       <IconAttachment />File attachment
                     </button>
                     {/* Map embed */}
-                    <button type="button" style={{
+                    <button data-testid="media-menu-map" type="button" style={{
                       display: "flex", alignItems: "center", gap: "0.5rem",
                       width: "100%", padding: "0.5rem 0.75rem", border: "none",
                       background: "transparent", color: "var(--foreground)",
@@ -3357,7 +3376,7 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
 
                   {/* Image sub-menu */}
                   {mediaSubMenu === "image" && (<>
-                    <button type="button" style={{
+                    <button data-testid="media-submenu-back-image" type="button" style={{
                       display: "flex", alignItems: "center", gap: "0.5rem",
                       width: "100%", padding: "0.4rem 0.75rem", border: "none",
                       background: "transparent", color: "var(--muted-foreground)",
@@ -3371,7 +3390,7 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
                       Image
                     </button>
                     <div style={{ height: "1px", background: "var(--border)", margin: "2px 0" }} />
-                    <button type="button" style={{
+                    <button data-testid="media-submenu-upload-image" type="button" style={{
                       display: "flex", alignItems: "center", gap: "0.5rem",
                       width: "100%", padding: "0.5rem 0.75rem", border: "none",
                       background: "transparent", color: "var(--foreground)",
@@ -3383,7 +3402,7 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
                     >
                       Upload file
                     </button>
-                    <button type="button" style={{
+                    <button data-testid="media-submenu-browse-image" type="button" style={{
                       display: "flex", alignItems: "center", gap: "0.5rem",
                       width: "100%", padding: "0.5rem 0.75rem", border: "none",
                       background: "transparent", color: "var(--foreground)",
@@ -3399,7 +3418,7 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
 
                   {/* Audio sub-menu */}
                   {mediaSubMenu === "audio" && (<>
-                    <button type="button" style={{
+                    <button data-testid="media-submenu-back-audio" type="button" style={{
                       display: "flex", alignItems: "center", gap: "0.5rem",
                       width: "100%", padding: "0.4rem 0.75rem", border: "none",
                       background: "transparent", color: "var(--muted-foreground)",
@@ -3413,7 +3432,7 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
                       Audio
                     </button>
                     <div style={{ height: "1px", background: "var(--border)", margin: "2px 0" }} />
-                    <button type="button" style={{
+                    <button data-testid="media-submenu-upload-audio" type="button" style={{
                       display: "flex", alignItems: "center", gap: "0.5rem",
                       width: "100%", padding: "0.5rem 0.75rem", border: "none",
                       background: "transparent", color: "var(--foreground)",
@@ -3425,7 +3444,7 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
                     >
                       Upload file
                     </button>
-                    <button type="button" style={{
+                    <button data-testid="media-submenu-browse-audio" type="button" style={{
                       display: "flex", alignItems: "center", gap: "0.5rem",
                       width: "100%", padding: "0.5rem 0.75rem", border: "none",
                       background: "transparent", color: "var(--foreground)",
@@ -3441,7 +3460,7 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
 
                   {/* Map sub-menu */}
                   {mediaSubMenu === "map" && (<>
-                    <button type="button" style={{
+                    <button data-testid="media-submenu-back-map" type="button" style={{
                       display: "flex", alignItems: "center", gap: "0.5rem",
                       width: "100%", padding: "0.4rem 0.75rem", border: "none",
                       background: "transparent", color: "var(--muted-foreground)",
@@ -3455,7 +3474,7 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
                       Map
                     </button>
                     <div style={{ height: "1px", background: "var(--border)", margin: "2px 0" }} />
-                    <form
+                    <form data-testid="media-submenu-map-form"
                       onSubmit={(e) => {
                         e.preventDefault();
                         const input = (e.currentTarget.elements.namedItem("mapAddress") as HTMLInputElement);
@@ -3469,6 +3488,7 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
                       style={{ padding: "0.375rem 0.75rem", display: "flex", gap: "0.25rem" }}
                     >
                       <input
+                        data-testid="media-submenu-map-address-input"
                         name="mapAddress"
                         type="text"
                         placeholder="Address or place..."
@@ -3479,7 +3499,7 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
                           color: "var(--foreground)", outline: "none",
                         }}
                       />
-                      <button type="submit" style={{
+                      <button data-testid="media-submenu-map-submit" type="submit" style={{
                         padding: "0.3rem 0.5rem", borderRadius: "4px", border: "none",
                         background: "#F7BB2E", color: "#0D0D0D", fontSize: "0.7rem",
                         fontWeight: 600, cursor: "pointer",
@@ -3493,6 +3513,7 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
             </div>
             {/* Hidden file inputs for image and audio upload */}
             <input
+              data-testid="toolbar-image-file-input"
               ref={imageInputRef}
               type="file"
               accept="image/*"
@@ -3599,18 +3620,18 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
 
             {/* Zoom */}
             <div style={{ display: "flex", alignItems: "center", gap: "4px", marginRight: "0.25rem" }}>
-              <button type="button" title="Zoom out"
+              <button data-testid="zoom-out-button" type="button" title="Zoom out"
                 onMouseDown={(e) => { e.preventDefault(); setZoom(z => Math.max(50, z - 10)); }}
                 disabled={zoom <= 50}
                 style={{ width: 28, height: 28, borderRadius: 4, border: "none", background: "transparent", cursor: zoom <= 50 ? "not-allowed" : "pointer", color: "var(--muted-foreground)", display: "flex", alignItems: "center", justifyContent: "center", opacity: zoom <= 50 ? 0.3 : 1, fontSize: "1rem" }}>
                 −
               </button>
-              <button type="button" title="Reset zoom"
+              <button data-testid="zoom-reset-button" type="button" title="Reset zoom"
                 onMouseDown={(e) => { e.preventDefault(); setZoom(100); }}
                 style={{ fontSize: "0.75rem", fontFamily: "monospace", color: zoom === 100 ? "var(--muted-foreground)" : "var(--foreground)", background: "transparent", border: "none", cursor: "pointer", padding: "0 4px", minWidth: "2.5rem", textAlign: "center", fontWeight: 500 }}>
                 {zoom}%
               </button>
-              <button type="button" title="Zoom in"
+              <button data-testid="zoom-in-button" type="button" title="Zoom in"
                 onMouseDown={(e) => { e.preventDefault(); setZoom(z => Math.min(200, z + 10)); }}
                 disabled={zoom >= 200}
                 style={{ width: 28, height: 28, borderRadius: 4, border: "none", background: "transparent", cursor: zoom >= 200 ? "not-allowed" : "pointer", color: "var(--muted-foreground)", display: "flex", alignItems: "center", justifyContent: "center", opacity: zoom >= 200 ? 0.3 : 1, fontSize: "1rem" }}>
@@ -3861,6 +3882,7 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
             This prevents EditorContent (and its React NodeViews) from unmounting
             and remounting, which triggers flushSync warnings in React 19 + TipTap v3. */}
         <textarea
+          data-testid="source-editor-textarea"
           value={sourceText}
           onChange={(e) => setSourceText(e.target.value)}
           spellCheck={false}
@@ -3965,15 +3987,15 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
               borderRadius: "0 0 0.5rem 0.5rem", flexWrap: "wrap",
               position: "sticky", bottom: 0, zIndex: 20,
             }}>
-              <button type="button" style={{ ...btnStyle, color: "var(--destructive)" }} onClick={rejectAll}>Reject all</button>
-              <button type="button" style={{ ...btnStyle, color: "#4ade80" }} onClick={acceptAll}>Accept all</button>
+              <button data-testid="proofread-reject-all-button" type="button" style={{ ...btnStyle, color: "var(--destructive)" }} onClick={rejectAll}>Reject all</button>
+              <button data-testid="proofread-accept-all-button" type="button" style={{ ...btnStyle, color: "#4ade80" }} onClick={acceptAll}>Accept all</button>
 
               <div style={{ display: "flex", alignItems: "center", gap: "0.25rem", margin: "0 0.25rem" }}>
-                <button type="button" style={{ ...btnStyle, padding: "0.25rem 0.375rem" }} onClick={() => navigate(-1)}>←</button>
+                <button data-testid="proofread-prev-button" type="button" style={{ ...btnStyle, padding: "0.25rem 0.375rem" }} onClick={() => navigate(-1)}>←</button>
                 <span style={{ fontSize: "0.7rem", color: "var(--muted-foreground)", minWidth: "3rem", textAlign: "center" }}>
                   {proofreadIndex + 1} / {proofreadMatches.length}
                 </span>
-                <button type="button" style={{ ...btnStyle, padding: "0.25rem 0.375rem" }} onClick={() => navigate(1)}>→</button>
+                <button data-testid="proofread-next-button" type="button" style={{ ...btnStyle, padding: "0.25rem 0.375rem" }} onClick={() => navigate(1)}>→</button>
               </div>
 
               {current && (
@@ -3988,12 +4010,12 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
 
               {current && (
                 <div style={{ display: "flex", gap: "0.25rem", marginLeft: "auto" }}>
-                  <button type="button" style={{ ...btnStyle, color: "var(--destructive)" }} onClick={() => reject(current)}>✕ Reject</button>
-                  <button type="button" style={{ ...btnStyle, color: "#4ade80", borderColor: "#4ade80" }} onClick={() => accept(current)}>✓ Accept</button>
+                  <button data-testid="proofread-reject-button" type="button" style={{ ...btnStyle, color: "var(--destructive)" }} onClick={() => reject(current)}>✕ Reject</button>
+                  <button data-testid="proofread-accept-button" type="button" style={{ ...btnStyle, color: "#4ade80", borderColor: "#4ade80" }} onClick={() => accept(current)}>✓ Accept</button>
                 </div>
               )}
 
-              <button type="button" style={{ ...btnStyle, padding: "0.25rem 0.375rem", marginLeft: current ? "0" : "auto" }} onClick={close} title="Close proofread">✕</button>
+              <button data-testid="proofread-close-button" type="button" style={{ ...btnStyle, padding: "0.25rem 0.375rem", marginLeft: current ? "0" : "auto" }} onClick={close} title="Close proofread">✕</button>
             </div>
           );
         })()}
@@ -4019,12 +4041,13 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
               {/* Header */}
               <div style={{ padding: "1rem 1.25rem", borderBottom: "1px solid var(--border)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                 <span style={{ fontSize: "0.95rem", fontWeight: 600, color: "var(--foreground)" }}>Insert Interactive</span>
-                <button type="button" onClick={() => setShowInteractivePicker(false)}
+                <button data-testid="interactive-picker-close-button" type="button" onClick={() => setShowInteractivePicker(false)}
                   style={{ width: "24px", height: "24px", borderRadius: "50%", border: "none", background: "transparent", cursor: "pointer", color: "var(--muted-foreground)", fontSize: "1.1rem", display: "flex", alignItems: "center", justifyContent: "center" }}>×</button>
               </div>
               {/* Search */}
               <div style={{ padding: "0.75rem 1.25rem", borderBottom: "1px solid var(--border)" }}>
                 <input
+                  data-testid="interactive-picker-search-input"
                   type="text"
                   value={intSearch}
                   onChange={(e) => setIntSearch(e.target.value)}
@@ -4050,6 +4073,7 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
                 )}
                 {filtered.map(item => (
                   <button
+                    data-testid={`interactive-picker-item-${item.id}`}
                     key={item.id}
                     type="button"
                     onClick={() => {
@@ -4099,12 +4123,12 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
                   <Braces style={{ width: 16, height: 16, color: "#F7BB2E" }} />
                   <span style={{ fontSize: "0.95rem", fontWeight: 600 }}>Insert Snippet</span>
                 </div>
-                <button type="button" onClick={() => setShowSnippetPicker(false)}
+                <button data-testid="snippet-picker-close-button" type="button" onClick={() => setShowSnippetPicker(false)}
                   style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", fontSize: "1.1rem" }}>×</button>
               </div>
               {/* Search */}
               <div style={{ padding: "0 1.25rem 0.5rem" }}>
-                <input type="text" value={snippetSearch} onChange={(e) => setSnippetSearch(e.target.value)}
+                <input data-testid="snippet-picker-search-input" type="text" value={snippetSearch} onChange={(e) => setSnippetSearch(e.target.value)}
                   onKeyDown={(e) => { if (e.key === "Escape") { e.stopPropagation(); setShowSnippetPicker(false); } }}
                   placeholder="Search snippets…" autoFocus
                   style={{
@@ -4126,6 +4150,7 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
                 )}
                 {filtered.map(item => (
                   <button
+                    data-testid={`snippet-picker-item-${item.slug}`}
                     key={item.slug}
                     type="button"
                     onClick={() => {
@@ -4177,11 +4202,11 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
                   <Shapes style={{ width: 16, height: 16, color: "#F7BB2E" }} />
                   <span style={{ fontSize: "0.95rem", fontWeight: 600 }}>Insert SVG figure</span>
                 </div>
-                <button type="button" onClick={() => setShowSvgPicker(false)}
+                <button data-testid="svg-picker-close-button" type="button" onClick={() => setShowSvgPicker(false)}
                   style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", fontSize: "1.1rem" }}>×</button>
               </div>
               <div style={{ padding: "0 1.25rem 0.5rem" }}>
-                <input type="text" value={svgSearch} onChange={(e) => setSvgSearch(e.target.value)}
+                <input data-testid="svg-picker-search-input" type="text" value={svgSearch} onChange={(e) => setSvgSearch(e.target.value)}
                   onKeyDown={(e) => { if (e.key === "Escape") { e.stopPropagation(); setShowSvgPicker(false); } }}
                   placeholder="Search SVG files…" autoFocus
                   style={{
@@ -4202,6 +4227,7 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
                 )}
                 {filtered.map(item => (
                   <button
+                    data-testid={`svg-picker-item-${item.slug}`}
                     key={item.name}
                     type="button"
                     onClick={() => {
@@ -4244,6 +4270,7 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
           }}>
             <span style={{ fontSize: "0.95rem", fontWeight: 600 }}>Insert Video</span>
             <input
+              data-testid="video-dialog-url-input"
               type="url"
               value={videoUrl}
               onChange={(e) => setVideoUrl(e.target.value)}
@@ -4263,11 +4290,11 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
               }}
             />
             <div style={{ display: "flex", justifyContent: "flex-end", gap: "0.5rem" }}>
-              <button type="button" onClick={() => setShowVideoDialog(false)}
+              <button data-testid="video-dialog-cancel-button" type="button" onClick={() => setShowVideoDialog(false)}
                 style={{ padding: "0.4rem 0.875rem", borderRadius: "6px", border: "1px solid var(--border)", background: "transparent", color: "var(--foreground)", fontSize: "0.8rem", cursor: "pointer" }}>
                 Cancel
               </button>
-              <button type="button" disabled={!videoUrl.trim()} onClick={() => {
+              <button data-testid="video-dialog-insert-button" type="button" disabled={!videoUrl.trim()} onClick={() => {
                 editor?.chain().focus().insertContent({ type: "videoEmbed", attrs: { url: videoUrl.trim() } }).run();
                 setShowVideoDialog(false);
               }}
@@ -4300,11 +4327,12 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
                 <p style={{ fontSize: "0.75rem", fontFamily: "monospace", textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--muted-foreground)" }}>
                   {replacePos !== null ? "Replace Content Block" : "Insert Content Block"}
                 </p>
-                <button type="button" onClick={closeBlockPicker} style={{ background: "none", border: "none", color: "var(--muted-foreground)", cursor: "pointer", fontSize: "1.2rem", lineHeight: 1 }}>×</button>
+                <button data-testid="block-picker-close-button" type="button" onClick={closeBlockPicker} style={{ background: "none", border: "none", color: "var(--muted-foreground)", cursor: "pointer", fontSize: "1.2rem", lineHeight: 1 }}>×</button>
               </div>
 
               {/* Search */}
               <input
+                data-testid="block-picker-search-input"
                 autoFocus
                 type="text"
                 placeholder="Search blocks…"
@@ -4336,6 +4364,7 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
                 )}
                 {filtered.map(block => (
                   <button
+                    data-testid={`block-picker-item-${block.slug}`}
                     key={block.slug}
                     type="button"
                     onClick={() => insertBlock(block.slug, block.label)}
@@ -4387,11 +4416,12 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
                 <span style={{ fontWeight: 500, fontSize: "0.9rem", display: "flex", alignItems: "center", gap: "0.4rem" }}>
                   <IconImage /> Select Image
                 </span>
-                <button type="button" onClick={() => setShowImageMediaBrowser(false)}
+                <button data-testid="media-browser-image-close-button" type="button" onClick={() => setShowImageMediaBrowser(false)}
                   style={{ width: "24px", height: "24px", borderRadius: "50%", border: "none", background: "transparent", cursor: "pointer", color: "var(--muted-foreground)", fontSize: "1.1rem", display: "flex", alignItems: "center", justifyContent: "center" }}>&times;</button>
               </div>
               <div style={{ padding: "0.5rem 0.75rem", borderBottom: "1px solid var(--border)" }}>
                 <input
+                  data-testid="media-browser-image-search-input"
                   type="text"
                   value={mediaBrowserSearch}
                   onChange={(e) => { setMediaBrowserSearch(e.target.value); setMediaBrowserPage(1); }}
@@ -4425,6 +4455,7 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
                     <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(110px, 1fr))", gap: "0.5rem" }}>
                       {visible.map((item) => (
                         <button
+                          data-testid={`media-browser-image-item-${item.name}`}
                           key={item.url}
                           type="button"
                           onClick={() => {
@@ -4453,7 +4484,7 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
                       ))}
                     </div>
                     {hasMore && (
-                      <button type="button" onClick={() => setMediaBrowserPage((p) => p + 1)}
+                      <button data-testid="media-browser-image-show-more-button" type="button" onClick={() => setMediaBrowserPage((p) => p + 1)}
                         style={{ display: "block", margin: "0.75rem auto 0", padding: "0.4rem 1.25rem", borderRadius: "6px", border: "1px solid var(--border)", background: "transparent", color: "var(--muted-foreground)", fontSize: "0.75rem", cursor: "pointer" }}>
                         Show more ({filtered.length - visible.length} remaining)
                       </button>
@@ -4491,11 +4522,12 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
                 <span style={{ fontWeight: 500, fontSize: "0.9rem", display: "flex", alignItems: "center", gap: "0.4rem" }}>
                   <IconAudio /> Select Audio
                 </span>
-                <button type="button" onClick={() => setShowAudioMediaBrowser(false)}
+                <button data-testid="media-browser-audio-close-button" type="button" onClick={() => setShowAudioMediaBrowser(false)}
                   style={{ width: "24px", height: "24px", borderRadius: "50%", border: "none", background: "transparent", cursor: "pointer", color: "var(--muted-foreground)", fontSize: "1.1rem", display: "flex", alignItems: "center", justifyContent: "center" }}>&times;</button>
               </div>
               <div style={{ padding: "0.5rem 0.75rem", borderBottom: "1px solid var(--border)" }}>
                 <input
+                  data-testid="media-browser-audio-search-input"
                   type="text"
                   value={mediaBrowserSearch}
                   onChange={(e) => setMediaBrowserSearch(e.target.value)}
@@ -4525,6 +4557,7 @@ function RichTextEditorInner({ value, onChange, disabled, stickyOffset = 132, fe
                     <div style={{ display: "flex", flexDirection: "column", gap: "0.375rem" }}>
                       {filtered.map((item) => (
                         <button
+                          data-testid={`media-browser-audio-item-${item.name}`}
                           key={item.url}
                           type="button"
                           onClick={() => {
diff --git a/packages/cms-admin/src/components/editor/seo-panel.tsx b/packages/cms-admin/src/components/editor/seo-panel.tsx
index 8f22eb057..0b22506ab 100644
--- a/packages/cms-admin/src/components/editor/seo-panel.tsx
+++ b/packages/cms-admin/src/components/editor/seo-panel.tsx
@@ -211,7 +211,7 @@ Rules:
           <span title="GEO Score" style={{ fontSize: "0.65rem", fontWeight: 600, fontFamily: "monospace", color: geoColor }}>
             GEO {geoScore?.score ?? 0}
           </span>
-          <button type="button" disabled={saving}
+          <button data-testid="seo-panel-save" type="button" disabled={saving}
             onClick={async () => {
               setSaving(true);
               setSaved(false);
@@ -231,7 +231,7 @@ Rules:
             }}>
             {saving ? "Saving…" : saved ? "Saved ✓" : "Save"}
           </button>
-          <button type="button" onClick={onClose} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", fontSize: "1.1rem" }}>&times;</button>
+          <button data-testid="seo-panel-close" type="button" onClick={onClose} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", fontSize: "1.1rem" }}>&times;</button>
         </div>
       </div>
 
@@ -258,7 +258,7 @@ Rules:
         {/* Meta title */}
         <div>
           <p style={lbl}>Meta title</p>
-          <input type="text" value={metaTitle} onChange={(e) => setMetaTitle(e.target.value)} placeholder={title} style={input} maxLength={70} />
+          <input data-testid="seo-meta-title-field" type="text" value={metaTitle} onChange={(e) => setMetaTitle(e.target.value)} placeholder={title} style={input} maxLength={70} />
           <p style={{ fontSize: "0.65rem", color: metaTitle.length > 60 ? "#f87171" : "var(--muted-foreground)", marginTop: "0.2rem", textAlign: "right" }}>
             {metaTitle.length}/60
           </p>
@@ -267,7 +267,7 @@ Rules:
         {/* Meta description */}
         <div>
           <p style={lbl}>Meta description</p>
-          <textarea value={metaDesc} onChange={(e) => setMetaDesc(e.target.value)} placeholder="Compelling description for search results..." style={{ ...input, minHeight: 100, resize: "vertical" }} maxLength={200} />
+          <textarea data-testid="seo-meta-description-field" value={metaDesc} onChange={(e) => setMetaDesc(e.target.value)} placeholder="Compelling description for search results..." style={{ ...input, minHeight: 100, resize: "vertical" }} maxLength={200} />
           <p style={{ fontSize: "0.65rem", color: metaDesc.length > 160 ? "#f87171" : "var(--muted-foreground)", marginTop: "0.2rem", textAlign: "right" }}>
             {metaDesc.length}/160
           </p>
@@ -280,13 +280,13 @@ Rules:
             {keywords.map((kw) => (
               <span key={kw} style={{ fontSize: "0.7rem", padding: "2px 8px", borderRadius: "9999px", background: "rgba(247,187,46,0.12)", border: "1px solid rgba(247,187,46,0.25)", color: "var(--foreground)", display: "inline-flex", alignItems: "center", gap: "4px" }}>
                 {kw}
-                <button type="button" onClick={() => setKeywords(keywords.filter((k) => k !== kw))}
+                <button data-testid={`seo-keyword-remove-${kw}`} type="button" onClick={() => setKeywords(keywords.filter((k) => k !== kw))}
                   style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", padding: 0, fontSize: "0.8rem", lineHeight: 1 }}>&times;</button>
               </span>
             ))}
           </div>
           <div style={{ display: "flex", gap: "0.25rem" }}>
-            <input type="text" value={keywordInput} onChange={(e) => setKeywordInput(e.target.value)}
+            <input data-testid="seo-keyword-field" type="text" value={keywordInput} onChange={(e) => setKeywordInput(e.target.value)}
               onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); addKeyword(); } }}
               placeholder="Add keyword..." style={{ ...input, flex: 1 }} />
           </div>
@@ -295,7 +295,7 @@ Rules:
         {/* OG Image */}
         <div>
           <p style={lbl}>Social image (OG)</p>
-          <input type="text" value={ogImage} onChange={(e) => setOgImage(e.target.value)} placeholder="/uploads/..." style={input} />
+          <input data-testid="seo-og-image-field" type="text" value={ogImage} onChange={(e) => setOgImage(e.target.value)} placeholder="/uploads/..." style={input} />
           {ogImage && ogImage.startsWith("/uploads/") && (
             // eslint-disable-next-line @next/next/no-img-element
             <img src={ogImage} alt="OG preview"
@@ -310,7 +310,7 @@ Rules:
             <p style={{ fontSize: "0.65rem", color: "var(--muted-foreground)", margin: 0 }}>
               Optimized: {new Date(lastOptimized).toLocaleDateString()}
             </p>
-            <button type="button" onClick={() => setConfirmReoptimize(true)}
+            <button data-testid="seo-reoptimize-trigger" type="button" onClick={() => setConfirmReoptimize(true)}
               style={{
                 display: "flex", alignItems: "center", justifyContent: "center", gap: "0.375rem",
                 padding: "0.4rem 0.75rem", borderRadius: "6px",
@@ -327,7 +327,7 @@ Rules:
               This will overwrite existing SEO fields.
             </p>
             <div style={{ display: "flex", gap: "0.375rem" }}>
-              <button type="button" onClick={aiOptimize} disabled={optimizing}
+              <button data-testid="seo-reoptimize-confirm" type="button" onClick={aiOptimize} disabled={optimizing}
                 style={{
                   display: "flex", alignItems: "center", gap: "0.25rem",
                   padding: "0.3rem 0.6rem", borderRadius: "5px", border: "none",
@@ -337,7 +337,7 @@ Rules:
                 {optimizing ? <Loader2 style={{ width: 10, height: 10, animation: "spin 1s linear infinite" }} /> : null}
                 Yes, re-optimize
               </button>
-              <button type="button" onClick={() => setConfirmReoptimize(false)}
+              <button data-testid="seo-reoptimize-cancel" type="button" onClick={() => setConfirmReoptimize(false)}
                 style={{
                   padding: "0.3rem 0.6rem", borderRadius: "5px",
                   border: "1px solid var(--border)", background: "transparent",
@@ -348,7 +348,7 @@ Rules:
             </div>
           </div>
         ) : (
-          <button type="button" onClick={aiOptimize} disabled={optimizing}
+          <button data-testid="seo-ai-optimize-button" type="button" onClick={aiOptimize} disabled={optimizing}
             style={{
               display: "flex", alignItems: "center", justifyContent: "center", gap: "0.375rem",
               padding: "0.5rem 1rem", borderRadius: "6px", border: "none",
@@ -365,6 +365,7 @@ Rules:
           <p style={lbl}>Rewrite for keyword</p>
           <div style={{ display: "flex", gap: "0.25rem" }}>
             <input
+              data-testid="seo-rewrite-keyword-input"
               type="text"
               value={rewriteKeyword}
               onChange={(e) => setRewriteKeyword(e.target.value)}
@@ -372,7 +373,7 @@ Rules:
               placeholder="Target keyword..."
               style={{ ...input, flex: 1 }}
             />
-            <button type="button" onClick={rewriteForKeyword} disabled={rewriting || !rewriteKeyword.trim()}
+            <button data-testid="seo-rewrite-button" type="button" onClick={rewriteForKeyword} disabled={rewriting || !rewriteKeyword.trim()}
               style={{
                 display: "flex", alignItems: "center", gap: "0.2rem",
                 padding: "0.35rem 0.5rem", borderRadius: "6px", border: "none",
@@ -417,7 +418,7 @@ Rules:
         )}
 
         {/* Advanced */}
-        <button type="button" onClick={() => setShowAdvanced(!showAdvanced)}
+        <button data-testid="seo-advanced-toggle" type="button" onClick={() => setShowAdvanced(!showAdvanced)}
           style={{ display: "flex", alignItems: "center", gap: "0.25rem", background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", fontSize: "0.75rem", padding: 0 }}>
           {showAdvanced ? <ChevronUp style={{ width: 12, height: 12 }} /> : <ChevronDown style={{ width: 12, height: 12 }} />}
           Advanced
@@ -426,7 +427,7 @@ Rules:
           <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
             <div>
               <p style={lbl}>Canonical URL</p>
-              <input type="text" value={canonical} onChange={(e) => setCanonical(e.target.value)}
+              <input data-testid="seo-canonical-url-input" type="text" value={canonical} onChange={(e) => setCanonical(e.target.value)}
                 placeholder="https://... (default: self)" style={input} />
             </div>
             <div>
@@ -491,6 +492,7 @@ Rules:
                           {f.label}{f.required ? " *" : ""}
                         </p>
                         <input
+                          data-testid={`seo-jsonld-field-${f.key}`}
                           type="text"
                           value={jsonLdValues[f.key] ?? ""}
                           placeholder={f.placeholder}
@@ -527,7 +529,7 @@ Rules:
         )}
 
         {/* Google Preview — collapsible */}
-        <button type="button" onClick={() => setShowPreview(!showPreview)}
+        <button data-testid="seo-google-preview-toggle" type="button" onClick={() => setShowPreview(!showPreview)}
           style={{ display: "flex", alignItems: "center", gap: "0.25rem", background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", fontSize: "0.75rem", padding: 0 }}>
           {showPreview ? <ChevronUp style={{ width: 12, height: 12 }} /> : <ChevronDown style={{ width: 12, height: 12 }} />}
           Google preview
@@ -545,7 +547,7 @@ Rules:
         )}
 
         {/* Social preview (Facebook/LinkedIn) — collapsible */}
-        <button type="button" onClick={() => setShowSocialPreview(!showSocialPreview)}
+        <button data-testid="seo-social-preview-toggle" type="button" onClick={() => setShowSocialPreview(!showSocialPreview)}
           style={{ display: "flex", alignItems: "center", gap: "0.25rem", background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", fontSize: "0.75rem", padding: 0 }}>
           {showSocialPreview ? <ChevronUp style={{ width: 12, height: 12 }} /> : <ChevronDown style={{ width: 12, height: 12 }} />}
           Social preview
diff --git a/packages/cms-admin/src/components/editor/structured-array-editor.tsx b/packages/cms-admin/src/components/editor/structured-array-editor.tsx
index e970713a4..dafe30477 100644
--- a/packages/cms-admin/src/components/editor/structured-array-editor.tsx
+++ b/packages/cms-admin/src/components/editor/structured-array-editor.tsx
@@ -132,6 +132,7 @@ export function StructuredArrayEditor({ field, value, onChange, locked, blocksCo
               >
                 {/* Header */}
                 <div
+                  data-testid={`array-item-header-${i}`}
                   onClick={() => toggle(i)}
                   style={{
                     display: "flex",
@@ -148,23 +149,23 @@ export function StructuredArrayEditor({ field, value, onChange, locked, blocksCo
                     {getItemLabel(item, fields, i)}
                   </span>
                   {!locked && (
-                    <span style={{ display: "flex", gap: "0.25rem", alignItems: "center" }} onClick={(e) => e.stopPropagation()}>
-                      <button type="button" disabled={i === 0} onClick={() => moveItem(i, -1)} style={{ background: "none", border: "none", cursor: i === 0 ? "not-allowed" : "pointer", color: "var(--muted-foreground)", padding: "2px", opacity: i === 0 ? 0.3 : 1 }}>
+                    <span data-testid={`array-item-actions-${i}`} style={{ display: "flex", gap: "0.25rem", alignItems: "center" }} onClick={(e) => e.stopPropagation()}>
+                      <button data-testid={`array-move-up-${i}`} type="button" disabled={i === 0} onClick={() => moveItem(i, -1)} style={{ background: "none", border: "none", cursor: i === 0 ? "not-allowed" : "pointer", color: "var(--muted-foreground)", padding: "2px", opacity: i === 0 ? 0.3 : 1 }}>
                         <ArrowUp style={{ width: 14, height: 14 }} />
                       </button>
-                      <button type="button" disabled={i === items.length - 1} onClick={() => moveItem(i, 1)} style={{ background: "none", border: "none", cursor: i === items.length - 1 ? "not-allowed" : "pointer", color: "var(--muted-foreground)", padding: "2px", opacity: i === items.length - 1 ? 0.3 : 1 }}>
+                      <button data-testid={`array-move-down-${i}`} type="button" disabled={i === items.length - 1} onClick={() => moveItem(i, 1)} style={{ background: "none", border: "none", cursor: i === items.length - 1 ? "not-allowed" : "pointer", color: "var(--muted-foreground)", padding: "2px", opacity: i === items.length - 1 ? 0.3 : 1 }}>
                         <ArrowDown style={{ width: 14, height: 14 }} />
                       </button>
                       {confirmRemoveIdx === i ? (
                         <>
                           <span style={{ fontSize: "0.65rem", color: "var(--destructive)", fontWeight: 500, padding: "0 2px" }}>Remove?</span>
-                          <button type="button" onClick={(e) => { e.stopPropagation(); if (confirmTimer.current) clearTimeout(confirmTimer.current); setConfirmRemoveIdx(null); removeItem(i); }}
+                          <button data-testid={`array-confirm-remove-${i}`} type="button" onClick={(e) => { e.stopPropagation(); if (confirmTimer.current) clearTimeout(confirmTimer.current); setConfirmRemoveIdx(null); removeItem(i); }}
                             style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "none", background: "var(--destructive)", color: "#fff", cursor: "pointer", lineHeight: 1 }}>Yes</button>
-                          <button type="button" onClick={(e) => { e.stopPropagation(); if (confirmTimer.current) clearTimeout(confirmTimer.current); setConfirmRemoveIdx(null); }}
+                          <button data-testid={`array-cancel-remove-${i}`} type="button" onClick={(e) => { e.stopPropagation(); if (confirmTimer.current) clearTimeout(confirmTimer.current); setConfirmRemoveIdx(null); }}
                             style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "1px solid var(--border)", background: "transparent", color: "var(--foreground)", cursor: "pointer", lineHeight: 1 }}>No</button>
                         </>
                       ) : (
-                        <button type="button" onClick={(e) => { e.stopPropagation(); if (confirmTimer.current) clearTimeout(confirmTimer.current); setConfirmRemoveIdx(i); confirmTimer.current = setTimeout(() => setConfirmRemoveIdx(null), 3000); }}
+                        <button data-testid={`array-remove-${i}`} type="button" onClick={(e) => { e.stopPropagation(); if (confirmTimer.current) clearTimeout(confirmTimer.current); setConfirmRemoveIdx(i); confirmTimer.current = setTimeout(() => setConfirmRemoveIdx(null), 3000); }}
                           style={{ width: "18px", height: "18px", borderRadius: "50%", border: "none", background: "transparent", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--muted-foreground)", fontSize: "0.9rem", lineHeight: 1, flexShrink: 0 }} title="Remove item" className="hover:text-destructive transition-colors">×</button>
                       )}
                     </span>
@@ -194,6 +195,7 @@ export function StructuredArrayEditor({ field, value, onChange, locked, blocksCo
           })}
           {!locked && (
             <button
+              data-testid="array-add-item"
               type="button"
               onClick={addItem}
               style={{
diff --git a/packages/cms-admin/src/components/editor/structured-object-editor.tsx b/packages/cms-admin/src/components/editor/structured-object-editor.tsx
index 4342c385e..393f025d1 100644
--- a/packages/cms-admin/src/components/editor/structured-object-editor.tsx
+++ b/packages/cms-admin/src/components/editor/structured-object-editor.tsx
@@ -35,6 +35,7 @@ export function StructuredObjectEditor({ field, value, onChange, locked, blocksC
   return (
     <div style={{ border: "1px solid var(--border)", borderRadius: "8px", background: "var(--card)", overflow: "hidden" }}>
       <div
+        data-testid={`object-editor-toggle-${field.name}`}
         onClick={() => setCollapsed((c) => !c)}
         style={{
           display: "flex", alignItems: "center", gap: "0.5rem",
diff --git a/packages/cms-admin/src/components/editor/tags-input.tsx b/packages/cms-admin/src/components/editor/tags-input.tsx
index 6a9fbd2b3..916fca0ee 100644
--- a/packages/cms-admin/src/components/editor/tags-input.tsx
+++ b/packages/cms-admin/src/components/editor/tags-input.tsx
@@ -27,6 +27,7 @@ export function TagsInput({ value, onChange, disabled }: Props) {
 
   return (
     <div
+      data-testid="tags-input-container"
       onClick={() => inputRef.current?.focus()}
       className={cn(
         "flex flex-wrap gap-2 p-2 rounded-md bg-input border border-border focus-within:ring-1 focus-within:ring-ring transition-colors min-h-[42px] cursor-text",
@@ -41,6 +42,7 @@ export function TagsInput({ value, onChange, disabled }: Props) {
           #{tag}
           {!disabled && (
             <button
+              data-testid="tags-remove-button"
               onClick={(e) => {
                 e.stopPropagation();
                 removeTag(tag);
@@ -54,6 +56,7 @@ export function TagsInput({ value, onChange, disabled }: Props) {
       ))}
       {!disabled && (
         <input
+          data-testid="tags-input"
           ref={inputRef}
           value={input}
           onChange={(e) => setInput(e.target.value)}
diff --git a/packages/cms-admin/src/components/favorite-toggle.tsx b/packages/cms-admin/src/components/favorite-toggle.tsx
index ad92f31ce..36b757106 100644
--- a/packages/cms-admin/src/components/favorite-toggle.tsx
+++ b/packages/cms-admin/src/components/favorite-toggle.tsx
@@ -18,6 +18,7 @@ export function FavoriteToggle({ type, label, path, icon, collection, slug, size
 
   return (
     <button
+      data-testid={`favorite-toggle-${slug}`}
       type="button"
       onClick={() => toggle({ type, label, path, icon, collection, slug })}
       title={active ? "Remove from favorites" : "Add to favorites"}
diff --git a/packages/cms-admin/src/components/favorites-list.tsx b/packages/cms-admin/src/components/favorites-list.tsx
index 54e9167d1..52bb6ca20 100644
--- a/packages/cms-admin/src/components/favorites-list.tsx
+++ b/packages/cms-admin/src/components/favorites-list.tsx
@@ -90,6 +90,7 @@ export function FavoritesList() {
     return (
       <th style={{ ...thStyle, width }}>
         <button
+          data-testid={`favorites-sort-${sk}`}
           type="button"
           onClick={() => toggleSort(sk)}
           style={{ display: "flex", alignItems: "center", gap: "0.25rem", background: "none", border: "none", cursor: "pointer", color: active ? "var(--foreground)" : "var(--muted-foreground)", fontSize: "0.72rem", fontWeight: active ? 600 : 500, padding: 0 }}
@@ -119,6 +120,7 @@ export function FavoritesList() {
         <div style={{ position: "relative", flex: "1", minWidth: "180px" }}>
           <Search style={{ position: "absolute", left: "0.625rem", top: "50%", transform: "translateY(-50%)", width: "0.85rem", height: "0.85rem", color: "var(--muted-foreground)" }} />
           <input
+            data-testid="favorites-search-input"
             type="text"
             value={search}
             onChange={(e) => setSearch(e.target.value)}
@@ -134,6 +136,7 @@ export function FavoritesList() {
         {/* Type filter */}
         <div style={{ display: "flex", gap: "0.25rem", alignItems: "center" }}>
           <button
+            data-testid="favorites-filter-all"
             type="button"
             onClick={() => setTypeFilter("all")}
             style={{
@@ -148,6 +151,7 @@ export function FavoritesList() {
           </button>
           {types.map((t) => (
             <button
+              data-testid={`favorites-filter-${t}`}
               key={t}
               type="button"
               onClick={() => setTypeFilter(t)}
@@ -168,6 +172,7 @@ export function FavoritesList() {
         <div style={{ display: "flex", border: "1px solid var(--border)", borderRadius: "6px", overflow: "hidden" }}>
           {(["grid", "list"] as ViewMode[]).map((v) => (
             <button
+              data-testid={`favorites-view-toggle-${v}`}
               key={v}
               type="button"
               onClick={() => setView(v)}
@@ -242,6 +247,7 @@ export function FavoritesList() {
                     </td>
                     <td style={{ padding: "0.625rem 0.5rem", whiteSpace: "nowrap", textAlign: "right" }}>
                       <button
+                        data-testid={`favorites-remove-${fav.id}`}
                         type="button"
                         onClick={() => remove(fav.path)}
                         title="Remove from favorites"
@@ -338,6 +344,7 @@ export function FavoritesList() {
                   </div>
                 </Link>
                 <button
+                  data-testid={`favorites-remove-grid-${fav.id}`}
                   type="button"
                   onClick={(e) => { e.preventDefault(); e.stopPropagation(); remove(fav.path); }}
                   title="Remove from favorites"
diff --git a/packages/cms-admin/src/components/gate-screen.tsx b/packages/cms-admin/src/components/gate-screen.tsx
index 38dcfc7da..626e74720 100644
--- a/packages/cms-admin/src/components/gate-screen.tsx
+++ b/packages/cms-admin/src/components/gate-screen.tsx
@@ -77,6 +77,7 @@ export function NoAccessGate() {
           Ask an administrator to invite you.
         </p>
         <a
+          data-testid="gate-sign-out-link"
           href="/api/auth/logout"
           style={{
             fontSize: "0.8rem",
@@ -104,6 +105,7 @@ export function ConnectGitHubGate({ message, showButton = true }: { message?: st
         </p>
         {showButton && (
           <a
+            data-testid="gate-github-connect-link"
             href="/api/auth/github"
             style={{
               display: "inline-flex",
@@ -153,6 +155,7 @@ export function GitHubErrorGate({ message }: { message: string }) {
         </p>
         <div style={{ display: "flex", gap: "0.75rem", justifyContent: "center" }}>
           <button
+            data-testid="gate-switch-local-button"
             type="button"
             onClick={() => switchSite("default")}
             style={{
@@ -164,6 +167,7 @@ export function GitHubErrorGate({ message }: { message: string }) {
             Switch to local site
           </button>
           <button
+            data-testid="gate-retry-button"
             type="button"
             onClick={() => window.location.reload()}
             style={{
@@ -215,6 +219,7 @@ export function SiteConfigErrorGate({ siteName, errors }: { siteName: string; er
           {errors}
         </pre>
         <button
+          data-testid="gate-switch-another-site-button"
           type="button"
           onClick={switchSite}
           style={{
diff --git a/packages/cms-admin/src/components/generate-document-button.tsx b/packages/cms-admin/src/components/generate-document-button.tsx
index 90f59c824..2d34409eb 100644
--- a/packages/cms-admin/src/components/generate-document-button.tsx
+++ b/packages/cms-admin/src/components/generate-document-button.tsx
@@ -29,6 +29,7 @@ export function GenerateDocumentButton({ collection, collectionLabel }: Props) {
   return (
     <>
       <button
+        data-testid="generate-document-button"
         type="button"
         onClick={() => setOpen(true)}
         className="flex items-center gap-1.5 text-sm px-3 py-1.5 rounded-md border border-border hover:border-primary/40 hover:bg-secondary transition-all text-muted-foreground"
diff --git a/packages/cms-admin/src/components/generate-document-dialog.tsx b/packages/cms-admin/src/components/generate-document-dialog.tsx
index 7c0727fed..9320cbaa7 100644
--- a/packages/cms-admin/src/components/generate-document-dialog.tsx
+++ b/packages/cms-admin/src/components/generate-document-dialog.tsx
@@ -120,6 +120,7 @@ export function GenerateDocumentDialog({
 
   return (
     <div
+      data-testid="generate-dialog-backdrop"
       style={{
         position: "fixed", inset: 0, zIndex: 100,
         display: "flex", alignItems: "center", justifyContent: "center",
@@ -128,6 +129,7 @@ export function GenerateDocumentDialog({
       onClick={onClose}
     >
       <div
+        data-testid="generate-dialog-content"
         style={{
           background: "var(--card)", border: "1px solid var(--border)",
           borderRadius: "12px", padding: "1.5rem", maxWidth: "500px", width: "90%",
@@ -141,6 +143,7 @@ export function GenerateDocumentDialog({
             {existingData ? "Generate content" : `Generate ${collectionLabel}`}
           </span>
           <button
+            data-testid="generate-dialog-header-close-button"
             type="button"
             onClick={onClose}
             style={{ marginLeft: "auto", background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", padding: "0.25rem" }}
@@ -152,6 +155,7 @@ export function GenerateDocumentDialog({
         {/* Prompt input */}
         {!generating && (
           <textarea
+            data-testid="generate-dialog-prompt-textarea"
             ref={inputRef}
             value={prompt}
             onChange={(e) => setPrompt(e.target.value)}
@@ -223,6 +227,7 @@ export function GenerateDocumentDialog({
         {!generating && (
           <div style={{ display: "flex", justifyContent: "flex-end", gap: "0.5rem", marginTop: "1rem" }}>
             <button
+              data-testid="generate-dialog-cancel-button"
               type="button"
               onClick={onClose}
               style={{
@@ -234,6 +239,7 @@ export function GenerateDocumentDialog({
               Cancel
             </button>
             <button
+              data-testid="generate-dialog-generate-button"
               type="button"
               onClick={handleGenerate}
               disabled={!prompt.trim()}
diff --git a/packages/cms-admin/src/components/help-drawer.tsx b/packages/cms-admin/src/components/help-drawer.tsx
index 12f2aba40..27f695d65 100644
--- a/packages/cms-admin/src/components/help-drawer.tsx
+++ b/packages/cms-admin/src/components/help-drawer.tsx
@@ -104,6 +104,7 @@ export function HelpDrawer({ open, onClose, initialPage = "help" }: { open: bool
           }}>
             <span style={{ fontWeight: 600, fontSize: "0.875rem" }}>Help & Support</span>
             <button
+              data-testid="help-close-button"
               type="button"
               onClick={onClose}
               style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", padding: "0.25rem" }}
@@ -118,6 +119,7 @@ export function HelpDrawer({ open, onClose, initialPage = "help" }: { open: bool
               { id: "ai-tools" as const, label: "AI Chat", icon: <Bot style={{ width: "0.8rem", height: "0.8rem" }} /> },
             ]).map((tab) => (
               <button
+                data-testid={`help-tab-${tab.id}`}
                 key={tab.id}
                 type="button"
                 onClick={() => setPage(tab.id)}
@@ -173,6 +175,7 @@ function HelpPage() {
         <div style={{ borderRadius: "10px", border: "1px solid var(--border)", overflow: "hidden" }}>
           {HELP_LINKS.map((link, i) => (
             <a
+              data-testid={`help-link-${link.label.toLowerCase().replace(" ", "-")}`}
               key={link.label}
               href={link.href}
               target="_blank"
@@ -200,6 +203,7 @@ function HelpPage() {
           Join our Discord to get support, report bugs, or discuss features. Many questions are answered in minutes.
         </p>
         <a
+          data-testid="help-discord-link"
           href="https://discord.gg/jtjnEkVX8D"
           target="_blank"
           rel="noopener noreferrer"
@@ -444,6 +448,7 @@ export function HelpButton() {
   return (
     <>
       <button
+        data-testid="help-button"
         type="button"
         onClick={() => { setPage("help"); setOpen(true); }}
         style={{
diff --git a/packages/cms-admin/src/components/import-wizard.tsx b/packages/cms-admin/src/components/import-wizard.tsx
index 93ef64ecd..415a1974e 100644
--- a/packages/cms-admin/src/components/import-wizard.tsx
+++ b/packages/cms-admin/src/components/import-wizard.tsx
@@ -188,7 +188,7 @@ export function ImportWizard({
   const validRows = previewRows.filter((r) => r.valid).length;
 
   return (
-    <div style={{
+    <div data-testid="import-wizard-overlay" style={{
       position: "fixed", inset: 0, zIndex: 1000,
       display: "flex", alignItems: "center", justifyContent: "center",
       background: "rgba(0,0,0,0.5)",
@@ -212,7 +212,7 @@ export function ImportWizard({
               Step {step} of 4
             </span>
           </div>
-          <button onClick={onClose} style={{
+          <button data-testid="import-close-button" onClick={onClose} style={{
             background: "none", border: "none", cursor: "pointer",
             color: "var(--muted-foreground)", padding: "4px",
           }}>
@@ -236,6 +236,7 @@ export function ImportWizard({
           {step === 1 && (
             <div>
               <div
+                data-testid="import-upload-drop-zone"
                 onClick={() => fileRef.current?.click()}
                 onDragEnter={(e) => { e.preventDefault(); dragCounter.current++; setDragOver(true); }}
                 onDragLeave={(e) => { e.preventDefault(); dragCounter.current--; if (dragCounter.current === 0) setDragOver(false); }}
@@ -273,6 +274,7 @@ export function ImportWizard({
                 </div>
               </div>
               <input
+                data-testid="import-file-input"
                 ref={fileRef}
                 type="file"
                 accept=".csv,.json,.md,.markdown,.tsv"
@@ -282,6 +284,7 @@ export function ImportWizard({
               />
               <div style={{ display: "flex", justifyContent: "flex-end", gap: "0.5rem" }}>
                 <button
+                  data-testid="import-upload-button"
                   onClick={handleUpload}
                   disabled={loading || !hasFile}
                   style={btnPrimary(loading || !hasFile)}
@@ -323,7 +326,7 @@ export function ImportWizard({
                       onChange={(v) => updateMapping(i, { transform: v })}
                       style={{ width: 130, fontSize: "0.72rem" }}
                     />
-                    <button onClick={() => removeMapping(i)} style={{
+                    <button data-testid="import-mapping-remove-button" onClick={() => removeMapping(i)} style={{
                       background: "none", border: "none", cursor: "pointer",
                       color: "var(--muted-foreground)", padding: "2px",
                     }}>
@@ -333,7 +336,7 @@ export function ImportWizard({
                 ))}
               </div>
 
-              <button onClick={addMapping} style={{
+              <button data-testid="import-add-mapping-button" onClick={addMapping} style={{
                 fontSize: "0.72rem", color: "var(--muted-foreground)",
                 background: "none", border: "1px dashed var(--border)",
                 borderRadius: 6, padding: "0.3rem 0.6rem", cursor: "pointer",
@@ -343,10 +346,10 @@ export function ImportWizard({
               </button>
 
               <div style={{ display: "flex", justifyContent: "space-between" }}>
-                <button onClick={() => setStep(1)} style={btnSecondary()}>
+                <button data-testid="import-back-button" onClick={() => setStep(1)} style={btnSecondary()}>
                   <ArrowLeft style={{ width: 14, height: 14 }} /> Back
                 </button>
-                <button onClick={handlePreview} disabled={loading || mappings.length === 0} style={btnPrimary(loading)}>
+                <button data-testid="import-preview-button" onClick={handlePreview} disabled={loading || mappings.length === 0} style={btnPrimary(loading)}>
                   {loading ? "Previewing..." : "Preview"} <ArrowRight style={{ width: 14, height: 14 }} />
                 </button>
               </div>
@@ -404,10 +407,11 @@ export function ImportWizard({
               </div>
 
               <div style={{ display: "flex", justifyContent: "space-between" }}>
-                <button onClick={() => setStep(2)} style={btnSecondary()}>
+                <button data-testid="import-preview-back-button" onClick={() => setStep(2)} style={btnSecondary()}>
                   <ArrowLeft style={{ width: 14, height: 14 }} /> Back
                 </button>
                 <button
+                  data-testid="import-execute-button"
                   onClick={handleExecute}
                   disabled={loading || validRows === 0}
                   style={btnPrimary(loading)}
@@ -445,7 +449,7 @@ export function ImportWizard({
               )}
 
               <div style={{ display: "flex", justifyContent: "flex-end" }}>
-                <button onClick={() => { onComplete(); onClose(); }} style={btnPrimary(false)}>
+                <button data-testid="import-done-button" onClick={() => { onComplete(); onClose(); }} style={btnPrimary(false)}>
                   Done
                 </button>
               </div>
diff --git a/packages/cms-admin/src/components/media/ai-metadata-popover.tsx b/packages/cms-admin/src/components/media/ai-metadata-popover.tsx
index a9f0913e6..d38e9120d 100644
--- a/packages/cms-admin/src/components/media/ai-metadata-popover.tsx
+++ b/packages/cms-admin/src/components/media/ai-metadata-popover.tsx
@@ -33,6 +33,7 @@ function CopyBtn({ text, label }: { text: string; label: string }) {
   const [copied, setCopied] = useState(false);
   return (
     <button
+      data-testid={`ai-metadata-copy-${label.toLowerCase().replace(/\s+/g, '-')}`}
       type="button"
       title={`Copy ${label}`}
       onClick={() => {
@@ -135,6 +136,7 @@ export function AIMetadataPopover({ imageUrl, variant = "button", onAnalyzed, on
       {/* Trigger button */}
       {isCtx ? (
         <button
+          data-testid="ai-metadata-trigger-ctx"
           type="button"
           title="AI metadata"
           onClick={() => setOpen((o) => !o)}
@@ -150,6 +152,7 @@ export function AIMetadataPopover({ imageUrl, variant = "button", onAnalyzed, on
         </button>
       ) : (
         <button
+          data-testid="ai-metadata-trigger-button"
           type="button"
           onClick={() => setOpen((o) => !o)}
           style={{
@@ -191,6 +194,7 @@ export function AIMetadataPopover({ imageUrl, variant = "button", onAnalyzed, on
             </span>
             {meta && (
               <button
+                data-testid="ai-metadata-reanalyze"
                 type="button"
                 title="Re-analyze"
                 disabled={analyzing}
@@ -224,6 +228,7 @@ export function AIMetadataPopover({ imageUrl, variant = "button", onAnalyzed, on
                   No AI analysis yet.
                 </p>
                 <button
+                  data-testid="ai-metadata-analyze"
                   type="button"
                   onClick={runAnalysis}
                   disabled={analyzing}
@@ -267,6 +272,7 @@ export function AIMetadataPopover({ imageUrl, variant = "button", onAnalyzed, on
                   <div style={{ display: "flex", gap: "4px", flexWrap: "wrap" }}>
                     {locales.map((l) => (
                       <button
+                        data-testid={`ai-metadata-locale-${l}`}
                         key={l}
                         type="button"
                         onClick={() => setActiveLocale(l)}
@@ -312,6 +318,7 @@ export function AIMetadataPopover({ imageUrl, variant = "button", onAnalyzed, on
                           </span>
                         ) : (
                           <button
+                            data-testid="ai-metadata-apply-alt"
                             type="button"
                             title="Apply alt-text to image"
                             onClick={() => { onApplyAlt(displayAlt); setApplied(true); }}
diff --git a/packages/cms-admin/src/components/onboarding/spotlight-overlay.tsx b/packages/cms-admin/src/components/onboarding/spotlight-overlay.tsx
index d42e7a04d..4f89e4d57 100644
--- a/packages/cms-admin/src/components/onboarding/spotlight-overlay.tsx
+++ b/packages/cms-admin/src/components/onboarding/spotlight-overlay.tsx
@@ -46,6 +46,7 @@ export function SpotlightOverlay({ targetEl, padding = 8, onClick }: SpotlightOv
 
   return (
     <div
+      data-testid="spotlight-overlay"
       onClick={onClick}
       style={{
         position: "fixed",
diff --git a/packages/cms-admin/src/components/onboarding/tour-tooltip.tsx b/packages/cms-admin/src/components/onboarding/tour-tooltip.tsx
index b23000a61..5f5ffde6d 100644
--- a/packages/cms-admin/src/components/onboarding/tour-tooltip.tsx
+++ b/packages/cms-admin/src/components/onboarding/tour-tooltip.tsx
@@ -111,6 +111,7 @@ export function TourTooltip({
       >
         {/* Close button */}
         <button
+          data-testid="tour-tooltip-close-button"
           onClick={onSkip}
           style={{
             position: "absolute",
@@ -173,6 +174,7 @@ export function TourTooltip({
           </span>
 
           <button
+            data-testid="tour-tooltip-action-button"
             onClick={onNext}
             style={{
               background: "#F7BB2E",
diff --git a/packages/cms-admin/src/components/push-subscription-toggle.tsx b/packages/cms-admin/src/components/push-subscription-toggle.tsx
index be862da3e..2d288ce63 100644
--- a/packages/cms-admin/src/components/push-subscription-toggle.tsx
+++ b/packages/cms-admin/src/components/push-subscription-toggle.tsx
@@ -161,6 +161,7 @@ export function PushSubscriptionToggle(): React.ReactNode {
           {state === "enabled" && <span style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", background: "color-mix(in srgb, var(--primary) 20%, transparent)", color: "var(--primary)", borderRadius: "999px" }}>ON</span>}
         </div>
         <button
+          data-testid="push-notification-toggle"
           onClick={state === "enabled" ? disable : enable}
           disabled={state === "loading"}
           style={{
diff --git a/packages/cms-admin/src/components/schema-drift-banner.tsx b/packages/cms-admin/src/components/schema-drift-banner.tsx
index 3cc3298f7..b4dbb5bcb 100644
--- a/packages/cms-admin/src/components/schema-drift-banner.tsx
+++ b/packages/cms-admin/src/components/schema-drift-banner.tsx
@@ -139,6 +139,7 @@ export function SchemaDriftBanner({ collection, collectionName, fields }: Props)
           {/* Primary: Add to schema */}
           {!confirmAdd && !confirmRemove && (
             <button
+              data-testid="schema-drift-add-button"
               type="button"
               onClick={() => setConfirmAdd(true)}
               style={{
@@ -159,6 +160,7 @@ export function SchemaDriftBanner({ collection, collectionName, fields }: Props)
                 Add {fields.length} field{fields.length > 1 ? "s" : ""} to cms.config.ts?
               </span>
               <button
+                data-testid="schema-drift-confirm-add-yes"
                 onClick={handleAdd}
                 disabled={adding}
                 style={{
@@ -171,6 +173,7 @@ export function SchemaDriftBanner({ collection, collectionName, fields }: Props)
                 Yes
               </button>
               <button
+                data-testid="schema-drift-confirm-add-no"
                 onClick={() => setConfirmAdd(false)}
                 disabled={adding}
                 style={{
@@ -187,6 +190,7 @@ export function SchemaDriftBanner({ collection, collectionName, fields }: Props)
           {/* Secondary: Remove from content (only visible when not in confirm flow) */}
           {!confirmAdd && !confirmRemove && (
             <button
+              data-testid="schema-drift-remove-button"
               type="button"
               onClick={() => setConfirmRemove(true)}
               style={{
@@ -208,6 +212,7 @@ export function SchemaDriftBanner({ collection, collectionName, fields }: Props)
                 Remove {fields.length} field{fields.length > 1 ? "s" : ""} from all documents?
               </span>
               <button
+                data-testid="schema-drift-confirm-remove-yes"
                 onClick={handleRemove}
                 disabled={removing}
                 style={{
@@ -220,6 +225,7 @@ export function SchemaDriftBanner({ collection, collectionName, fields }: Props)
                 Yes
               </button>
               <button
+                data-testid="schema-drift-confirm-remove-no"
                 onClick={() => setConfirmRemove(false)}
                 disabled={removing}
                 style={{
@@ -235,6 +241,7 @@ export function SchemaDriftBanner({ collection, collectionName, fields }: Props)
         </div>
       </div>
       <button
+        data-testid="schema-drift-dismiss"
         type="button"
         onClick={() => { sessionStorage.setItem(storageKey, "1"); setDismissed(true); }}
         title="Dismiss for this session"
diff --git a/packages/cms-admin/src/components/schema/collection-schema-editor.tsx b/packages/cms-admin/src/components/schema/collection-schema-editor.tsx
index 357bc1b1f..05f95f7b8 100644
--- a/packages/cms-admin/src/components/schema/collection-schema-editor.tsx
+++ b/packages/cms-admin/src/components/schema/collection-schema-editor.tsx
@@ -147,6 +147,7 @@ export function CollectionSchemaEditor({ collection, isNew }: Props) {
               <p className="text-xs text-muted-foreground">Allow translation of documents in this collection</p>
             </div>
             <button
+              data-testid="schema-translatable-toggle"
               type="button"
               onClick={() => setTranslatable(!translatable)}
               style={{
@@ -168,6 +169,7 @@ export function CollectionSchemaEditor({ collection, isNew }: Props) {
               <p className="text-xs text-muted-foreground">Documents have individual pages on the site</p>
             </div>
             <button
+              data-testid="schema-previewable-toggle"
               type="button"
               onClick={() => setPreviewable(!previewable)}
               style={{
@@ -252,6 +254,7 @@ export function CollectionSchemaEditor({ collection, isNew }: Props) {
       {/* Delete collection confirmation dialog */}
       {deleteOpen && (
         <div
+          data-testid="schema-delete-overlay"
           style={{ position: "fixed", inset: 0, zIndex: 100, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(0,0,0,0.6)", backdropFilter: "blur(4px)" }}
           onClick={(e) => { if (e.target === e.currentTarget && !deleting) setDeleteOpen(false); }}
         >
@@ -402,6 +405,7 @@ function FieldRow({
 
       {/* Delete */}
       <button
+        data-testid={`field-remove-${index}`}
         onClick={() => {
           if (confirmRemove) {
             if (confirmTimer.current) clearTimeout(confirmTimer.current);
diff --git a/packages/cms-admin/src/components/settings/access-tokens-panel.tsx b/packages/cms-admin/src/components/settings/access-tokens-panel.tsx
index 78af72dff..00ec07aa9 100644
--- a/packages/cms-admin/src/components/settings/access-tokens-panel.tsx
+++ b/packages/cms-admin/src/components/settings/access-tokens-panel.tsx
@@ -256,13 +256,13 @@ export function AccessTokensPanel() {
             }}>
               {newToken}
             </code>
-            <button type="button"
+            <button data-testid="token-copy-button" type="button"
               onClick={() => { navigator.clipboard.writeText(newToken); }}
               style={{ ...inputStyle, background: "var(--primary)", color: "#0D0D0D", fontWeight: 600, cursor: "pointer", border: "none" }}>
               Copy
             </button>
           </div>
-          <button type="button" onClick={() => setNewToken(null)}
+          <button data-testid="token-dismiss-button" type="button" onClick={() => setNewToken(null)}
             style={{ fontSize: "0.7rem", color: "var(--muted-foreground)", background: "none", border: "none", cursor: "pointer", alignSelf: "flex-start" }}>
             Dismiss
           </button>
@@ -272,11 +272,11 @@ export function AccessTokensPanel() {
       {/* Create form toggle */}
       {!showForm ? (
         <div style={{ display: "flex", gap: "0.5rem" }}>
-          <button type="button" onClick={() => setShowForm(true)}
+          <button data-testid="token-create-custom-button" type="button" onClick={() => setShowForm(true)}
             style={{ ...inputStyle, background: "var(--primary)", color: "#0D0D0D", fontWeight: 600, cursor: "pointer", border: "none" }}>
             + Create custom token
           </button>
-          <button type="button" onClick={() => { resetForm(); setName("Admin token"); handleCreate("admin"); }}
+          <button data-testid="token-quick-admin-button" type="button" onClick={() => { resetForm(); setName("Admin token"); handleCreate("admin"); }}
             style={{ ...inputStyle, cursor: "pointer" }}>
             Quick: admin token
           </button>
@@ -288,7 +288,7 @@ export function AccessTokensPanel() {
         }}>
           <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
             <h3 style={{ fontSize: "1rem", fontWeight: 600, margin: 0 }}>Create custom token</h3>
-            <button type="button" onClick={() => { setShowForm(false); resetForm(); }}
+            <button data-testid="token-form-cancel-button" type="button" onClick={() => { setShowForm(false); resetForm(); }}
               style={{ background: "none", border: "none", color: "var(--muted-foreground)", cursor: "pointer", fontSize: "0.8rem" }}>
               ← Cancel
             </button>
@@ -297,21 +297,21 @@ export function AccessTokensPanel() {
           {/* Presets */}
           <div style={{ display: "flex", gap: "0.4rem", flexWrap: "wrap" }}>
             <span style={{ fontSize: "0.7rem", color: "var(--muted-foreground)", alignSelf: "center" }}>Presets:</span>
-            <button type="button" onClick={() => applyPreset("admin")} style={presetBtn}>Admin (full)</button>
-            <button type="button" onClick={() => applyPreset("deploy-bot")} style={presetBtn}>Site deploy bot</button>
-            <button type="button" onClick={() => applyPreset("reader")} style={presetBtn}>Read everything</button>
+            <button data-testid="token-preset-admin" type="button" onClick={() => applyPreset("admin")} style={presetBtn}>Admin (full)</button>
+            <button data-testid="token-preset-deploy-bot" type="button" onClick={() => applyPreset("deploy-bot")} style={presetBtn}>Site deploy bot</button>
+            <button data-testid="token-preset-reader" type="button" onClick={() => applyPreset("reader")} style={presetBtn}>Read everything</button>
           </div>
 
           {/* Name + Description */}
           <div>
             <div style={labelStyle}>Token name</div>
-            <input type="text" value={name} onChange={(e) => setName(e.target.value)}
+            <input data-testid="token-name-input" type="text" value={name} onChange={(e) => setName(e.target.value)}
               placeholder="e.g. Fysiodk Deploy Bot"
               style={{ ...inputStyle, width: "100%" }} />
           </div>
           <div>
             <div style={labelStyle}>Description <span style={{ color: "var(--muted-foreground)", fontWeight: 400 }}>(optional — helps locate this token later)</span></div>
-            <input type="text" value={description} onChange={(e) => setDescription(e.target.value)}
+            <input data-testid="token-description-input" type="text" value={description} onChange={(e) => setDescription(e.target.value)}
               placeholder="e.g. CI job running from fysiodk-ci.example.com, owned by ops@"
               style={{ ...inputStyle, width: "100%" }} />
           </div>
@@ -352,11 +352,11 @@ export function AccessTokensPanel() {
                     }
                   />
                 </div>
-                <button type="button" onClick={() => setPermRows(permRows.filter((_, idx) => idx !== i))}
+                <button data-testid={`token-perm-remove-${i}`} type="button" onClick={() => setPermRows(permRows.filter((_, idx) => idx !== i))}
                   style={smallIconBtn} disabled={permRows.length === 1}>×</button>
               </div>
             ))}
-            <button type="button" onClick={() => setPermRows([...permRows, { scope: "Site", category: "Content", action: "Read" }])}
+            <button data-testid="token-perm-add-button" type="button" onClick={() => setPermRows([...permRows, { scope: "Site", category: "Content", action: "Read" }])}
               style={addBtn}>+ Add permission</button>
           </div>
 
@@ -402,7 +402,7 @@ export function AccessTokensPanel() {
                     />
                   )}
                   {f.scope === "admin-area" && (
-                    <input type="text" value={Array.isArray(f.targets) ? f.targets.join(", ") : ""}
+                    <input data-testid={`token-adminarea-targets-${i}`} type="text" value={Array.isArray(f.targets) ? f.targets.join(", ") : ""}
                       placeholder="e.g. deploy, tokens, team"
                       onChange={(e) => setResourceFilters(resourceFilters.map((r, idx) => idx === i ? { ...r, targets: e.target.value.split(",").map((t) => t.trim()).filter(Boolean) } : r))}
                       style={{ ...inputStyle, flex: 1 }} />
@@ -411,11 +411,11 @@ export function AccessTokensPanel() {
                     <span style={{ fontSize: "0.72rem", color: "var(--muted-foreground)", alignSelf: "center" }}>(matches org:settings)</span>
                   )}
                 </div>
-                <button type="button" onClick={() => setResourceFilters(resourceFilters.filter((_, idx) => idx !== i))}
+                <button data-testid={`token-resource-remove-${i}`} type="button" onClick={() => setResourceFilters(resourceFilters.filter((_, idx) => idx !== i))}
                   style={smallIconBtn}>×</button>
               </div>
             ))}
-            <button type="button" onClick={() => setResourceFilters([...resourceFilters, { scope: "site", effect: "include", targets: [] }])}
+            <button data-testid="token-resource-add-button" type="button" onClick={() => setResourceFilters([...resourceFilters, { scope: "site", effect: "include", targets: [] }])}
               style={addBtn}>+ Add resource filter</button>
           </div>
 
@@ -437,14 +437,14 @@ export function AccessTokensPanel() {
                     }
                   />
                 </div>
-                <input type="text" value={f.cidrs.join(", ")} placeholder="e.g. 203.0.113.4/32"
+                <input data-testid={`token-ip-cidrs-${i}`} type="text" value={f.cidrs.join(", ")} placeholder="e.g. 203.0.113.4/32"
                   onChange={(e) => setIpFilters(ipFilters.map((x, idx) => idx === i ? { ...x, cidrs: e.target.value.split(",").map((c) => c.trim()).filter(Boolean) } : x))}
                   style={{ ...inputStyle, flex: 1 }} />
-                <button type="button" onClick={() => setIpFilters(ipFilters.filter((_, idx) => idx !== i))}
+                <button data-testid={`token-ip-remove-${i}`} type="button" onClick={() => setIpFilters(ipFilters.filter((_, idx) => idx !== i))}
                   style={smallIconBtn}>×</button>
               </div>
             ))}
-            <button type="button" onClick={() => setIpFilters([...ipFilters, { op: "in", cidrs: [] }])}
+            <button data-testid="token-ip-add-button" type="button" onClick={() => setIpFilters([...ipFilters, { op: "in", cidrs: [] }])}
               style={addBtn}>+ Add IP filter</button>
           </div>
 
@@ -476,9 +476,9 @@ export function AccessTokensPanel() {
 
           {/* Submit */}
           <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end" }}>
-            <button type="button" onClick={() => { setShowForm(false); resetForm(); }}
+            <button data-testid="token-form-cancel-submit" type="button" onClick={() => { setShowForm(false); resetForm(); }}
               style={{ ...inputStyle, cursor: "pointer" }}>Cancel</button>
-            <button type="button" disabled={creating || !name.trim() || compilePermissions(null).length === 0}
+            <button data-testid="token-create-submit" type="button" disabled={creating || !name.trim() || compilePermissions(null).length === 0}
               onClick={() => handleCreate(null)}
               style={{ ...inputStyle, background: "var(--primary)", color: "#0D0D0D", fontWeight: 600, cursor: "pointer", border: "none", opacity: creating ? 0.6 : 1 }}>
               {creating ? "Creating…" : "Create token"}
@@ -546,17 +546,17 @@ export function AccessTokensPanel() {
                 {confirmDelete === t.id ? (
                   <span style={{ display: "flex", gap: "0.2rem", alignItems: "center" }}>
                     <span style={{ fontSize: "0.65rem", color: "var(--destructive)", fontWeight: 500, padding: "0 2px" }}>Revoke?</span>
-                    <button onClick={() => handleDelete(t.id)}
+                    <button data-testid={`token-revoke-confirm-${t.id}`} onClick={() => handleDelete(t.id)}
                       style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px",
                         border: "none", background: "var(--destructive)", color: "#fff",
                         cursor: "pointer", lineHeight: 1 }}>Yes</button>
-                    <button onClick={() => setConfirmDelete(null)}
+                    <button data-testid={`token-revoke-cancel-${t.id}`} onClick={() => setConfirmDelete(null)}
                       style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px",
                         border: "1px solid var(--border)", background: "transparent",
                         color: "var(--foreground)", cursor: "pointer", lineHeight: 1 }}>No</button>
                   </span>
                 ) : (
-                  <button type="button" onClick={() => setConfirmDelete(t.id)}
+                  <button data-testid={`token-revoke-button-${t.id}`} type="button" onClick={() => setConfirmDelete(t.id)}
                     style={{ fontSize: "0.7rem", color: "var(--muted-foreground)", background: "none", border: "none", cursor: "pointer" }}>
                     Revoke
                   </button>
@@ -598,6 +598,7 @@ function SiteChipPicker({
         const active = selected.includes(s.id);
         return (
           <button
+            data-testid={`token-site-chip-${s.id}`}
             key={s.id}
             type="button"
             onClick={() => toggle(s.id)}
diff --git a/packages/cms-admin/src/components/settings/ai-defaults-panel.tsx b/packages/cms-admin/src/components/settings/ai-defaults-panel.tsx
index 64eda6ed4..1de91c5f2 100644
--- a/packages/cms-admin/src/components/settings/ai-defaults-panel.tsx
+++ b/packages/cms-admin/src/components/settings/ai-defaults-panel.tsx
@@ -122,7 +122,7 @@ export function AIDefaultsPanel() {
   }
 
   return (
-    <form ref={defaultsFormRef} onSubmit={handleSave} onChange={() => window.dispatchEvent(new CustomEvent("cms:settings-dirty"))}>
+    <form data-testid="panel-ai-defaults" ref={defaultsFormRef} onSubmit={handleSave} onChange={() => window.dispatchEvent(new CustomEvent("cms:settings-dirty"))}>
       <SettingsCard>
       {/* Content — cheap/fast text tasks */}
       <div style={{ marginBottom: "2rem" }}>
diff --git a/packages/cms-admin/src/components/settings/ai-prompts-panel.tsx b/packages/cms-admin/src/components/settings/ai-prompts-panel.tsx
index 843f36395..06664f9e1 100644
--- a/packages/cms-admin/src/components/settings/ai-prompts-panel.tsx
+++ b/packages/cms-admin/src/components/settings/ai-prompts-panel.tsx
@@ -106,6 +106,7 @@ export function AIPromptsPanel() {
             </div>
             <span className="flex items-center gap-1.5">
               <button
+                data-testid="ai-prompts-copy-button"
                 type="button"
                 onClick={() => { navigator.clipboard.writeText(p.value); setCopiedId(p.id); setTimeout(() => setCopiedId(null), 2000); }}
                 className="flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground transition-colors px-2 py-1 rounded border border-border"
@@ -117,13 +118,14 @@ export function AIPromptsPanel() {
               {confirmResetId === p.id ? (
                 <span className="flex items-center gap-1">
                   <span style={{ fontSize: "0.65rem", color: "var(--destructive)", fontWeight: 500, padding: "0 2px" }}>Reset?</span>
-                  <button type="button" onClick={() => { setConfirmResetId(null); resetPrompt(p.id); }}
+                  <button data-testid="ai-prompts-reset-confirm-button" type="button" onClick={() => { setConfirmResetId(null); resetPrompt(p.id); }}
                     style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "none", background: "var(--destructive)", color: "#fff", cursor: "pointer", lineHeight: 1 }}>Yes</button>
-                  <button type="button" onClick={() => setConfirmResetId(null)}
+                  <button data-testid="ai-prompts-reset-cancel-button" type="button" onClick={() => setConfirmResetId(null)}
                     style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "1px solid var(--border)", background: "transparent", color: "var(--foreground)", cursor: "pointer", lineHeight: 1 }}>No</button>
                 </span>
               ) : (
                 <button
+                  data-testid="ai-prompts-reset-button"
                   type="button"
                   onClick={() => setConfirmResetId(p.id)}
                   className="flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground transition-colors px-2 py-1 rounded border border-border"
@@ -136,6 +138,7 @@ export function AIPromptsPanel() {
             </span>
           </div>
           <textarea
+            data-testid="ai-prompts-textarea"
             value={p.value}
             onChange={(e) => {
               setPrompts((prev) =>
diff --git a/packages/cms-admin/src/components/settings/ai-settings-panel.tsx b/packages/cms-admin/src/components/settings/ai-settings-panel.tsx
index 5c7051502..39743a672 100644
--- a/packages/cms-admin/src/components/settings/ai-settings-panel.tsx
+++ b/packages/cms-admin/src/components/settings/ai-settings-panel.tsx
@@ -133,7 +133,7 @@ export function AISettingsPanel() {
   }
 
   return (
-    <form ref={aiFormRef} onSubmit={handleSave} onChange={() => window.dispatchEvent(new CustomEvent("cms:settings-dirty"))} data-testid="panel-ai">
+    <form data-testid="panel-ai" ref={aiFormRef} onSubmit={handleSave} onChange={() => window.dispatchEvent(new CustomEvent("cms:settings-dirty"))}>
       <SettingsCard>
       {/* Default provider */}
       <div style={{ marginBottom: "1.5rem" }}>
@@ -144,6 +144,7 @@ export function AISettingsPanel() {
         <div style={{ display: "flex", gap: "0.5rem" }}>
           {PROVIDERS.map((p) => (
             <button
+              data-testid={`ai-provider-${p.id}`}
               key={p.id}
               type="button"
               onClick={() => setConfig((c) => ({ ...c, defaultProvider: p.id }))}
@@ -193,6 +194,7 @@ export function AISettingsPanel() {
                   )
                 )}
                 <a
+                  data-testid={`ai-docs-link-${p.id}`}
                   href={p.docsUrl}
                   target="_blank"
                   rel="noopener noreferrer"
@@ -204,6 +206,7 @@ export function AISettingsPanel() {
               {isEditing ? (
                 <div style={{ display: "flex", gap: "0.375rem" }}>
                   <input
+                    data-testid="ai-api-key-input"
                     type="text"
                     value={editing[p.field] ?? ""}
                     onChange={(e) => setEditing((prev) => ({ ...prev, [p.field]: e.target.value }))}
@@ -214,6 +217,7 @@ export function AISettingsPanel() {
                     onBlur={(e) => { e.target.style.borderColor = "var(--border)"; }}
                   />
                   <button
+                    data-testid="ai-api-key-cancel-button"
                     type="button"
                     onClick={() => setEditing((prev) => { const n = { ...prev }; delete n[p.field]; return n; })}
                     style={{ padding: "0.5rem 0.625rem", borderRadius: "7px", border: "1px solid var(--border)", background: "transparent", color: "var(--muted-foreground)", fontSize: "0.75rem", cursor: "pointer" }}
@@ -223,6 +227,7 @@ export function AISettingsPanel() {
                 </div>
               ) : (
                 <button
+                  data-testid="ai-api-key-edit-button"
                   type="button"
                   onClick={() => setEditing((prev) => ({ ...prev, [p.field]: "" }))}
                   style={{
@@ -255,6 +260,7 @@ export function AISettingsPanel() {
             { id: "tavily" as const, label: "Tavily", url: "https://tavily.com/" },
           ]).map((p) => (
             <button
+              data-testid="websearch-provider-button"
               key={p.id}
               type="button"
               onClick={() => setConfig((c) => ({ ...c, webSearchProvider: p.id }))}
@@ -301,6 +307,7 @@ export function AISettingsPanel() {
               {keyField in editing ? (
                 <div style={{ display: "flex", gap: "0.375rem" }}>
                   <input
+                    data-testid="websearch-api-key-input"
                     type="text"
                     value={editing[keyField] ?? ""}
                     onChange={(e) => setEditing((prev) => ({ ...prev, [keyField]: e.target.value }))}
@@ -311,6 +318,7 @@ export function AISettingsPanel() {
                     onBlur={(e) => { e.target.style.borderColor = "var(--border)"; }}
                   />
                   <button
+                    data-testid="websearch-api-key-cancel-button"
                     type="button"
                     onClick={() => setEditing((prev) => { const n = { ...prev }; delete n[keyField]; return n; })}
                     style={{ padding: "0.5rem 0.625rem", borderRadius: "7px", border: "1px solid var(--border)", background: "transparent", color: "var(--muted-foreground)", fontSize: "0.75rem", cursor: "pointer" }}
@@ -320,6 +328,7 @@ export function AISettingsPanel() {
                 </div>
               ) : (
                 <button
+                  data-testid="websearch-api-key-edit-button"
                   type="button"
                   onClick={() => setEditing((prev) => ({ ...prev, [keyField]: "" }))}
                   style={{ ...fieldStyle, textAlign: "left", cursor: "pointer", color: "var(--muted-foreground)", opacity: currentKey ? 1 : 0.6 }}
diff --git a/packages/cms-admin/src/components/settings/backup-settings-panel.tsx b/packages/cms-admin/src/components/settings/backup-settings-panel.tsx
index b65fe6868..e6d726400 100644
--- a/packages/cms-admin/src/components/settings/backup-settings-panel.tsx
+++ b/packages/cms-admin/src/components/settings/backup-settings-panel.tsx
@@ -202,6 +202,7 @@ export function BackupSettingsPanel() {
         <div>
           <label style={labelStyle}>Frequency</label>
           <CustomSelect
+            data-testid="backup-schedule-select"
             value={config.backupSchedule}
             onChange={(v) => updateConfig((c) => ({ ...c, backupSchedule: v as BackupConfig["backupSchedule"] }))}
             options={scheduleOptions}
@@ -213,6 +214,7 @@ export function BackupSettingsPanel() {
             <div>
               <label style={labelStyle}>Time</label>
               <CustomTimeInput
+                data-testid="backup-time-input"
                 value={config.backupTime}
                 onChange={(v) => updateConfig((c) => ({ ...c, backupTime: v }))}
               />
@@ -220,6 +222,7 @@ export function BackupSettingsPanel() {
             <div>
               <label style={labelStyle}>Retention</label>
               <CustomSelect
+                data-testid="backup-retention-select"
                 value={String(config.backupRetentionDays)}
                 onChange={(v) => updateConfig((c) => ({ ...c, backupRetentionDays: parseInt(v, 10) }))}
                 options={retentionOptions}
@@ -229,6 +232,7 @@ export function BackupSettingsPanel() {
             <div>
               <label style={labelStyle}>Max storage (GB)</label>
               <input
+                data-testid="backup-max-storage-input"
                 type="number"
                 min={0}
                 step={1}
@@ -259,6 +263,7 @@ export function BackupSettingsPanel() {
         <div>
           <label style={labelStyle}>Provider</label>
           <CustomSelect
+            data-testid="backup-provider-select"
             value={config.backupProvider}
             onChange={(v) => {
               updateConfig((c) => ({ ...c, backupProvider: v as BackupConfig["backupProvider"] }));
@@ -273,6 +278,7 @@ export function BackupSettingsPanel() {
             <div>
               <label style={labelStyle}>Email</label>
               <input
+                data-testid="backup-pcloud-email-input"
                 type="email"
                 value={config.backupPcloudEmail}
                 onChange={(e) => updateConfig((c) => ({ ...c, backupPcloudEmail: e.target.value }))}
@@ -284,6 +290,7 @@ export function BackupSettingsPanel() {
             <div>
               <label style={labelStyle}>Password</label>
               <input
+                data-testid="backup-pcloud-password-input"
                 type="password"
                 value={config.backupPcloudPassword}
                 onChange={(e) => updateConfig((c) => ({ ...c, backupPcloudPassword: e.target.value }))}
@@ -294,6 +301,7 @@ export function BackupSettingsPanel() {
 
             <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", marginTop: "0.25rem" }}>
               <input
+                data-testid="backup-pcloud-eu-checkbox"
                 type="checkbox"
                 checked={config.backupPcloudEu}
                 onChange={(e) => updateConfig((c) => ({ ...c, backupPcloudEu: e.target.checked }))}
@@ -304,6 +312,7 @@ export function BackupSettingsPanel() {
 
             <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", marginTop: "0.5rem" }}>
               <button
+                data-testid="backup-pcloud-test-button"
                 type="button"
                 onClick={testConnection}
                 disabled={testing || !config.backupPcloudEmail || !config.backupPcloudPassword}
@@ -335,6 +344,7 @@ export function BackupSettingsPanel() {
             <div>
               <label style={labelStyle}>Provider</label>
               <CustomSelect
+                data-testid="backup-s3-preset-select"
                 value={config.backupS3Provider || "r2"}
                 onChange={(v) => applyS3Preset(v)}
                 options={s3PresetOptions}
@@ -345,6 +355,7 @@ export function BackupSettingsPanel() {
               <div>
                 <label style={labelStyle}>Endpoint</label>
                 <input
+                  data-testid="backup-s3-r2-endpoint-input"
                   type="text"
                   value={config.backupS3Endpoint}
                   onChange={(e) => updateConfig((c) => ({ ...c, backupS3Endpoint: e.target.value }))}
@@ -354,6 +365,7 @@ export function BackupSettingsPanel() {
                 <p style={{ ...descStyle, marginTop: "0.25rem", display: "flex", alignItems: "center", gap: "0.3rem", flexWrap: "wrap" }}>
                   Find your Account ID in
                   <a
+                    data-testid="backup-r2-link"
                     href="https://dash.cloudflare.com/?to=/:account/r2/overview"
                     target="_blank"
                     rel="noopener noreferrer"
@@ -369,6 +381,7 @@ export function BackupSettingsPanel() {
               <div>
                 <label style={labelStyle}>Endpoint</label>
                 <input
+                  data-testid="backup-s3-b2-endpoint-input"
                   type="text"
                   value={config.backupS3Endpoint}
                   onChange={(e) => updateConfig((c) => ({ ...c, backupS3Endpoint: e.target.value }))}
@@ -383,6 +396,7 @@ export function BackupSettingsPanel() {
                 <div>
                   <label style={labelStyle}>Endpoint</label>
                   <input
+                    data-testid="backup-s3-custom-endpoint-input"
                     type="text"
                     value={config.backupS3Endpoint}
                     onChange={(e) => updateConfig((c) => ({ ...c, backupS3Endpoint: e.target.value }))}
@@ -393,6 +407,7 @@ export function BackupSettingsPanel() {
                 <div>
                   <label style={labelStyle}>Region</label>
                   <input
+                    data-testid="backup-s3-custom-region-input"
                     type="text"
                     value={config.backupS3Region}
                     onChange={(e) => updateConfig((c) => ({ ...c, backupS3Region: e.target.value }))}
@@ -406,6 +421,7 @@ export function BackupSettingsPanel() {
             <div>
               <label style={labelStyle}>Bucket</label>
               <input
+                data-testid="backup-s3-bucket-input"
                 type="text"
                 value={config.backupS3Bucket}
                 onChange={(e) => updateConfig((c) => ({ ...c, backupS3Bucket: e.target.value }))}
@@ -417,6 +433,7 @@ export function BackupSettingsPanel() {
             <div>
               <label style={labelStyle}>Access Key ID</label>
               <input
+                data-testid="backup-s3-access-key-input"
                 type="text"
                 value={config.backupS3AccessKeyId}
                 onChange={(e) => updateConfig((c) => ({ ...c, backupS3AccessKeyId: e.target.value }))}
@@ -428,6 +445,7 @@ export function BackupSettingsPanel() {
             <div>
               <label style={labelStyle}>Secret Access Key</label>
               <input
+                data-testid="backup-s3-secret-key-input"
                 type="password"
                 value={config.backupS3SecretAccessKey}
                 onChange={(e) => updateConfig((c) => ({ ...c, backupS3SecretAccessKey: e.target.value }))}
@@ -439,6 +457,7 @@ export function BackupSettingsPanel() {
             <div>
               <label style={labelStyle}>Prefix (folder)</label>
               <input
+                data-testid="backup-s3-prefix-input"
                 type="text"
                 value={config.backupS3Prefix}
                 onChange={(e) => updateConfig((c) => ({ ...c, backupS3Prefix: e.target.value }))}
@@ -449,6 +468,7 @@ export function BackupSettingsPanel() {
 
             <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", marginTop: "0.5rem" }}>
               <button
+                data-testid="backup-s3-test-button"
                 type="button"
                 onClick={testConnection}
                 disabled={testing || !config.backupS3Bucket || !config.backupS3AccessKeyId || !config.backupS3SecretAccessKey}
diff --git a/packages/cms-admin/src/components/settings/beam-import-modal.tsx b/packages/cms-admin/src/components/settings/beam-import-modal.tsx
index a412abbe8..6d5260785 100644
--- a/packages/cms-admin/src/components/settings/beam-import-modal.tsx
+++ b/packages/cms-admin/src/components/settings/beam-import-modal.tsx
@@ -211,6 +211,7 @@ export function BeamImportModal({ file, orgId, onClose, onDone }: Props) {
             </h2>
           </div>
           <button
+            data-testid="beam-import-close-button"
             type="button"
             onClick={onClose}
             disabled={phase === "uploading" || phase === "processing"}
@@ -301,6 +302,7 @@ export function BeamImportModal({ file, orgId, onClose, onDone }: Props) {
               )}
             </div>
             <button
+              data-testid="beam-import-done-button"
               type="button"
               onClick={onClose}
               style={{
@@ -330,6 +332,7 @@ export function BeamImportModal({ file, orgId, onClose, onDone }: Props) {
               {error ?? "Unknown error"}
             </div>
             <button
+              data-testid="beam-import-error-close-button"
               type="button"
               onClick={onClose}
               style={{
diff --git a/packages/cms-admin/src/components/settings/beam-progress-modal.tsx b/packages/cms-admin/src/components/settings/beam-progress-modal.tsx
index 5f9f4531e..9bc08c06b 100644
--- a/packages/cms-admin/src/components/settings/beam-progress-modal.tsx
+++ b/packages/cms-admin/src/components/settings/beam-progress-modal.tsx
@@ -72,6 +72,7 @@ export function BeamProgressModal({ beamId, targetUrl, onClose, onMinimize }: Pr
 
   return (
     <div
+      data-testid="beam-progress-backdrop"
       role="dialog"
       aria-modal="true"
       style={{
@@ -83,6 +84,7 @@ export function BeamProgressModal({ beamId, targetUrl, onClose, onMinimize }: Pr
       onClick={(e) => { if (e.target === e.currentTarget && !done && !error) onMinimize(); }}
     >
       <div
+        data-testid="beam-progress-content"
         style={{
           background: "var(--card)",
           border: "1px solid var(--border)",
@@ -107,6 +109,7 @@ export function BeamProgressModal({ beamId, targetUrl, onClose, onMinimize }: Pr
           <div style={{ display: "flex", gap: "0.4rem" }}>
             {!done && !error && (
               <button
+                data-testid="beam-progress-minimize-button"
                 type="button"
                 onClick={onMinimize}
                 title="Run in background"
@@ -123,6 +126,7 @@ export function BeamProgressModal({ beamId, targetUrl, onClose, onMinimize }: Pr
               </button>
             )}
             <button
+              data-testid="beam-progress-close-button"
               type="button"
               onClick={onClose}
               title="Close"
@@ -192,6 +196,7 @@ export function BeamProgressModal({ beamId, targetUrl, onClose, onMinimize }: Pr
         {/* Actions on success */}
         {done && (
           <button
+            data-testid="beam-progress-done-button"
             type="button"
             onClick={onClose}
             style={{
diff --git a/packages/cms-admin/src/components/settings/beam-settings-panel.tsx b/packages/cms-admin/src/components/settings/beam-settings-panel.tsx
index 89e7d5896..1a12f625b 100644
--- a/packages/cms-admin/src/components/settings/beam-settings-panel.tsx
+++ b/packages/cms-admin/src/components/settings/beam-settings-panel.tsx
@@ -247,6 +247,7 @@ export function BeamSettingsPanel({ orgId }: { orgId: string }) {
           of this site — content, media, config, agents, and settings. Secrets are automatically stripped.
         </p>
         <button
+          data-testid="beam-export-button"
           onClick={handleExport}
           disabled={exporting}
           style={{
@@ -304,6 +305,7 @@ export function BeamSettingsPanel({ orgId }: { orgId: string }) {
               Target URL
             </label>
             <input
+              data-testid="beam-target-url-input"
               type="url"
               value={targetUrl}
               onChange={(e) => setTargetUrl(e.target.value)}
@@ -325,6 +327,7 @@ export function BeamSettingsPanel({ orgId }: { orgId: string }) {
               Beam Token
             </label>
             <input
+              data-testid="beam-token-input"
               type="text"
               value={pushToken}
               onChange={(e) => setPushToken(e.target.value)}
@@ -345,6 +348,7 @@ export function BeamSettingsPanel({ orgId }: { orgId: string }) {
         </div>
 
         <button
+          data-testid="beam-push-button"
           onClick={handlePush}
           disabled={pushing || !targetUrl || !pushToken}
           style={{
@@ -459,6 +463,7 @@ export function BeamSettingsPanel({ orgId }: { orgId: string }) {
         </p>
 
         <button
+          data-testid="beam-generate-token-button"
           onClick={handleGenerateToken}
           disabled={generatingToken}
           style={{
@@ -493,6 +498,7 @@ export function BeamSettingsPanel({ orgId }: { orgId: string }) {
                 {beamToken.token}
               </code>
               <button
+                data-testid="beam-copy-token-button"
                 onClick={handleCopyToken}
                 style={{
                   display: "inline-flex",
@@ -536,6 +542,7 @@ export function BeamSettingsPanel({ orgId }: { orgId: string }) {
         </p>
         <div style={{ display: "flex", alignItems: "center", gap: "0.75rem", flexWrap: "wrap" }}>
           <input
+            data-testid="beam-file-input"
             ref={fileRef}
             type="file"
             accept=".beam"
@@ -547,6 +554,7 @@ export function BeamSettingsPanel({ orgId }: { orgId: string }) {
             }}
           />
           <button
+            data-testid="beam-choose-file-button"
             type="button"
             onClick={() => fileRef.current?.click()}
             style={{
@@ -566,6 +574,7 @@ export function BeamSettingsPanel({ orgId }: { orgId: string }) {
             {importFileName ?? "Choose .beam file…"}
           </button>
           <button
+            data-testid="beam-import-button"
             onClick={handleImport}
             style={{
               display: "inline-flex",
diff --git a/packages/cms-admin/src/components/settings/deploy-settings-panel.tsx b/packages/cms-admin/src/components/settings/deploy-settings-panel.tsx
index cef5840fc..404b7aabf 100644
--- a/packages/cms-admin/src/components/settings/deploy-settings-panel.tsx
+++ b/packages/cms-admin/src/components/settings/deploy-settings-panel.tsx
@@ -72,6 +72,7 @@ function RecheckButton({ busy, justRan, onClick }: { busy: boolean; justRan: boo
   const success = justRan && !busy;
   return (
     <button
+      data-testid="recheck-dns-button"
       onClick={onClick}
       disabled={busy}
       onMouseEnter={() => setHover(true)}
@@ -490,6 +491,7 @@ export function DeploySettingsPanel() {
             </div>
           </div>
           <button
+            data-testid="drift-banner-rebuild-button"
             onClick={() => {
               const infraSection = document.querySelector('[data-rebuild-infra-section]');
               infraSection?.scrollIntoView({ behavior: "smooth", block: "center" });
@@ -524,6 +526,7 @@ export function DeploySettingsPanel() {
           </div>
         </div>
         <a
+          data-testid="docker-wizard-link"
           href="/admin/deploy/docker"
           style={{
             padding: "0.35rem 0.8rem",
@@ -590,7 +593,7 @@ export function DeploySettingsPanel() {
               {config.deployProvider === "cloudflare" && "Cloudflare → Pages → Settings → Builds → Deploy hooks"}
               {config.deployProvider === "custom" && "Any URL that accepts a POST request to trigger a build"}
             </p>
-            <input type="url" value={config.deployHookUrl} onChange={(e) => updateConfig((c) => ({ ...c, deployHookUrl: e.target.value }))}
+            <input data-testid="deploy-input-1" type="url" value={config.deployHookUrl} onChange={(e) => updateConfig((c) => ({ ...c, deployHookUrl: e.target.value }))}
               placeholder="https://api.vercel.com/v1/integrations/deploy/..." style={inputStyle} />
           </div>
         )}
@@ -600,15 +603,15 @@ export function DeploySettingsPanel() {
             <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
               <label style={{ fontSize: "0.75rem", fontWeight: 500 }}>API Token</label>
               {(config.deployProvider === "flyio" || config.deployProvider === "flyio-live") && (
-                <a href="https://fly.io/dashboard/personal/tokens" target="_blank" rel="noopener noreferrer"
+                <a data-testid="flyio-token-link" href="https://fly.io/dashboard/personal/tokens" target="_blank" rel="noopener noreferrer"
                   style={{ fontSize: "0.65rem", color: "var(--muted-foreground)", textDecoration: "none", display: "flex", alignItems: "center", gap: "0.2rem" }}>Get token <ExternalLink style={{ width: "0.6rem", height: "0.6rem" }} /></a>
               )}
               {config.deployProvider === "github-pages" && (
-                <a href="https://github.com/settings/tokens/new?scopes=repo&description=webhouse-deploy" target="_blank" rel="noopener noreferrer"
+                <a data-testid="github-token-link" href="https://github.com/settings/tokens/new?scopes=repo&description=webhouse-deploy" target="_blank" rel="noopener noreferrer"
                   style={{ fontSize: "0.65rem", color: "var(--muted-foreground)", textDecoration: "none", display: "flex", alignItems: "center", gap: "0.2rem" }}>Get key <ExternalLink style={{ width: "0.6rem", height: "0.6rem" }} /></a>
               )}
             </div>
-            <input type="password" value={config.deployApiToken} onChange={(e) => updateConfig((c) => ({ ...c, deployApiToken: e.target.value }))}
+            <input data-testid="deploy-input-2" type="password" value={config.deployApiToken} onChange={(e) => updateConfig((c) => ({ ...c, deployApiToken: e.target.value }))}
               placeholder="Token..." style={{ ...inputStyle, fontFamily: "inherit" }} />
           </div>
         )}
@@ -618,7 +621,7 @@ export function DeploySettingsPanel() {
             <label style={{ fontSize: "0.75rem", fontWeight: 500 }}>
               {config.deployProvider === "flyio" || config.deployProvider === "flyio-live" ? "App name" : "Repository (owner/repo)"}
             </label>
-            <input type="text" value={config.deployAppName} onChange={(e) => updateConfig((c) => ({ ...c, deployAppName: e.target.value }))}
+            <input data-testid="deploy-input-3" type="text" value={config.deployAppName} onChange={(e) => updateConfig((c) => ({ ...c, deployAppName: e.target.value }))}
               placeholder={config.deployProvider === "flyio" || config.deployProvider === "flyio-live" ? "my-app" : "owner/repo"} style={inputStyle} />
           </div>
         )}
@@ -629,7 +632,7 @@ export function DeploySettingsPanel() {
             <p style={{ fontSize: "0.65rem", color: "var(--muted-foreground)", margin: 0 }}>
               Fly.io org slug — auto-detected from token if left empty
             </p>
-            <input type="text" value={config.deployFlyOrg} onChange={(e) => updateConfig((c) => ({ ...c, deployFlyOrg: e.target.value }))}
+            <input data-testid="deploy-input-4" type="text" value={config.deployFlyOrg} onChange={(e) => updateConfig((c) => ({ ...c, deployFlyOrg: e.target.value }))}
               placeholder="Auto-detect from token" style={inputStyle} />
           </div>
         )}
@@ -637,7 +640,7 @@ export function DeploySettingsPanel() {
         {config.deployProvider === "flyio" && (
           <div style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
             <label style={{ fontSize: "0.75rem", fontWeight: 500 }}>Or: Deploy hook URL (alternative)</label>
-            <input type="url" value={config.deployHookUrl} onChange={(e) => updateConfig((c) => ({ ...c, deployHookUrl: e.target.value }))}
+            <input data-testid="deploy-input-5" type="url" value={config.deployHookUrl} onChange={(e) => updateConfig((c) => ({ ...c, deployHookUrl: e.target.value }))}
               placeholder="https://..." style={inputStyle} />
           </div>
         )}
@@ -649,12 +652,12 @@ export function DeploySettingsPanel() {
               <p style={{ fontSize: "0.65rem", color: "var(--muted-foreground)", margin: 0 }}>
                 Fly region code for the volume. Cannot be changed after first deploy.
               </p>
-              <input type="text" value={config.deployFlyLiveRegion} onChange={(e) => updateConfig((c) => ({ ...c, deployFlyLiveRegion: e.target.value }))}
+              <input data-testid="deploy-input-6" type="text" value={config.deployFlyLiveRegion} onChange={(e) => updateConfig((c) => ({ ...c, deployFlyLiveRegion: e.target.value }))}
                 placeholder="arn" style={inputStyle} />
             </div>
             <div style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
               <label style={{ fontSize: "0.75rem", fontWeight: 500 }}>Volume name</label>
-              <input type="text" value={config.deployFlyLiveVolumeName} onChange={(e) => updateConfig((c) => ({ ...c, deployFlyLiveVolumeName: e.target.value }))}
+              <input data-testid="deploy-input-7" type="text" value={config.deployFlyLiveVolumeName} onChange={(e) => updateConfig((c) => ({ ...c, deployFlyLiveVolumeName: e.target.value }))}
                 placeholder="site_data" style={inputStyle} />
             </div>
             {config.deployFlyLiveSyncSecret && (
@@ -680,19 +683,20 @@ export function DeploySettingsPanel() {
             <div style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
               <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                 <label style={{ fontSize: "0.75rem", fontWeight: 500 }}>API Token</label>
-                <a href="https://dash.cloudflare.com/profile/api-tokens" target="_blank" rel="noopener noreferrer"
+                <a data-testid="cloudflare-token-link" href="https://dash.cloudflare.com/profile/api-tokens" target="_blank" rel="noopener noreferrer"
                   style={{ fontSize: "0.65rem", color: "var(--muted-foreground)", textDecoration: "none", display: "flex", alignItems: "center", gap: "0.2rem" }}>Get token <ExternalLink style={{ width: "0.6rem", height: "0.6rem" }} /></a>
               </div>
               <p style={{ fontSize: "0.65rem", color: "var(--muted-foreground)", margin: 0 }}>
                 Permission: "Account → Cloudflare Pages → Edit"
               </p>
-              <input type="password" value={config.deployApiToken} onChange={(e) => updateConfig((c) => ({ ...c, deployApiToken: e.target.value }))}
+              <input data-testid="deploy-input-8" type="password" value={config.deployApiToken} onChange={(e) => updateConfig((c) => ({ ...c, deployApiToken: e.target.value }))}
                 placeholder="Token..." style={{ ...inputStyle, fontFamily: "inherit" }} />
             </div>
             <div style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
               <label style={{ fontSize: "0.75rem", fontWeight: 500 }}>Account ID</label>
               <p style={{ fontSize: "0.65rem", color: "var(--muted-foreground)", margin: 0, display: "flex", alignItems: "center", gap: "0.3rem", flexWrap: "wrap" }}>
                 <a
+                  data-testid="cloudflare-dashboard-link"
                   href="https://dash.cloudflare.com/"
                   target="_blank"
                   rel="noopener noreferrer"
@@ -702,7 +706,7 @@ export function DeploySettingsPanel() {
                 </a>
                 → right sidebar → Account ID
               </p>
-              <input type="text" value={config.deployCloudflareAccountId} onChange={(e) => updateConfig((c) => ({ ...c, deployCloudflareAccountId: e.target.value }))}
+              <input data-testid="deploy-input-9" type="text" value={config.deployCloudflareAccountId} onChange={(e) => updateConfig((c) => ({ ...c, deployCloudflareAccountId: e.target.value }))}
                 placeholder="abcdef0123456789..." style={inputStyle} />
             </div>
             <div style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
@@ -710,7 +714,7 @@ export function DeploySettingsPanel() {
               <p style={{ fontSize: "0.65rem", color: "var(--muted-foreground)", margin: 0 }}>
                 Lowercase letters, digits, hyphens. Auto-created on first deploy if missing.
               </p>
-              <input type="text" value={config.deployCloudflareProjectName} onChange={(e) => updateConfig((c) => ({ ...c, deployCloudflareProjectName: e.target.value }))}
+              <input data-testid="deploy-input-10" type="text" value={config.deployCloudflareProjectName} onChange={(e) => updateConfig((c) => ({ ...c, deployCloudflareProjectName: e.target.value }))}
                 placeholder="my-site" style={inputStyle} />
             </div>
           </>
@@ -757,7 +761,7 @@ export function DeploySettingsPanel() {
               {flyLiveStatus.url && (
                 <>
                   <span style={{ color: "var(--muted-foreground)" }}>URL</span>
-                  <a href={flyLiveStatus.url} target="_blank" rel="noopener noreferrer" style={{ color: "var(--primary)" }}>{flyLiveStatus.url}</a>
+                  <a data-testid="fly-live-url-link" href={flyLiveStatus.url} target="_blank" rel="noopener noreferrer" style={{ color: "var(--primary)" }}>{flyLiveStatus.url}</a>
                 </>
               )}
             </div>
@@ -771,6 +775,7 @@ export function DeploySettingsPanel() {
               </div>
               {!rebuildConfirm && !rebuilding && (
                 <button
+                  data-testid="rebuild-infra-button"
                   onClick={() => setRebuildConfirm(true)}
                   style={{
                     padding: "0.35rem 0.8rem", borderRadius: "6px",
@@ -785,9 +790,9 @@ export function DeploySettingsPanel() {
               {rebuildConfirm && !rebuilding && (
                 <div style={{ display: "flex", alignItems: "center", gap: "0.3rem" }}>
                   <span style={{ fontSize: "0.65rem", color: "var(--destructive)", fontWeight: 500, padding: "0 2px" }}>Rebuild?</span>
-                  <button onClick={handleRebuildInfra}
+                  <button data-testid="deploy-button-1" onClick={handleRebuildInfra}
                     style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "none", background: "var(--destructive)", color: "#fff", cursor: "pointer", lineHeight: 1 }}>Yes</button>
-                  <button onClick={() => setRebuildConfirm(false)}
+                  <button data-testid="deploy-button-2" onClick={() => setRebuildConfirm(false)}
                     style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "1px solid var(--border)", background: "transparent", color: "var(--foreground)", cursor: "pointer", lineHeight: 1 }}>No</button>
                 </div>
               )}
@@ -826,7 +831,7 @@ export function DeploySettingsPanel() {
                   <div>
                     <p style={{ fontSize: "0.8rem", fontWeight: 500, margin: 0 }}>Have a GitHub account</p>
                     <p style={{ fontSize: "0.72rem", color: "var(--muted-foreground)", margin: "0.15rem 0 0" }}>
-                      Don&apos;t have one? <a href="https://github.com/signup" target="_blank" rel="noopener noreferrer" style={{ color: "var(--primary)", textDecoration: "none" }}>Create a free account →</a>
+                      Don&apos;t have one? <a data-testid="github-signup-link" href="https://github.com/signup" target="_blank" rel="noopener noreferrer" style={{ color: "var(--primary)", textDecoration: "none" }}>Create a free account →</a>
                     </p>
                   </div>
                 </div>
@@ -850,6 +855,7 @@ export function DeploySettingsPanel() {
                 </div>
               </div>
               <a
+                data-testid="connect-github-link"
                 href="/api/auth/github"
                 style={{
                   display: "inline-flex", alignItems: "center", gap: "0.5rem",
@@ -892,6 +898,7 @@ export function DeploySettingsPanel() {
                 )}
               </div>
               <button
+                data-testid="deploy-now-button"
                 type="button"
                 onClick={() => setShowDeployModal(true)}
                 disabled={deploying}
@@ -910,7 +917,7 @@ export function DeploySettingsPanel() {
             </div>
 
             {config.deployProductionUrl && (
-              <a href={config.deployProductionUrl} target="_blank" rel="noopener noreferrer"
+              <a data-testid="production-url-link" href={config.deployProductionUrl} target="_blank" rel="noopener noreferrer"
                 style={{ display: "flex", alignItems: "center", gap: "0.35rem", fontSize: "0.75rem", color: "var(--primary)", textDecoration: "none" }}>
                 <ExternalLink style={{ width: "0.7rem", height: "0.7rem" }} />
                 {config.deployProductionUrl}
@@ -919,6 +926,7 @@ export function DeploySettingsPanel() {
 
             <label style={{ display: "flex", alignItems: "center", gap: "0.5rem", cursor: "pointer" }}>
               <input
+                data-testid="deploy-on-save-checkbox"
                 type="checkbox"
                 checked={config.deployOnSave}
                 onChange={(e) => updateConfig((c) => ({ ...c, deployOnSave: e.target.checked }))}
@@ -962,6 +970,7 @@ export function DeploySettingsPanel() {
             </div>
             <div style={{ display: "flex", gap: "0.4rem", alignItems: "center" }}>
               <input
+                data-testid="custom-domain-input"
                 type="text"
                 value={config.deployCustomDomain}
                 onChange={(e) => updateConfig((c) => ({ ...c, deployCustomDomain: e.target.value }))}
@@ -980,6 +989,7 @@ export function DeploySettingsPanel() {
                 <div style={{ display: "flex", alignItems: "center", gap: "0.4rem", fontSize: "0.65rem", color: "var(--muted-foreground)" }}>
                   <span>Suggestion:</span>
                   <button
+                    data-testid="use-suggested-domain-button"
                     type="button"
                     onClick={() => updateConfig((c) => ({ ...c, deployCustomDomain: suggested }))}
                     style={{
@@ -1053,6 +1063,7 @@ export function DeploySettingsPanel() {
                 </div>
                 {dnsStatus.zoneManagedByApi && dnsStatus.expectedTarget && dnsStatus.state !== "ok" && (
                   <button
+                    data-testid="create-cname-button"
                     onClick={handleCreateCname}
                     disabled={dnsBusy || domainCheck.state === "taken"}
                     title={domainCheck.state === "taken" ? "Subdomain is already used by another site" : undefined}
@@ -1131,6 +1142,7 @@ export function DeploySettingsPanel() {
               <>
                 <div style={{ display: "flex", gap: "0.4rem" }}>
                   <input
+                    data-testid="registrar-search-input"
                     type="text"
                     value={registrarQuery}
                     onChange={(e) => setRegistrarQuery(e.target.value)}
@@ -1144,6 +1156,7 @@ export function DeploySettingsPanel() {
                     }}
                   />
                   <button
+                    data-testid="registrar-search-button"
                     onClick={handleRegistrarSearch}
                     disabled={registrarSearching || !registrarQuery.trim()}
                     style={{
@@ -1192,6 +1205,7 @@ export function DeploySettingsPanel() {
                           )}
                           {r.registrable && (
                             <button
+                              data-testid={`register-domain-button-${r.name.replace(/\./g, '-')}`}
                               onClick={() => handleRegistrarInitiate(r.name)}
                               style={{
                                 padding: "0.25rem 0.55rem", borderRadius: "4px",
@@ -1234,6 +1248,7 @@ export function DeploySettingsPanel() {
                 )}
                 <div style={{ display: "flex", gap: "0.4rem", alignItems: "center" }}>
                   <button
+                    data-testid="confirm-domain-registration-button"
                     onClick={handleRegistrarConfirm}
                     disabled={registrarConfirming}
                     style={{
@@ -1249,6 +1264,7 @@ export function DeploySettingsPanel() {
                     {registrarConfirming ? "Registering..." : "Yes, register domain"}
                   </button>
                   <button
+                    data-testid="cancel-domain-registration-button"
                     onClick={() => { setRegistrarPending(null); setRegistrarError(null); }}
                     style={{
                       padding: "0.35rem 0.7rem", borderRadius: "5px",
@@ -1307,7 +1323,7 @@ export function DeploySettingsPanel() {
                 </span>
                 <span>
                   {d.url ? (
-                    <a href={d.url} target="_blank" rel="noopener noreferrer" style={{ color: "var(--primary)", fontSize: "0.7rem" }}>
+                    <a data-testid={`deploy-result-link-${d.id}`} href={d.url} target="_blank" rel="noopener noreferrer" style={{ color: "var(--primary)", fontSize: "0.7rem" }}>
                       <ExternalLink style={{ width: "0.65rem", height: "0.65rem" }} />
                     </a>
                   ) : d.error ? (
@@ -1319,7 +1335,7 @@ export function DeploySettingsPanel() {
           </div>
         )}
         {deploys.length > 0 && (
-          <button type="button" onClick={loadData}
+          <button data-testid="deploy-button-3" type="button" onClick={loadData}
             style={{ display: "flex", alignItems: "center", gap: "0.3rem", padding: "0.3rem 0", border: "none", background: "none", color: "var(--muted-foreground)", fontSize: "0.7rem", cursor: "pointer" }}>
             <RefreshCw style={{ width: "0.65rem", height: "0.65rem" }} /> Refresh
           </button>
@@ -1358,6 +1374,7 @@ function CopyButton({ text }: { text: string }) {
   const [copied, setCopied] = useState(false);
   return (
     <button
+      data-testid="copy-domain-button"
       type="button"
       title="Copy to clipboard"
       onClick={async () => {
diff --git a/packages/cms-admin/src/components/settings/email-settings-panel.tsx b/packages/cms-admin/src/components/settings/email-settings-panel.tsx
index c27d8b468..fa05a74cd 100644
--- a/packages/cms-admin/src/components/settings/email-settings-panel.tsx
+++ b/packages/cms-admin/src/components/settings/email-settings-panel.tsx
@@ -166,7 +166,7 @@ export function EmailSettingsPanel() {
   ] as const;
 
   return (
-    <form ref={emailFormRef} onSubmit={handleSave} onChange={() => window.dispatchEvent(new CustomEvent("cms:settings-dirty"))} data-testid="panel-email">
+    <form data-testid="panel-email" ref={emailFormRef} onSubmit={handleSave} onChange={() => window.dispatchEvent(new CustomEvent("cms:settings-dirty"))}>
       <SettingsCard>
         {FIELDS.map((f) => {
           const currentValue = config[f.id as keyof EmailConfig];
@@ -188,6 +188,7 @@ export function EmailSettingsPanel() {
                 )}
                 {"docsUrl" in f && f.docsUrl && (
                   <a
+                    data-testid={`email-docs-${f.id}`}
                     href={f.docsUrl}
                     target="_blank"
                     rel="noopener noreferrer"
@@ -200,6 +201,7 @@ export function EmailSettingsPanel() {
               {isEditing ? (
                 <div style={{ display: "flex", gap: "0.375rem" }}>
                   <input
+                    data-testid={`email-field-${f.id}`}
                     type={f.type === "secret" ? "text" : "text"}
                     value={editing[f.id] ?? ""}
                     onChange={(e) => setEditing((prev) => ({ ...prev, [f.id]: e.target.value }))}
@@ -210,6 +212,7 @@ export function EmailSettingsPanel() {
                     onBlur={(e) => { e.target.style.borderColor = "var(--border)"; }}
                   />
                   <button
+                    data-testid={`email-cancel-${f.id}`}
                     type="button"
                     onClick={() => setEditing((prev) => { const n = { ...prev }; delete n[f.id]; return n; })}
                     style={{ padding: "0.5rem 0.625rem", borderRadius: "7px", border: "1px solid var(--border)", background: "transparent", color: "var(--muted-foreground)", fontSize: "0.75rem", cursor: "pointer" }}
@@ -219,6 +222,7 @@ export function EmailSettingsPanel() {
                 </div>
               ) : (
                 <button
+                  data-testid={`email-edit-${f.id}`}
                   type="button"
                   onClick={() => setEditing((prev) => ({ ...prev, [f.id]: "" }))}
                   style={{
@@ -252,6 +256,7 @@ export function EmailSettingsPanel() {
         </div>
         <div style={{ display: "flex", gap: "0.375rem" }}>
           <input
+            data-testid="email-test-input"
             type="email"
             value={testEmail}
             onChange={(e) => setTestEmail(e.target.value)}
@@ -261,6 +266,7 @@ export function EmailSettingsPanel() {
             onBlur={(e) => { e.target.style.borderColor = "var(--border)"; }}
           />
           <button
+            data-testid="email-test-button"
             type="button"
             onClick={handleTest}
             disabled={testing || !testEmail.trim()}
diff --git a/packages/cms-admin/src/components/settings/general-settings-panel.tsx b/packages/cms-admin/src/components/settings/general-settings-panel.tsx
index 6baa4a776..f8caba67f 100644
--- a/packages/cms-admin/src/components/settings/general-settings-panel.tsx
+++ b/packages/cms-admin/src/components/settings/general-settings-panel.tsx
@@ -14,6 +14,7 @@ import { Checkbox } from "@/components/ui/checkbox-styled";
 function SaveButton({ saving, saved }: { saving: boolean; saved: boolean }) {
 	return (
 		<button
+			data-testid="general-settings-save-button"
 			type="submit"
 			disabled={saving}
 			style={{
@@ -35,6 +36,7 @@ function Toggle({ checked, onChange, label, description }: {
 }) {
 	return (
 		<button
+			data-testid="toggle-button"
 			type="button"
 			onClick={() => { onChange(!checked); window.dispatchEvent(new CustomEvent("cms:settings-dirty")); }}
 			style={{
@@ -85,6 +87,7 @@ function InputRow({ label, description, copiable, ...inputProps }: {
 			{description && <p style={{ fontSize: "0.7rem", color: "var(--muted-foreground)", margin: 0 }}>{description}</p>}
 			<div style={{ display: "flex", gap: "0.375rem", alignItems: "center" }}>
 				<input
+					data-testid="input-row-input"
 					{...inputProps}
 					style={{
 						flex: 1, padding: "0.45rem 0.75rem", borderRadius: "7px",
@@ -96,7 +99,11 @@ function InputRow({ label, description, copiable, ...inputProps }: {
 					onBlur={(e) => { e.target.style.borderColor = "var(--border)"; }}
 				/>
 				{copiable && inputProps.value && (
-					<button type="button" onClick={handleCopy} title="Copy to clipboard"
+					<button
+						data-testid="input-row-copy-button"
+						type="button"
+						onClick={handleCopy}
+						title="Copy to clipboard"
 						style={{
 							width: "32px", height: "32px", borderRadius: "6px",
 							border: "1px solid var(--border)", background: "transparent",
@@ -149,7 +156,11 @@ function ValidateSiteButton({ configPath, contentDir }: { configPath: string; co
 	return (
 		<div style={{ borderTop: "1px solid var(--border)", paddingTop: "0.75rem" }}>
 			<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
-				<button type="button" onClick={validate} disabled={validating || !configPath}
+				<button
+					data-testid="validate-site-button"
+					type="button"
+					onClick={validate}
+					disabled={validating || !configPath}
 					style={{
 						display: "inline-flex", alignItems: "center", gap: "0.3rem",
 						padding: "0.35rem 0.75rem", borderRadius: "6px", border: "none",
@@ -262,7 +273,11 @@ function ExportSchemaSection({ configPath }: { configPath: string }) {
 				</div>
 			</div>
 			<div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
-				<button type="button" onClick={downloadSchema} disabled={exporting || !enabled}
+				<button
+					data-testid="download-schema-button"
+					type="button"
+					onClick={downloadSchema}
+					disabled={exporting || !enabled}
 					style={{
 						display: "inline-flex", alignItems: "center", gap: "0.3rem",
 						padding: "0.35rem 0.75rem", borderRadius: "6px", border: "none",
@@ -273,7 +288,11 @@ function ExportSchemaSection({ configPath }: { configPath: string }) {
 					}}>
 					{exporting ? "Exporting..." : "⬇ Download schema"}
 				</button>
-				<button type="button" onClick={saveToProject} disabled={saving || !enabled}
+				<button
+					data-testid="save-to-project-button"
+					type="button"
+					onClick={saveToProject}
+					disabled={saving || !enabled}
 					style={{
 						display: "inline-flex", alignItems: "center", gap: "0.3rem",
 						padding: "0.35rem 0.75rem", borderRadius: "6px",
@@ -377,7 +396,10 @@ function ProfileSection() {
 		<div>
 			<SectionHeading>Profile</SectionHeading>
 			<Card>
-				<form onSubmit={saveProfile} style={{ display: "flex", flexDirection: "column", gap: "0.875rem" }}>
+				<form
+					data-testid="profile-form"
+					onSubmit={saveProfile}
+					style={{ display: "flex", flexDirection: "column", gap: "0.875rem" }}>
 					<InputRow label="Name" value={name} onChange={(e) => setName(e.target.value)} required />
 					<InputRow label="Email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required copiable />
 					<div>
@@ -389,6 +411,7 @@ function ProfileSection() {
 								{ value: false, label: "Wordmark" },
 							] as const).map(({ value, label }) => (
 								<button
+									data-testid={`logo-option-${value}`}
 									key={String(value)}
 									type="button"
 									onClick={() => {
@@ -596,7 +619,12 @@ function SiteSection() {
 	}, []);
 
 	return (
-		<form ref={formRef} onSubmit={handleSave} onChange={() => window.dispatchEvent(new CustomEvent("cms:settings-dirty"))} style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
+		<form
+			data-testid="site-settings-form"
+			ref={formRef}
+			onSubmit={handleSave}
+			onChange={() => window.dispatchEvent(new CustomEvent("cms:settings-dirty"))}
+			style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
 			<div>
 				<SectionHeading first>Site</SectionHeading>
 				<Card>
@@ -705,6 +733,7 @@ function SiteSection() {
 						</div>
 						<div style={{ display: "flex", alignItems: "center", gap: "0.375rem" }}>
 							<input
+								data-testid="trash-retention-days-input"
 								type="number"
 								min={1}
 								max={365}
@@ -725,6 +754,7 @@ function SiteSection() {
 						</div>
 						<div style={{ display: "flex", alignItems: "center", gap: "0.375rem" }}>
 							<input
+								data-testid="curation-retention-days-input"
 								type="number"
 								min={1}
 								max={365}
@@ -863,6 +893,7 @@ function LanguageSection({ cfg, setCfg: _setCfg }: {
 									)}
 									{l !== cfg.defaultLocale && (
 										<button
+											data-testid={`locale-remove-${l}`}
 											type="button"
 											onClick={() => removeLocale(l)}
 											style={{
@@ -892,6 +923,7 @@ function LanguageSection({ cfg, setCfg: _setCfg }: {
 								placeholder="Select language to add"
 							/>
 							<button
+								data-testid="language-cancel-button"
 								type="button"
 								onClick={() => setAdding(false)}
 								style={{
@@ -905,6 +937,7 @@ function LanguageSection({ cfg, setCfg: _setCfg }: {
 						</div>
 					) : (
 						<button
+							data-testid="add-language-button"
 							type="button"
 							onClick={() => setAdding(true)}
 							style={{
@@ -948,6 +981,7 @@ function LanguageSection({ cfg, setCfg: _setCfg }: {
 								</p>
 							</div>
 							<button
+								data-testid="auto-translate-toggle"
 								type="button"
 								onClick={() => setCfg((c: any) => ({ ...c, autoRetranslateOnUpdate: !c.autoRetranslateOnUpdate }))}
 								style={{
@@ -1091,7 +1125,12 @@ function RevalidationSection() {
 	return (
 		<SectionWrapper><div>
 			<SectionHeading>Revalidation</SectionHeading>
-			<form ref={revalFormRef} onSubmit={handleSave} onChange={() => window.dispatchEvent(new CustomEvent("cms:settings-dirty"))} style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+			<form
+				data-testid="revalidation-form"
+				ref={revalFormRef}
+				onSubmit={handleSave}
+				onChange={() => window.dispatchEvent(new CustomEvent("cms:settings-dirty"))}
+				style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
 				<Card>
 					<div style={{ display: "flex", alignItems: "flex-start", gap: "0.5rem" }}>
 						<Zap style={{ width: "1rem", height: "1rem", color: "var(--primary)", flexShrink: 0, marginTop: "0.15rem" }} />
@@ -1105,6 +1144,7 @@ function RevalidationSection() {
 						<label style={{ fontSize: "0.75rem", fontWeight: 500 }}>Revalidation URL</label>
 						<div style={{ display: "flex", gap: "0.375rem" }}>
 							<input
+								data-testid="revalidation-url-input"
 								type="url"
 								value={url}
 								onChange={(e) => setUrl(e.target.value)}
@@ -1119,6 +1159,7 @@ function RevalidationSection() {
 							/>
 							{!url && previewUrl && (
 								<button
+									data-testid="auto-generate-revalidation-url"
 									type="button"
 									onClick={autoGenerateUrl}
 									style={{ padding: "0.4rem 0.65rem", borderRadius: "6px", border: "1px solid var(--border)", background: "transparent", cursor: "pointer", color: "var(--muted-foreground)", fontSize: "0.75rem", whiteSpace: "nowrap", display: "flex", alignItems: "center", gap: "0.3rem" }}
@@ -1130,6 +1171,7 @@ function RevalidationSection() {
 							)}
 							{url && (
 								<button
+									data-testid="copy-revalidation-url"
 									type="button"
 									onClick={() => copyToClipboard(url, "url")}
 									style={{ padding: "0.4rem", borderRadius: "6px", border: "1px solid var(--border)", background: "transparent", cursor: "pointer", color: "var(--muted-foreground)", display: "flex", alignItems: "center" }}
@@ -1151,6 +1193,7 @@ function RevalidationSection() {
 						<div style={{ display: "flex", gap: "0.375rem" }}>
 							<div style={{ position: "relative", flex: 1 }}>
 								<input
+									data-testid="webhook-secret-input"
 									type={showSecret ? "text" : "password"}
 									value={secret}
 									onChange={(e) => setSecret(e.target.value)}
@@ -1166,6 +1209,7 @@ function RevalidationSection() {
 									onBlur={(e) => { e.target.style.borderColor = "var(--border)"; }}
 								/>
 								<button
+									data-testid="toggle-secret-visibility"
 									type="button"
 									onClick={() => setShowSecret((v) => !v)}
 									style={{ position: "absolute", right: "0.5rem", top: "50%", transform: "translateY(-50%)", background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", padding: "0.1rem" }}
@@ -1174,6 +1218,7 @@ function RevalidationSection() {
 								</button>
 							</div>
 							<button
+								data-testid="generate-webhook-secret"
 								type="button"
 								onClick={generateSecret}
 								style={{ padding: "0.4rem 0.65rem", borderRadius: "6px", border: "1px solid var(--border)", background: "transparent", cursor: "pointer", color: "var(--muted-foreground)", fontSize: "0.75rem", whiteSpace: "nowrap", display: "flex", alignItems: "center", gap: "0.3rem" }}
@@ -1184,6 +1229,7 @@ function RevalidationSection() {
 							</button>
 							{secret && (
 								<button
+									data-testid="copy-webhook-secret"
 									type="button"
 									onClick={() => copyToClipboard(secret, "secret")}
 									style={{ padding: "0.4rem", borderRadius: "6px", border: "1px solid var(--border)", background: "transparent", cursor: "pointer", color: "var(--muted-foreground)", display: "flex", alignItems: "center" }}
@@ -1203,6 +1249,7 @@ function RevalidationSection() {
 						<div style={{ display: "flex", gap: "0.5rem" }}>
 							{url && (
 								<button
+									data-testid="send-test-ping"
 									type="button"
 									onClick={sendPing}
 									disabled={pinging}
@@ -1256,6 +1303,7 @@ function RevalidationSection() {
 							</div>
 						)}
 						<button
+							data-testid="toggle-recent-deliveries"
 							type="button"
 							onClick={() => setLogOpen((v) => !v)}
 							style={{ fontSize: "0.7rem", fontWeight: 600, color: "var(--muted-foreground)", textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: logOpen ? "0.5rem" : 0, background: "none", border: "none", cursor: "pointer", padding: 0, display: "flex", alignItems: "center", gap: "0.35rem" }}
@@ -1379,6 +1427,7 @@ function DangerZone() {
 					</div>
 					{!confirm && !done && (
 						<button
+							data-testid="purge-trash-button"
 							type="button"
 							onClick={() => setConfirm(true)}
 							style={{ flexShrink: 0, padding: "0.4rem 0.875rem", borderRadius: "6px", border: "1px solid color-mix(in srgb, var(--destructive) 40%, transparent)", background: "transparent", color: "var(--destructive)", fontSize: "0.8rem", cursor: "pointer", whiteSpace: "nowrap" }}
@@ -1397,8 +1446,17 @@ function DangerZone() {
 					<div style={{ display: "flex", alignItems: "center", gap: "0.625rem", padding: "0.75rem", background: "var(--card)", borderRadius: "7px", border: "1px solid var(--border)" }}>
 						<AlertTriangle style={{ width: "0.9rem", height: "0.9rem", color: "var(--destructive)", flexShrink: 0 }} />
 						<span style={{ fontSize: "0.8rem", flex: 1 }}>This cannot be undone. Are you sure?</span>
-						<button type="button" onClick={() => setConfirm(false)} style={{ padding: "0.3rem 0.625rem", borderRadius: "5px", border: "1px solid var(--border)", background: "transparent", color: "var(--muted-foreground)", fontSize: "0.75rem", cursor: "pointer" }}>Cancel</button>
-						<button type="button" onClick={purgeTrash} disabled={purging} style={{ padding: "0.3rem 0.625rem", borderRadius: "5px", border: "none", background: "var(--destructive)", color: "#fff", fontSize: "0.75rem", cursor: purging ? "wait" : "pointer" }}>
+						<button
+							data-testid="purge-trash-cancel"
+							type="button"
+							onClick={() => setConfirm(false)}
+							style={{ padding: "0.3rem 0.625rem", borderRadius: "5px", border: "1px solid var(--border)", background: "transparent", color: "var(--muted-foreground)", fontSize: "0.75rem", cursor: "pointer" }}>Cancel</button>
+						<button
+							data-testid="purge-trash-confirm"
+							type="button"
+							onClick={purgeTrash}
+							disabled={purging}
+							style={{ padding: "0.3rem 0.625rem", borderRadius: "5px", border: "none", background: "var(--destructive)", color: "#fff", fontSize: "0.75rem", cursor: purging ? "wait" : "pointer" }}>
 							{purging ? "Purging…" : "Yes, purge"}
 						</button>
 					</div>
@@ -1425,6 +1483,7 @@ function DangerZone() {
 											/>
 										</div>
 										<button
+											data-testid="move-site-button"
 											type="button"
 											disabled={!targetOrgId}
 											onClick={() => setMoveConfirm(true)}
@@ -1448,8 +1507,17 @@ function DangerZone() {
 								<span style={{ fontSize: "0.8rem", flex: 1 }}>
 									Move <strong>{activeSiteName || activeSiteId}</strong> to <strong>{targetOrgName}</strong>? Settings and content will be preserved.
 								</span>
-								<button type="button" onClick={() => setMoveConfirm(false)} style={{ padding: "0.3rem 0.625rem", borderRadius: "5px", border: "1px solid var(--border)", background: "transparent", color: "var(--muted-foreground)", fontSize: "0.75rem", cursor: "pointer" }}>No</button>
-								<button type="button" onClick={handleMove} disabled={moving} style={{ padding: "0.3rem 0.625rem", borderRadius: "5px", border: "none", background: "var(--destructive)", color: "#fff", fontSize: "0.75rem", cursor: moving ? "wait" : "pointer" }}>
+								<button
+									data-testid="move-site-cancel"
+									type="button"
+									onClick={() => setMoveConfirm(false)}
+									style={{ padding: "0.3rem 0.625rem", borderRadius: "5px", border: "1px solid var(--border)", background: "transparent", color: "var(--muted-foreground)", fontSize: "0.75rem", cursor: "pointer" }}>No</button>
+								<button
+									data-testid="move-site-confirm"
+									type="button"
+									onClick={handleMove}
+									disabled={moving}
+									style={{ padding: "0.3rem 0.625rem", borderRadius: "5px", border: "none", background: "var(--destructive)", color: "#fff", fontSize: "0.75rem", cursor: moving ? "wait" : "pointer" }}>
 									{moving ? "Moving…" : "Yes"}
 								</button>
 							</div>
@@ -1589,17 +1657,28 @@ export function PasswordChangePanel() {
 		<div>
 			<SectionHeading>Change password</SectionHeading>
 			<Card>
-				<form onSubmit={savePassword} style={{ display: "flex", flexDirection: "column", gap: "0.875rem" }}>
+				<form
+					data-testid="change-password-form"
+					onSubmit={savePassword}
+					style={{ display: "flex", flexDirection: "column", gap: "0.875rem" }}>
 					<div style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
 						<label style={{ fontSize: "0.75rem", fontWeight: 500 }}>Current password</label>
 						<div style={{ position: "relative" }}>
 							<input
-								type={showCur ? "text" : "password"} value={curPw} onChange={(e) => setCurPw(e.target.value)} required
+								data-testid="current-password-input"
+								type={showCur ? "text" : "password"}
+								value={curPw}
+								onChange={(e) => setCurPw(e.target.value)}
+								required
 								style={{ padding: "0.45rem 2.25rem 0.45rem 0.75rem", borderRadius: "7px", border: "1px solid var(--border)", background: "var(--background)", color: "var(--foreground)", fontSize: "0.875rem", outline: "none", width: "100%", boxSizing: "border-box" }}
 								onFocus={(e) => { e.target.style.borderColor = "var(--primary)"; }}
 								onBlur={(e) => { e.target.style.borderColor = "var(--border)"; }}
 							/>
-							<button type="button" onClick={() => setShowCur((v) => !v)} style={{ position: "absolute", right: "0.5rem", top: "50%", transform: "translateY(-50%)", background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", padding: "0.1rem" }}>
+							<button
+								data-testid="toggle-current-password-visibility"
+								type="button"
+								onClick={() => setShowCur((v) => !v)}
+								style={{ position: "absolute", right: "0.5rem", top: "50%", transform: "translateY(-50%)", background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", padding: "0.1rem" }}>
 								{showCur ? <EyeOff style={{ width: "0.9rem", height: "0.9rem" }} /> : <Eye style={{ width: "0.9rem", height: "0.9rem" }} />}
 							</button>
 						</div>
@@ -1608,12 +1687,22 @@ export function PasswordChangePanel() {
 						<label style={{ fontSize: "0.75rem", fontWeight: 500 }}>New password</label>
 						<div style={{ position: "relative" }}>
 							<input
-								type={showNew ? "text" : "password"} value={newPw} onChange={(e) => setNewPw(e.target.value)} required minLength={8} placeholder="Min 8 characters"
+								data-testid="new-password-input"
+								type={showNew ? "text" : "password"}
+								value={newPw}
+								onChange={(e) => setNewPw(e.target.value)}
+								required
+								minLength={8}
+								placeholder="Min 8 characters"
 								style={{ padding: "0.45rem 2.25rem 0.45rem 0.75rem", borderRadius: "7px", border: "1px solid var(--border)", background: "var(--background)", color: "var(--foreground)", fontSize: "0.875rem", outline: "none", width: "100%", boxSizing: "border-box" }}
 								onFocus={(e) => { e.target.style.borderColor = "var(--primary)"; }}
 								onBlur={(e) => { e.target.style.borderColor = "var(--border)"; }}
 							/>
-							<button type="button" onClick={() => setShowNew((v) => !v)} style={{ position: "absolute", right: "0.5rem", top: "50%", transform: "translateY(-50%)", background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", padding: "0.1rem" }}>
+							<button
+								data-testid="toggle-new-password-visibility"
+								type="button"
+								onClick={() => setShowNew((v) => !v)}
+								style={{ position: "absolute", right: "0.5rem", top: "50%", transform: "translateY(-50%)", background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", padding: "0.1rem" }}>
 								{showNew ? <EyeOff style={{ width: "0.9rem", height: "0.9rem" }} /> : <Eye style={{ width: "0.9rem", height: "0.9rem" }} />}
 							</button>
 						</div>
@@ -1723,6 +1812,7 @@ function SchedulerNotificationsSection() {
 								Webhook URL
 							</label>
 							<input
+								data-testid="scheduler-webhook-url-input"
 								type="url"
 								value={webhookUrl}
 								onChange={(e) => setWebhookUrl(e.target.value)}
@@ -1736,6 +1826,7 @@ function SchedulerNotificationsSection() {
 
 						<div style={{ display: "flex", gap: "0.5rem" }}>
 							<button
+								data-testid="scheduler-notifications-save"
 								type="button"
 								onClick={save}
 								disabled={saving}
@@ -1749,6 +1840,7 @@ function SchedulerNotificationsSection() {
 							</button>
 							{webhookUrl && (
 								<button
+									data-testid="scheduler-notifications-test"
 									type="button"
 									onClick={testWebhook}
 									disabled={testing}
diff --git a/packages/cms-admin/src/components/settings/geo-settings-panel.tsx b/packages/cms-admin/src/components/settings/geo-settings-panel.tsx
index e6396d8d0..34c387d72 100644
--- a/packages/cms-admin/src/components/settings/geo-settings-panel.tsx
+++ b/packages/cms-admin/src/components/settings/geo-settings-panel.tsx
@@ -111,6 +111,7 @@ export function GeoSettingsPanel() {
             <div style={{ marginTop: "0.75rem" }}>
               <p style={{ fontSize: "0.65rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.06em", color: "var(--muted-foreground)", marginBottom: "0.25rem" }}>Custom rules</p>
               <textarea
+                data-testid="geo-robots-custom-rules"
                 value={config.robotsCustomRules}
                 onChange={(e) => update("robotsCustomRules", e.target.value)}
                 placeholder={"User-agent: GPTBot\nDisallow: /"}
diff --git a/packages/cms-admin/src/components/settings/mcp-settings-panel.tsx b/packages/cms-admin/src/components/settings/mcp-settings-panel.tsx
index c093d149e..6033e103f 100644
--- a/packages/cms-admin/src/components/settings/mcp-settings-panel.tsx
+++ b/packages/cms-admin/src/components/settings/mcp-settings-panel.tsx
@@ -37,6 +37,7 @@ function CopyButton({ text }: { text: string }) {
   const [copied, setCopied] = useState(false);
   return (
     <button
+      data-testid="mcp-copy-btn"
       type="button"
       title="Copy to clipboard"
       onClick={async () => {
@@ -153,7 +154,7 @@ export function MCPSettingsPanel() {
             { label: "Public (read-only, rate-limited)", url: publicEndpoint },
             { label: "Admin (authenticated, full access)", url: adminEndpoint },
           ].map(({ label, url }) => (
-            <div key={url} style={{ display: "flex", alignItems: "center", gap: "0.75rem", padding: "0.6rem 0.75rem", borderRadius: "8px", border: "1px solid var(--border)", background: "var(--card)" }}>
+            <div data-testid="mcp-endpoint-item" key={url} style={{ display: "flex", alignItems: "center", gap: "0.75rem", padding: "0.6rem 0.75rem", borderRadius: "8px", border: "1px solid var(--border)", background: "var(--card)" }}>
               <div style={{ flex: 1, minWidth: 0 }}>
                 <p style={{ fontSize: "0.7rem", color: "var(--muted-foreground)", marginBottom: "0.15rem" }}>{label}</p>
                 <code style={{ fontSize: "0.75rem", color: "var(--foreground)", wordBreak: "break-all" }}>{url}</code>
@@ -173,6 +174,7 @@ export function MCPSettingsPanel() {
         <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "0.75rem" }}>
           <h2 className="text-muted-foreground dark:text-white" style={{ fontSize: "0.8rem", fontWeight: 700, letterSpacing: "0.07em", textTransform: "uppercase", margin: 0 }}>API Keys</h2>
           <button
+            data-testid="mcp-new-key-button"
             type="button"
             onClick={() => { setShowAddForm(true); setNewKey(generateKey()); }}
             style={{
@@ -218,17 +220,18 @@ export function MCPSettingsPanel() {
               </div>
               {confirmRemoveKey === k.id ? (
                 <div style={{ display: "flex", alignItems: "center", gap: "0.375rem" }}>
-                  <button type="button" onClick={() => setConfirmRemoveKey(null)}
+                  <button data-testid="mcp-key-remove-cancel" type="button" onClick={() => setConfirmRemoveKey(null)}
                     style={{ padding: "0.3rem 0.5rem", borderRadius: "5px", border: "1px solid var(--border)", background: "transparent", color: "var(--muted-foreground)", fontSize: "0.7rem", cursor: "pointer" }}>
                     Cancel
                   </button>
-                  <button type="button" onClick={() => { handleRemove(k.id); setConfirmRemoveKey(null); }} disabled={removing === k.id}
+                  <button data-testid="mcp-key-remove-confirm" type="button" onClick={() => { handleRemove(k.id); setConfirmRemoveKey(null); }} disabled={removing === k.id}
                     style={{ padding: "0.3rem 0.5rem", borderRadius: "5px", border: "none", background: "var(--destructive)", color: "#fff", fontSize: "0.7rem", cursor: "pointer", opacity: removing === k.id ? 0.5 : 1 }}>
                     {removing === k.id ? "Removing…" : "Confirm"}
                   </button>
                 </div>
               ) : (
                 <button
+                  data-testid="mcp-key-remove-trigger"
                   type="button"
                   onClick={() => setConfirmRemoveKey(k.id)}
                   style={{
@@ -255,6 +258,7 @@ export function MCPSettingsPanel() {
             <div>
               <label style={{ fontSize: "0.75rem", fontWeight: 500, display: "block", marginBottom: "0.35rem" }}>Label</label>
               <input
+                data-testid="mcp-add-label-input"
                 type="text"
                 value={newLabel}
                 onChange={(e) => setNewLabel(e.target.value)}
@@ -267,6 +271,7 @@ export function MCPSettingsPanel() {
               <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "0.35rem" }}>
                 <label style={{ fontSize: "0.75rem", fontWeight: 500 }}>Key</label>
                 <button
+                  data-testid="mcp-add-key-regenerate"
                   type="button"
                   onClick={() => setNewKey(generateKey())}
                   style={{ display: "flex", alignItems: "center", gap: "0.2rem", fontSize: "0.7rem", color: "var(--muted-foreground)", background: "none", border: "none", cursor: "pointer" }}
@@ -276,6 +281,7 @@ export function MCPSettingsPanel() {
               </div>
               <div style={{ display: "flex", gap: "0.375rem" }}>
                 <input
+                  data-testid="mcp-add-key-input"
                   type="text"
                   value={newKey}
                   onChange={(e) => setNewKey(e.target.value)}
@@ -314,6 +320,7 @@ export function MCPSettingsPanel() {
 
             <div style={{ display: "flex", gap: "0.5rem" }}>
               <button
+                data-testid="mcp-add-key-save"
                 type="button"
                 onClick={handleAdd}
                 disabled={adding}
@@ -328,6 +335,7 @@ export function MCPSettingsPanel() {
                 {adding ? "Saving…" : "Save key"}
               </button>
               <button
+                data-testid="mcp-add-key-cancel"
                 type="button"
                 onClick={() => { setShowAddForm(false); setAddError(""); }}
                 style={{
@@ -482,6 +490,7 @@ function ExternalMcpServers() {
           </p>
         </div>
         <button
+          data-testid="mcp-server-add-button"
           type="button"
           onClick={() => setShowAdd(true)}
           style={{
@@ -521,13 +530,13 @@ function ExternalMcpServers() {
               </div>
               {confirmDeleteId === s.id ? (
                 <span style={{ display: "flex", alignItems: "center", gap: "0.375rem", flexShrink: 0, minWidth: "12rem", justifyContent: "flex-end" }}>
-                  <button type="button" onClick={() => setConfirmDeleteId(null)}
+                  <button data-testid="mcp-server-delete-cancel" type="button" onClick={() => setConfirmDeleteId(null)}
                     style={{ padding: "0.3rem 0.6rem", borderRadius: "6px",
                       border: "1px solid var(--border)", background: "transparent",
                       color: "var(--muted-foreground)", fontSize: "0.75rem", cursor: "pointer" }}>
                     Cancel
                   </button>
-                  <button type="button" onClick={() => { removeServer(s.id); setConfirmDeleteId(null); }}
+                  <button data-testid="mcp-server-delete-confirm" type="button" onClick={() => { removeServer(s.id); setConfirmDeleteId(null); }}
                     style={{ padding: "0.3rem 0.6rem", borderRadius: "6px",
                       border: "none", background: "var(--destructive)", color: "#fff",
                       fontSize: "0.75rem", fontWeight: 600, cursor: "pointer" }}>
@@ -536,11 +545,11 @@ function ExternalMcpServers() {
                 </span>
               ) : (
                 <span style={{ display: "flex", alignItems: "center", gap: "0.375rem", flexShrink: 0, minWidth: "12rem", justifyContent: "flex-end" }}>
-                  <button type="button" onClick={() => startEdit(s)} title="Edit JSON config"
+                  <button data-testid="mcp-server-edit-json" type="button" onClick={() => startEdit(s)} title="Edit JSON config"
                     style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", padding: "0.25rem" }}>
                     <Pencil style={{ width: "0.8rem", height: "0.8rem" }} />
                   </button>
-                  <button type="button" onClick={() => {
+                  <button data-testid="mcp-server-toggle-json" type="button" onClick={() => {
                       if (editingId === s.id) { setEditingId(null); } else { startEdit(s); }
                     }} title="Toggle JSON view"
                     style={{
@@ -554,11 +563,11 @@ function ExternalMcpServers() {
                     <Braces style={{ width: "0.65rem", height: "0.65rem" }} />
                     JSON
                   </button>
-                  <button type="button" onClick={() => toggleEnabled(s.id, !s.enabled)} title={s.enabled ? "Disable server" : "Enable server"}
+                  <button data-testid="mcp-server-toggle-enabled" type="button" onClick={() => toggleEnabled(s.id, !s.enabled)} title={s.enabled ? "Disable server" : "Enable server"}
                     style={{ background: "none", border: "none", cursor: "pointer", color: s.enabled ? "var(--primary)" : "var(--muted-foreground)", padding: "0.25rem" }}>
                     {s.enabled ? <Power style={{ width: "0.9rem", height: "0.9rem" }} /> : <PowerOff style={{ width: "0.9rem", height: "0.9rem" }} />}
                   </button>
-                  <button type="button" onClick={() => setConfirmDeleteId(s.id)} title="Remove server"
+                  <button data-testid="mcp-server-delete-trigger" type="button" onClick={() => setConfirmDeleteId(s.id)} title="Remove server"
                     style={{
                       display: "flex", alignItems: "center", gap: "0.3rem",
                       padding: "0.35rem 0.6rem", borderRadius: "6px",
@@ -576,6 +585,7 @@ function ExternalMcpServers() {
             {editingId === s.id && (
               <div style={{ padding: "0 0.75rem 0.75rem", borderTop: "1px solid var(--border)", marginTop: "0" }}>
                 <textarea
+                  data-testid="mcp-server-json-editor"
                   value={editJson}
                   onChange={(e) => setEditJson(e.target.value)}
                   rows={Math.max(6, editJson.split("\n").length + 1)}
@@ -590,12 +600,12 @@ function ExternalMcpServers() {
                 />
                 {editError && <p style={{ fontSize: "0.72rem", color: "var(--destructive)", marginTop: "0.25rem" }}>{editError}</p>}
                 <div style={{ display: "flex", gap: "0.375rem", marginTop: "0.5rem" }}>
-                  <button type="button" onClick={saveEdit}
+                  <button data-testid="mcp-server-json-save" type="button" onClick={saveEdit}
                     style={{ padding: "0.35rem 0.75rem", borderRadius: "6px", border: "none", background: "var(--primary)", color: "var(--primary-foreground)", fontSize: "0.75rem", fontWeight: 600, cursor: "pointer" }}>
                     Save
                   </button>
                   <CopyButton text={editJson} />
-                  <button type="button" onClick={() => setEditingId(null)}
+                  <button data-testid="mcp-server-json-cancel" type="button" onClick={() => setEditingId(null)}
                     style={{ padding: "0.35rem 0.75rem", borderRadius: "6px", border: "1px solid var(--border)", background: "transparent", color: "var(--muted-foreground)", fontSize: "0.75rem", cursor: "pointer" }}>
                     Cancel
                   </button>
@@ -619,7 +629,7 @@ function ExternalMcpServers() {
         <div style={{ marginTop: "0.75rem", padding: "1rem", borderRadius: "8px", border: "1px solid var(--border)", background: "var(--card)", display: "flex", flexDirection: "column", gap: "0.75rem" }}>
           <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
             <p style={{ fontSize: "0.8rem", fontWeight: 600 }}>Add MCP Server</p>
-            <button type="button" onClick={() => setShowAdd(false)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)" }}>
+            <button data-testid="mcp-add-server-close" type="button" onClick={() => setShowAdd(false)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)" }}>
               <X style={{ width: "0.8rem", height: "0.8rem" }} />
             </button>
           </div>
@@ -630,6 +640,7 @@ function ExternalMcpServers() {
             <div style={{ display: "flex", flexWrap: "wrap", gap: "0.375rem" }}>
               {PRESETS.filter((p) => !servers.some((s) => s.name === p.name)).map((preset) => (
                 <button
+                  data-testid={`mcp-preset-${preset.name.toLowerCase().replace(/\s+/g, '-')}`}
                   key={preset.name}
                   type="button"
                   onClick={() => addPreset(preset)}
@@ -655,18 +666,18 @@ function ExternalMcpServers() {
           <div style={{ display: "flex", gap: "0.5rem" }}>
             <div style={{ flex: 1 }}>
               <label style={{ fontSize: "0.7rem", fontWeight: 500, display: "block", marginBottom: "0.2rem" }}>Name</label>
-              <input type="text" value={newName} onChange={(e) => setNewName(e.target.value)} placeholder="My Server"
+              <input data-testid="mcp-custom-server-name" type="text" value={newName} onChange={(e) => setNewName(e.target.value)} placeholder="My Server"
                 style={{ width: "100%", padding: "0.4rem 0.6rem", borderRadius: "6px", border: "1px solid var(--border)", background: "var(--background)", color: "var(--foreground)", fontSize: "0.8rem", outline: "none", boxSizing: "border-box" }} />
             </div>
             <div style={{ width: "80px" }}>
               <label style={{ fontSize: "0.7rem", fontWeight: 500, display: "block", marginBottom: "0.2rem" }}>Command</label>
-              <input type="text" value={newCommand} onChange={(e) => setNewCommand(e.target.value)} placeholder="npx"
+              <input data-testid="mcp-custom-server-command" type="text" value={newCommand} onChange={(e) => setNewCommand(e.target.value)} placeholder="npx"
                 style={{ width: "100%", padding: "0.4rem 0.6rem", borderRadius: "6px", border: "1px solid var(--border)", background: "var(--background)", color: "var(--foreground)", fontSize: "0.8rem", fontFamily: "monospace", outline: "none", boxSizing: "border-box" }} />
             </div>
           </div>
           <div>
             <label style={{ fontSize: "0.7rem", fontWeight: 500, display: "block", marginBottom: "0.2rem" }}>Arguments (space-separated)</label>
-            <input type="text" value={newArgs} onChange={(e) => setNewArgs(e.target.value)} placeholder="-y @anthropic/mcp-memory"
+            <input data-testid="mcp-custom-server-args" type="text" value={newArgs} onChange={(e) => setNewArgs(e.target.value)} placeholder="-y @anthropic/mcp-memory"
               style={{ width: "100%", padding: "0.4rem 0.6rem", borderRadius: "6px", border: "1px solid var(--border)", background: "var(--background)", color: "var(--foreground)", fontSize: "0.8rem", fontFamily: "monospace", outline: "none", boxSizing: "border-box" }} />
           </div>
 
@@ -676,20 +687,20 @@ function ExternalMcpServers() {
             {Object.entries(newEnvPairs).map(([k, v]) => (
               <div key={k} style={{ display: "flex", gap: "0.375rem", marginBottom: "0.25rem" }}>
                 <code style={{ fontSize: "0.75rem", padding: "0.3rem 0.5rem", background: "var(--secondary)", borderRadius: "4px", minWidth: "120px" }}>{k}</code>
-                <input type="text" value={v} onChange={(e) => setNewEnvPairs((p) => ({ ...p, [k]: e.target.value }))} placeholder="value"
+                <input data-testid={`mcp-env-value-${k}`} type="text" value={v} onChange={(e) => setNewEnvPairs((p) => ({ ...p, [k]: e.target.value }))} placeholder="value"
                   style={{ flex: 1, padding: "0.3rem 0.5rem", borderRadius: "4px", border: "1px solid var(--border)", background: "var(--background)", color: "var(--foreground)", fontSize: "0.75rem", fontFamily: "monospace", outline: "none" }} />
-                <button type="button" onClick={() => setNewEnvPairs((p) => { const n = { ...p }; delete n[k]; return n; })}
+                <button data-testid={`mcp-env-remove-${k}`} type="button" onClick={() => setNewEnvPairs((p) => { const n = { ...p }; delete n[k]; return n; })}
                   style={{ background: "none", border: "none", cursor: "pointer", color: "var(--destructive)", padding: "0.2rem" }}>
                   <X style={{ width: "0.7rem", height: "0.7rem" }} />
                 </button>
               </div>
             ))}
             <div style={{ display: "flex", gap: "0.375rem" }}>
-              <input type="text" value={newEnvKey} onChange={(e) => setNewEnvKey(e.target.value)} placeholder="KEY_NAME"
+              <input data-testid="mcp-env-key-input" type="text" value={newEnvKey} onChange={(e) => setNewEnvKey(e.target.value)} placeholder="KEY_NAME"
                 style={{ width: "120px", padding: "0.3rem 0.5rem", borderRadius: "4px", border: "1px solid var(--border)", background: "var(--background)", color: "var(--foreground)", fontSize: "0.75rem", fontFamily: "monospace", outline: "none" }} />
-              <input type="text" value={newEnvVal} onChange={(e) => setNewEnvVal(e.target.value)} placeholder="value"
+              <input data-testid="mcp-env-val-input" type="text" value={newEnvVal} onChange={(e) => setNewEnvVal(e.target.value)} placeholder="value"
                 style={{ flex: 1, padding: "0.3rem 0.5rem", borderRadius: "4px", border: "1px solid var(--border)", background: "var(--background)", color: "var(--foreground)", fontSize: "0.75rem", fontFamily: "monospace", outline: "none" }} />
-              <button type="button" onClick={() => { if (newEnvKey.trim()) { setNewEnvPairs((p) => ({ ...p, [newEnvKey]: newEnvVal })); setNewEnvKey(""); setNewEnvVal(""); } }}
+              <button data-testid="mcp-env-add-button" type="button" onClick={() => { if (newEnvKey.trim()) { setNewEnvPairs((p) => ({ ...p, [newEnvKey]: newEnvVal })); setNewEnvKey(""); setNewEnvVal(""); } }}
                 style={{ padding: "0.3rem 0.5rem", borderRadius: "4px", border: "1px solid var(--border)", background: "transparent", color: "var(--foreground)", fontSize: "0.7rem", cursor: "pointer" }}>
                 Add
               </button>
@@ -697,6 +708,7 @@ function ExternalMcpServers() {
           </div>
 
           <button
+            data-testid="mcp-custom-server-add"
             type="button"
             disabled={saving || !newName.trim() || !newArgs.trim()}
             onClick={() => addServer(newName, newCommand, newArgs.split(/\s+/).filter(Boolean), newEnvPairs)}
diff --git a/packages/cms-admin/src/components/settings/passkeys-panel.tsx b/packages/cms-admin/src/components/settings/passkeys-panel.tsx
index fc50f0558..62f89fc2e 100644
--- a/packages/cms-admin/src/components/settings/passkeys-panel.tsx
+++ b/packages/cms-admin/src/components/settings/passkeys-panel.tsx
@@ -156,12 +156,14 @@ export function PasskeysPanel() {
                   <>
                     <span style={{ fontSize: "0.65rem", color: "var(--destructive)", fontWeight: 500, padding: "0 2px" }}>Remove?</span>
                     <button
+                      data-testid={`passkey-remove-yes-${p.id}`}
                       onClick={() => handleRemove(p.id)}
                       style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "none", background: "var(--destructive)", color: "#fff", cursor: "pointer", lineHeight: 1 }}
                     >
                       Yes
                     </button>
                     <button
+                      data-testid={`passkey-remove-no-${p.id}`}
                       onClick={() => setConfirmId(null)}
                       style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px", border: "1px solid var(--border)", background: "transparent", color: "var(--foreground)", cursor: "pointer", lineHeight: 1 }}
                     >
@@ -170,6 +172,7 @@ export function PasskeysPanel() {
                   </>
                 ) : (
                   <button
+                    data-testid={`passkey-remove-trigger-${p.id}`}
                     onClick={() => setConfirmId(p.id)}
                     style={{ fontSize: "0.7rem", padding: "0.1rem 0.4rem", borderRadius: "3px", border: "1px solid var(--border)", background: "transparent", color: "var(--foreground)", cursor: "pointer" }}
                   >
@@ -183,6 +186,7 @@ export function PasskeysPanel() {
       )}
 
       <button
+        data-testid="passkey-add-button"
         type="button"
         onClick={handleAdd}
         disabled={adding}
diff --git a/packages/cms-admin/src/components/settings/settings-card.tsx b/packages/cms-admin/src/components/settings/settings-card.tsx
index ff3c5acdd..8a011de4b 100644
--- a/packages/cms-admin/src/components/settings/settings-card.tsx
+++ b/packages/cms-admin/src/components/settings/settings-card.tsx
@@ -42,6 +42,7 @@ export function SettingsInput({ label, description, copiable, ...inputProps }: {
       {description && <p style={{ fontSize: "0.7rem", color: "var(--muted-foreground)", margin: 0 }}>{description}</p>}
       <div style={{ position: "relative" }}>
         <input
+          data-testid="settings-input-field"
           {...inputProps}
           style={{
             padding: "0.45rem 0.75rem",
@@ -60,6 +61,7 @@ export function SettingsInput({ label, description, copiable, ...inputProps }: {
         />
         {copiable && inputProps.value && (
           <button
+            data-testid="settings-input-copy-button"
             type="button"
             onClick={handleCopy}
             title="Copy to clipboard"
diff --git a/packages/cms-admin/src/components/settings/settings-save-button.tsx b/packages/cms-admin/src/components/settings/settings-save-button.tsx
index 9d7b82897..841a97fcf 100644
--- a/packages/cms-admin/src/components/settings/settings-save-button.tsx
+++ b/packages/cms-admin/src/components/settings/settings-save-button.tsx
@@ -40,6 +40,7 @@ export function SettingsSaveButton() {
 
   return (
     <button
+      data-testid="settings-save-button"
       type="button"
       onClick={handleSave}
       disabled={saving}
diff --git a/packages/cms-admin/src/components/settings/team-panel.tsx b/packages/cms-admin/src/components/settings/team-panel.tsx
index 815986af0..739bd161d 100644
--- a/packages/cms-admin/src/components/settings/team-panel.tsx
+++ b/packages/cms-admin/src/components/settings/team-panel.tsx
@@ -71,6 +71,7 @@ function CopyButton({ text }: { text: string }) {
   const [copied, setCopied] = useState(false);
   return (
     <button
+      data-testid="copy-invite-link-button"
       type="button"
       onClick={async () => {
         await navigator.clipboard.writeText(text);
@@ -232,9 +233,10 @@ export function TeamPanel() {
         <p className="text-xs text-muted-foreground" style={{ marginTop: "-0.5rem", marginBottom: "1rem" }}>
           Invite an existing user or a new email address to this site.
         </p>
-        <form onSubmit={handleInvite} style={{ display: "flex", gap: "0.5rem", alignItems: "flex-start" }}>
+        <form data-testid="team-invite-form" onSubmit={handleInvite} style={{ display: "flex", gap: "0.5rem", alignItems: "flex-start" }}>
           <div style={{ flex: 1, position: "relative" }}>
             <input
+              data-testid="team-invite-email-input"
               ref={inputRef}
               type="email"
               placeholder="email@example.com"
@@ -289,6 +291,7 @@ export function TeamPanel() {
               >
                 {(inviteEmail.length === 0 ? availableUsers : filteredSuggestions(inviteEmail)).map((u) => (
                   <button
+                    data-testid={`team-suggest-${u.id}`}
                     key={u.id}
                     type="button"
                     onClick={() => {
@@ -329,7 +332,7 @@ export function TeamPanel() {
               onChange={setInviteRole}
             />
           </div>
-          <Button type="submit" size="sm" disabled={inviting} className="gap-1.5">
+          <Button data-testid="team-invite-submit" type="submit" size="sm" disabled={inviting} className="gap-1.5">
             <UserPlus className="w-3.5 h-3.5" />
             {inviting ? "Sending..." : "Invite"}
           </Button>
@@ -450,6 +453,7 @@ export function TeamPanel() {
                       {confirmDeleteId === user.id ? (
                         <div style={{ display: "flex", alignItems: "center", gap: "0.25rem" }}>
                           <button
+                            data-testid={`team-user-delete-confirm-${user.id}`}
                             type="button"
                             onClick={() => handleDeleteUser(user.id)}
                             style={{
@@ -465,6 +469,7 @@ export function TeamPanel() {
                             OK
                           </button>
                           <button
+                            data-testid={`team-user-delete-cancel-${user.id}`}
                             type="button"
                             onClick={() => setConfirmDeleteId(null)}
                             style={{
@@ -482,6 +487,7 @@ export function TeamPanel() {
                         </div>
                       ) : (
                         <button
+                          data-testid={`team-user-delete-button-${user.id}`}
                           type="button"
                           onClick={() => setConfirmDeleteId(user.id)}
                           title="Remove user"
@@ -559,6 +565,7 @@ export function TeamPanel() {
                   {confirmRevokeId === inv.id ? (
                     <div style={{ display: "flex", alignItems: "center", gap: "0.25rem" }}>
                       <button
+                        data-testid={`team-invite-revoke-confirm-${inv.id}`}
                         type="button"
                         onClick={() => handleRevokeInvite(inv.id)}
                         style={{
@@ -574,6 +581,7 @@ export function TeamPanel() {
                         OK
                       </button>
                       <button
+                        data-testid={`team-invite-revoke-cancel-${inv.id}`}
                         type="button"
                         onClick={() => setConfirmRevokeId(null)}
                         style={{
@@ -591,6 +599,7 @@ export function TeamPanel() {
                     </div>
                   ) : (
                     <button
+                      data-testid={`team-invite-revoke-button-${inv.id}`}
                       type="button"
                       onClick={() => setConfirmRevokeId(inv.id)}
                       title="Revoke invitation"
diff --git a/packages/cms-admin/src/components/settings/tools-settings-panel.tsx b/packages/cms-admin/src/components/settings/tools-settings-panel.tsx
index 4a56a5626..cac695369 100644
--- a/packages/cms-admin/src/components/settings/tools-settings-panel.tsx
+++ b/packages/cms-admin/src/components/settings/tools-settings-panel.tsx
@@ -105,7 +105,7 @@ export function ToolsSettingsPanel() {
   const webhookLabel = { display: "block", fontSize: "0.75rem", fontWeight: 500, marginBottom: "0.35rem", marginTop: "0.75rem" } as const;
 
   return (
-    <div data-testid="panel-tools">
+    <div data-testid="tools-settings-panel">
       {/* ── Link Checker ───────────────────────────────────── */}
       <SectionHeading>Link Checker</SectionHeading>
       <SettingsCard>
@@ -234,6 +234,7 @@ export function ToolsSettingsPanel() {
         <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
           <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
             <input
+              data-testid="tools-media-auto-optimize"
               type="checkbox"
               checked={config.mediaAutoOptimize}
               onChange={(e) => updateConfig((c) => ({ ...c, mediaAutoOptimize: e.target.checked }))}
@@ -250,6 +251,7 @@ export function ToolsSettingsPanel() {
           <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
             <label style={{ fontSize: "0.8rem", fontWeight: 500 }}>Variant widths (px)</label>
             <input
+              data-testid="tools-settings-media-variant-widths"
               type="text"
               value={config.mediaVariantWidths.join(", ")}
               onChange={(e) => {
diff --git a/packages/cms-admin/src/components/settings/totp-panel.tsx b/packages/cms-admin/src/components/settings/totp-panel.tsx
index 9440df217..422b4ccc2 100644
--- a/packages/cms-admin/src/components/settings/totp-panel.tsx
+++ b/packages/cms-admin/src/components/settings/totp-panel.tsx
@@ -150,6 +150,7 @@ export function TotpPanel() {
             {backupCodes.join("\n")}
           </pre>
           <button
+            data-testid="totp-backup-codes-saved-button"
             onClick={() => setBackupCodes(null)}
             style={{
               marginTop: "0.5rem", fontSize: "0.7rem", padding: "0.25rem 0.6rem",
@@ -179,6 +180,7 @@ export function TotpPanel() {
             </details>
           )}
           <input
+            data-testid="totp-enroll-code-input"
             type="text"
             inputMode="numeric"
             value={enrollCode}
@@ -192,6 +194,7 @@ export function TotpPanel() {
           />
           <div style={{ display: "flex", gap: "0.5rem" }}>
             <button
+              data-testid="totp-verify-enable-button"
               onClick={confirmEnroll}
               disabled={busy || enrollCode.length < 6}
               style={{
@@ -203,6 +206,7 @@ export function TotpPanel() {
               {busy ? "..." : "Verify & enable"}
             </button>
             <button
+              data-testid="totp-enroll-cancel-button"
               onClick={() => { setEnrolling(false); setQrDataUrl(""); setSecret(""); setEnrollCode(""); }}
               style={{
                 fontSize: "0.75rem", padding: "0.4rem 0.9rem", borderRadius: "5px",
@@ -229,6 +233,7 @@ export function TotpPanel() {
               {confirmDisable ? (
                 <div style={{ display: "flex", gap: "0.4rem", alignItems: "center", flexWrap: "wrap" }}>
                   <input
+                    data-testid="totp-disable-code-input"
                     type="text"
                     inputMode="numeric"
                     value={disableCode}
@@ -241,6 +246,7 @@ export function TotpPanel() {
                     }}
                   />
                   <button
+                    data-testid="totp-disable-button"
                     onClick={handleDisable}
                     disabled={busy}
                     style={{
@@ -252,6 +258,7 @@ export function TotpPanel() {
                     {busy ? "..." : "Disable"}
                   </button>
                   <button
+                    data-testid="totp-disable-cancel-button"
                     onClick={() => { setConfirmDisable(false); setDisableCode(""); }}
                     style={{
                       fontSize: "0.7rem", padding: "0.3rem 0.7rem", borderRadius: "4px",
@@ -264,6 +271,7 @@ export function TotpPanel() {
                 </div>
               ) : (
                 <button
+                  data-testid="totp-disable-trigger-button"
                   onClick={() => setConfirmDisable(true)}
                   className="text-xs px-3 py-1.5 rounded-md border border-border bg-card text-foreground hover:bg-accent transition-colors cursor-pointer"
                 >
@@ -273,6 +281,7 @@ export function TotpPanel() {
             </div>
           ) : (
             <button
+              data-testid="totp-add-app-button"
               onClick={startEnroll}
               disabled={busy}
               className="text-xs px-3 py-1.5 rounded-md border border-border bg-card text-foreground hover:bg-accent transition-colors cursor-pointer"
diff --git a/packages/cms-admin/src/components/settings/webhook-list.tsx b/packages/cms-admin/src/components/settings/webhook-list.tsx
index f0e4a3039..b8f377dd1 100644
--- a/packages/cms-admin/src/components/settings/webhook-list.tsx
+++ b/packages/cms-admin/src/components/settings/webhook-list.tsx
@@ -110,6 +110,7 @@ export function WebhookList({ webhooks, onChange: onChangeRaw }: Props) {
               {/* Test */}
               <button
                 type="button"
+                data-testid={`webhook-test-${wh.id}`}
                 onClick={() => sendTest(wh.url, wh.id)}
                 disabled={testing === wh.id}
                 title="Send test"
@@ -130,6 +131,7 @@ export function WebhookList({ webhooks, onChange: onChangeRaw }: Props) {
               {/* Copy */}
               <button
                 type="button"
+                data-testid={`webhook-copy-${wh.id}`}
                 onClick={() => copyUrl(wh.url, wh.id)}
                 title="Copy URL"
                 style={{
@@ -145,6 +147,7 @@ export function WebhookList({ webhooks, onChange: onChangeRaw }: Props) {
               {/* Move up */}
               <button
                 type="button"
+                data-testid={`webhook-moveup-${wh.id}`}
                 onClick={() => moveUp(idx)}
                 disabled={idx === 0}
                 title="Move up"
@@ -161,6 +164,7 @@ export function WebhookList({ webhooks, onChange: onChangeRaw }: Props) {
               {/* Move down */}
               <button
                 type="button"
+                data-testid={`webhook-movedown-${wh.id}`}
                 onClick={() => moveDown(idx)}
                 disabled={idx === webhooks.length - 1}
                 title="Move down"
@@ -179,11 +183,11 @@ export function WebhookList({ webhooks, onChange: onChangeRaw }: Props) {
               {confirmRemove === wh.id ? (
                 <span style={{ display: "flex", alignItems: "center", gap: "0.25rem", flexShrink: 0 }}>
                   <span style={{ fontSize: "0.65rem", color: "var(--destructive)", fontWeight: 500, padding: "0 2px" }}>Remove?</span>
-                  <button type="button" onClick={() => remove(wh.id)}
+                  <button data-testid={`webhook-remove-confirm-yes-${wh.id}`} type="button" onClick={() => remove(wh.id)}
                     style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px",
                       border: "none", background: "var(--destructive)", color: "#fff",
                       cursor: "pointer", lineHeight: 1 }}>Yes</button>
-                  <button type="button" onClick={() => setConfirmRemove(null)}
+                  <button data-testid={`webhook-remove-confirm-no-${wh.id}`} type="button" onClick={() => setConfirmRemove(null)}
                     style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px",
                       border: "1px solid var(--border)", background: "transparent",
                       color: "var(--foreground)", cursor: "pointer", lineHeight: 1 }}>No</button>
@@ -191,6 +195,7 @@ export function WebhookList({ webhooks, onChange: onChangeRaw }: Props) {
               ) : (
                 <button
                   type="button"
+                  data-testid={`webhook-remove-${wh.id}`}
                   onClick={() => setConfirmRemove(wh.id)}
                   title="Remove webhook"
                   style={{
@@ -209,6 +214,7 @@ export function WebhookList({ webhooks, onChange: onChangeRaw }: Props) {
       {/* Add new webhook */}
       <div style={{ display: "flex", gap: "0.375rem" }}>
         <input
+          data-testid="webhook-input-url"
           type="url"
           value={newUrl}
           onChange={(e) => setNewUrl(e.target.value)}
@@ -221,6 +227,7 @@ export function WebhookList({ webhooks, onChange: onChangeRaw }: Props) {
           }}
         />
         <button
+          data-testid="webhook-add-button"
           type="button"
           onClick={add}
           disabled={!newUrl.trim()}
diff --git a/packages/cms-admin/src/components/settings/wp-migration-panel.tsx b/packages/cms-admin/src/components/settings/wp-migration-panel.tsx
index 52ebb7f3a..21920043b 100644
--- a/packages/cms-admin/src/components/settings/wp-migration-panel.tsx
+++ b/packages/cms-admin/src/components/settings/wp-migration-panel.tsx
@@ -127,6 +127,7 @@ export function WpMigrationPanel({ orgId, onComplete }: { orgId: string; onCompl
           <div style={{ display: "flex", gap: "0.5rem" }}>
             <input
               type="url"
+              data-testid="wp-url-input"
               value={url}
               onChange={(e) => setUrl(e.target.value)}
               placeholder="https://example.com"
@@ -139,6 +140,8 @@ export function WpMigrationPanel({ orgId, onComplete }: { orgId: string; onCompl
               }}
             />
             <button
+              type="button"
+              data-testid="wp-probe-button"
               onClick={handleProbe}
               disabled={probing || !url.trim()}
               style={{
@@ -226,6 +229,7 @@ export function WpMigrationPanel({ orgId, onComplete }: { orgId: string; onCompl
             </label>
             <input
               type="text"
+              data-testid="wp-sitename-input"
               value={siteName}
               onChange={(e) => setSiteName(e.target.value)}
               style={{
@@ -248,10 +252,12 @@ export function WpMigrationPanel({ orgId, onComplete }: { orgId: string; onCompl
           )}
 
           <div style={{ display: "flex", justifyContent: "space-between" }}>
-            <button onClick={() => setStep("url")} style={btnSecondary}>
+            <button type="button" data-testid="wp-back-button" onClick={() => setStep("url")} style={btnSecondary}>
               ← Back
             </button>
             <button
+              type="button"
+              data-testid="wp-migrate-button"
               onClick={handleMigrate}
               disabled={!probe.restApiAvailable || !siteName.trim()}
               style={{
@@ -310,6 +316,8 @@ export function WpMigrationPanel({ orgId, onComplete }: { orgId: string; onCompl
 
           <div style={{ display: "flex", gap: "0.5rem" }}>
             <button
+              type="button"
+              data-testid="wp-open-site-button"
               onClick={() => {
                 if (onComplete) {
                   onComplete(result.siteId);
@@ -322,7 +330,7 @@ export function WpMigrationPanel({ orgId, onComplete }: { orgId: string; onCompl
             >
               Open site in CMS →
             </button>
-            <button onClick={() => { setStep("url"); setProbe(null); setResult(null); setUrl(""); }} style={btnSecondary}>
+            <button type="button" data-testid="wp-another-button" onClick={() => { setStep("url"); setProbe(null); setResult(null); setUrl(""); }} style={btnSecondary}>
               Migrate another
             </button>
           </div>
diff --git a/packages/cms-admin/src/components/site-intro-card.tsx b/packages/cms-admin/src/components/site-intro-card.tsx
index 2c5169cfb..77103d2cd 100644
--- a/packages/cms-admin/src/components/site-intro-card.tsx
+++ b/packages/cms-admin/src/components/site-intro-card.tsx
@@ -42,6 +42,7 @@ export function SiteIntroCard() {
 
   return (
     <a
+      data-testid="site-intro-card-link"
       href="#"
       onClick={handleClick}
       className="group block rounded-xl border border-border bg-card hover:border-primary/40 transition-all duration-200 overflow-hidden"
diff --git a/packages/cms-admin/src/components/sortable-workflow-steps.tsx b/packages/cms-admin/src/components/sortable-workflow-steps.tsx
index 458aaa755..35f102f67 100644
--- a/packages/cms-admin/src/components/sortable-workflow-steps.tsx
+++ b/packages/cms-admin/src/components/sortable-workflow-steps.tsx
@@ -119,6 +119,7 @@ function SortableStep({
       className="flex items-center gap-2 p-2 rounded-md border border-border"
     >
       <button
+        data-testid={`workflow-step-drag-${id}`}
         type="button"
         {...attributes}
         {...listeners}
@@ -132,6 +133,7 @@ function SortableStep({
       <span className="text-sm flex-1 font-medium">{agentName}</span>
       {onCollectionChange && (
         <input
+          data-testid={`workflow-step-collection-${id}`}
           type="text"
           value={overrideCollection ?? ""}
           onChange={(e) => onCollectionChange(e.target.value)}
@@ -143,6 +145,7 @@ function SortableStep({
         />
       )}
       <button
+        data-testid={`workflow-step-remove-${id}`}
         type="button"
         onClick={onRemove}
         title="Remove step"
diff --git a/packages/cms-admin/src/components/tab-bar.tsx b/packages/cms-admin/src/components/tab-bar.tsx
index 280cfb1cf..5cc2d4cde 100644
--- a/packages/cms-admin/src/components/tab-bar.tsx
+++ b/packages/cms-admin/src/components/tab-bar.tsx
@@ -110,6 +110,7 @@ export function TabBar() {
         const isActive = tab.id === activeId;
         return (
           <div
+            data-testid={`tab-${tab.id}`}
             key={tab.id}
             role="tab"
             aria-selected={isActive}
@@ -173,6 +174,7 @@ export function TabBar() {
 
             {/* Close button */}
             <button
+              data-testid={`tab-close-${tab.id}`}
               type="button"
               onClick={(e) => {
                 e.stopPropagation();
@@ -203,6 +205,7 @@ export function TabBar() {
 
       {/* New tab button — always last in the wrap flow */}
       <button
+        data-testid="tab-new-button"
         type="button"
         onClick={() => openTab("/admin", "Dashboard", true)}
         style={{
@@ -227,6 +230,7 @@ export function TabBar() {
       {/* Close All pill — only when user setting is on and there are multiple tabs */}
       {showCloseAll && tabs.length > 1 && (
         <button
+          data-testid="tab-close-all-button"
           type="button"
           onClick={() => setConfirmOpen(true)}
           style={{
@@ -263,8 +267,8 @@ export function TabBar() {
               </p>
             </div>
             <div style={{ display: "flex", justifyContent: "flex-end", gap: "0.5rem" }}>
-              <button type="button" onClick={() => setConfirmOpen(false)} style={{ padding: "0.4rem 0.875rem", borderRadius: "6px", border: "1px solid var(--border)", background: "transparent", color: "var(--foreground)", fontSize: "0.8rem", cursor: "pointer" }}>Cancel</button>
-              <button type="button" onClick={() => { setConfirmOpen(false); closeAllTabs(); }} style={{ padding: "0.4rem 0.875rem", borderRadius: "6px", border: "none", background: "var(--destructive)", color: "#fff", fontSize: "0.8rem", cursor: "pointer" }}>Close all</button>
+              <button data-testid="tab-close-all-cancel" type="button" onClick={() => setConfirmOpen(false)} style={{ padding: "0.4rem 0.875rem", borderRadius: "6px", border: "1px solid var(--border)", background: "transparent", color: "var(--foreground)", fontSize: "0.8rem", cursor: "pointer" }}>Cancel</button>
+              <button data-testid="tab-close-all-confirm" type="button" onClick={() => { setConfirmOpen(false); closeAllTabs(); }} style={{ padding: "0.4rem 0.875rem", borderRadius: "6px", border: "none", background: "var(--destructive)", color: "#fff", fontSize: "0.8rem", cursor: "pointer" }}>Close all</button>
             </div>
           </div>
         </div>
diff --git a/packages/cms-admin/src/components/ui/checkbox-styled.tsx b/packages/cms-admin/src/components/ui/checkbox-styled.tsx
index 30be3a645..0d6a99411 100644
--- a/packages/cms-admin/src/components/ui/checkbox-styled.tsx
+++ b/packages/cms-admin/src/components/ui/checkbox-styled.tsx
@@ -14,6 +14,7 @@ export function Checkbox({ checked, onChange, label, description, disabled }: {
   return (
     <label style={{ display: "flex", alignItems: "flex-start", gap: "0.5rem", cursor: disabled ? "default" : "pointer", opacity: disabled ? 0.5 : 1 }}>
       <div
+        data-testid="checkbox-styled-box"
         onClick={(e) => { e.preventDefault(); if (!disabled) onChange(!checked); }}
         style={{
           flexShrink: 0,
@@ -59,6 +60,7 @@ export function Radio({ checked, onChange, label, description, disabled }: {
   return (
     <label style={{ display: "flex", alignItems: "flex-start", gap: "0.5rem", cursor: disabled ? "default" : "pointer", opacity: disabled ? 0.5 : 1 }}>
       <div
+        data-testid="radio-styled-box"
         onClick={(e) => { e.preventDefault(); if (!disabled) onChange(); }}
         style={{
           flexShrink: 0,
diff --git a/packages/cms-admin/src/components/ui/custom-date-input.tsx b/packages/cms-admin/src/components/ui/custom-date-input.tsx
index bef9bdc73..d0e9345c2 100644
--- a/packages/cms-admin/src/components/ui/custom-date-input.tsx
+++ b/packages/cms-admin/src/components/ui/custom-date-input.tsx
@@ -157,6 +157,7 @@ export function CustomDateInput({
     <div ref={wrapRef} style={{ position: "relative", display: "flex", flexDirection: "column", gap: "0.2rem", ...style }}>
       <div style={{ position: "relative", display: "flex", alignItems: "center" }}>
         <input
+          data-testid="custom-date-input-field"
           type="text"
           inputMode="numeric"
           autoComplete="off"
@@ -186,6 +187,7 @@ export function CustomDateInput({
           }}
         />
         <button
+          data-testid="custom-date-calendar-trigger"
           type="button"
           onClick={() => {
             if (disabled) return;
@@ -237,6 +239,7 @@ export function CustomDateInput({
           <style>{`@keyframes csDown{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}`}</style>
           <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "0.4rem" }}>
             <button
+              data-testid="custom-date-prev-month"
               type="button"
               onClick={() => setCursor(new Date(cursor.getFullYear(), cursor.getMonth() - 1, 1))}
               style={navBtnStyle}
@@ -248,6 +251,7 @@ export function CustomDateInput({
               {MONTHS[cursor.getMonth()]} {cursor.getFullYear()}
             </span>
             <button
+              data-testid="custom-date-next-month"
               type="button"
               onClick={() => setCursor(new Date(cursor.getFullYear(), cursor.getMonth() + 1, 1))}
               style={navBtnStyle}
@@ -278,6 +282,7 @@ export function CustomDateInput({
               const enabled = inRange(d);
               return (
                 <button
+                  data-testid={`custom-date-day-${d.getDate()}`}
                   key={i}
                   type="button"
                   disabled={!enabled}
@@ -312,11 +317,12 @@ export function CustomDateInput({
             })}
           </div>
           <div style={{ display: "flex", justifyContent: "space-between", marginTop: "0.5rem" }}>
-            <button type="button" onClick={() => pickDate(new Date())} style={footBtnStyle}>
+            <button data-testid="custom-date-today" type="button" onClick={() => pickDate(new Date())} style={footBtnStyle}>
               Today
             </button>
             {value && (
               <button
+                data-testid="custom-date-clear"
                 type="button"
                 onClick={() => {
                   setDraft("");
diff --git a/packages/cms-admin/src/components/ui/custom-select.tsx b/packages/cms-admin/src/components/ui/custom-select.tsx
index 161cc3732..6955a145d 100644
--- a/packages/cms-admin/src/components/ui/custom-select.tsx
+++ b/packages/cms-admin/src/components/ui/custom-select.tsx
@@ -113,6 +113,7 @@ export function CustomSelect({
     <div ref={ref} style={{ position: "relative", ...style }}>
       {/* Trigger */}
       <button
+        data-testid="custom-select-trigger"
         ref={triggerRef}
         type="button"
         onClick={toggle}
@@ -179,6 +180,7 @@ export function CustomSelect({
             const isFoc = i === focused;
             return (
               <div
+                data-testid={`custom-select-option-${opt.value}`}
                 key={opt.value}
                 onMouseEnter={() => !opt.disabled && setFocused(i)}
                 onClick={() => !opt.disabled && select(opt.value)}
diff --git a/packages/cms-admin/src/components/ui/custom-time-input.tsx b/packages/cms-admin/src/components/ui/custom-time-input.tsx
index 4fbfe758d..8c8bf733b 100644
--- a/packages/cms-admin/src/components/ui/custom-time-input.tsx
+++ b/packages/cms-admin/src/components/ui/custom-time-input.tsx
@@ -80,6 +80,7 @@ export function CustomTimeInput({ value, onChange, disabled = false, style }: Pr
   return (
     <div style={{ display: "flex", flexDirection: "column", gap: "0.2rem", ...style }}>
       <input
+        data-testid="custom-time-input"
         type="text"
         inputMode="numeric"
         autoComplete="off"
diff --git a/packages/cms-admin/src/components/ui/help-button.tsx b/packages/cms-admin/src/components/ui/help-button.tsx
index 57a9143f6..421216817 100644
--- a/packages/cms-admin/src/components/ui/help-button.tsx
+++ b/packages/cms-admin/src/components/ui/help-button.tsx
@@ -110,6 +110,7 @@ export function HelpButton({ articleId }: HelpButtonProps) {
   return (
     <>
       <button
+        data-testid="help-button-trigger"
         ref={buttonRef}
         type="button"
         onClick={handleOpen}
@@ -139,8 +140,12 @@ export function HelpButton({ articleId }: HelpButtonProps) {
               <Lightbulb style={{ width: "0.8rem", height: "0.8rem", color: "#F7BB2E" }} />
               <span style={{ fontSize: "0.8rem", fontWeight: 600 }}>{article.title}</span>
             </div>
-            <button type="button" onClick={() => setOpen(false)}
-              style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", padding: "0.15rem" }}>
+            <button
+              data-testid="help-button-close"
+              type="button"
+              onClick={() => setOpen(false)}
+              style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted-foreground)", padding: "0.15rem" }}
+            >
               <X style={{ width: "0.7rem", height: "0.7rem" }} />
             </button>
           </div>
@@ -156,6 +161,7 @@ export function HelpButton({ articleId }: HelpButtonProps) {
                   return (
                     <div key={i}>
                       <button
+                        data-testid={`help-button-isu-${action.isu}`}
                         type="button"
                         onClick={() => setActiveISU(activeISU === action.isu ? null : action.isu!)}
                         style={{
@@ -184,7 +190,14 @@ export function HelpButton({ articleId }: HelpButtonProps) {
                   <div key={i} style={{ display: "flex", alignItems: "center", gap: "0.375rem", fontSize: "0.72rem" }}>
                     <span style={{ color: "#F7BB2E" }}>→</span>
                     {action.href ? (
-                      <a href={action.href} onClick={() => setOpen(false)} style={{ color: "var(--foreground)", textDecoration: "none" }}>{action.label}</a>
+                      <a
+                        data-testid={`help-button-action-${i}`}
+                        href={action.href}
+                        onClick={() => setOpen(false)}
+                        style={{ color: "var(--foreground)", textDecoration: "none" }}
+                      >
+                        {action.label}
+                      </a>
                     ) : (
                       <span style={{ color: "var(--foreground)" }}>{action.label}</span>
                     )}
@@ -197,6 +210,7 @@ export function HelpButton({ articleId }: HelpButtonProps) {
           {article.learnMorePath && (
             <div style={{ marginTop: "0.75rem", paddingTop: "0.5rem", borderTop: "1px solid var(--border)" }}>
               <a
+                data-testid="help-button-learn-more"
                 href={`https://docs.webhouse.app${article.learnMorePath}`}
                 target="_blank" rel="noopener noreferrer"
                 style={{ fontSize: "0.7rem", color: "#F7BB2E", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: "0.25rem" }}
diff --git a/packages/cms-admin/src/components/ui/help-card.tsx b/packages/cms-admin/src/components/ui/help-card.tsx
index e2dd0af2a..c49c340e6 100644
--- a/packages/cms-admin/src/components/ui/help-card.tsx
+++ b/packages/cms-admin/src/components/ui/help-card.tsx
@@ -84,6 +84,7 @@ export function HelpCard({ articleId, variant = "inline" }: HelpCardProps) {
     }}>
       {/* Header — always visible, clickable to toggle */}
       <button
+        data-testid="help-card-toggle"
         type="button"
         onClick={() => setExpanded(!expanded)}
         style={{
@@ -115,7 +116,7 @@ export function HelpCard({ articleId, variant = "inline" }: HelpCardProps) {
                 <div key={i} style={{ display: "flex", alignItems: "center", gap: "0.375rem", fontSize: "0.72rem" }}>
                   <span style={{ color: "#F7BB2E" }}>→</span>
                   {action.href ? (
-                    <a href={action.href} style={{ color: "var(--foreground)", textDecoration: "none" }}>{action.label}</a>
+                    <a data-testid={`help-action-${i}`} href={action.href} style={{ color: "var(--foreground)", textDecoration: "none" }}>{action.label}</a>
                   ) : (
                     <span style={{ color: "var(--foreground)" }}>{action.label}</span>
                   )}
@@ -128,6 +129,7 @@ export function HelpCard({ articleId, variant = "inline" }: HelpCardProps) {
           {article.learnMorePath && (
             <div style={{ marginTop: "0.75rem" }}>
               <a
+                data-testid="help-learn-more-link"
                 href={`https://docs.webhouse.app${article.learnMorePath}`}
                 target="_blank"
                 rel="noopener noreferrer"
diff --git a/packages/cms-admin/src/components/ui/input.tsx b/packages/cms-admin/src/components/ui/input.tsx
index d763cd9ab..aa1fd7bd9 100644
--- a/packages/cms-admin/src/components/ui/input.tsx
+++ b/packages/cms-admin/src/components/ui/input.tsx
@@ -5,6 +5,7 @@ import { cn } from "@/lib/utils"
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (
     <input
+      data-testid="form-input"
       type={type}
       data-slot="input"
       className={cn(
diff --git a/packages/cms-admin/src/components/ui/isu-media-processing.tsx b/packages/cms-admin/src/components/ui/isu-media-processing.tsx
index 584dba6af..8bc95395e 100644
--- a/packages/cms-admin/src/components/ui/isu-media-processing.tsx
+++ b/packages/cms-admin/src/components/ui/isu-media-processing.tsx
@@ -72,6 +72,7 @@ export function ISUMediaProcessing() {
       {/* Toggle */}
       <label style={{ display: "flex", alignItems: "center", gap: "0.5rem", cursor: "pointer" }}>
         <input
+          data-testid="isu-media-enabled-checkbox"
           type="checkbox"
           checked={enabled}
           onChange={(e) => setEnabled(e.target.checked)}
@@ -86,6 +87,7 @@ export function ISUMediaProcessing() {
           Variant widths (px)
         </label>
         <input
+          data-testid="isu-media-widths-input"
           type="text"
           value={widths}
           onChange={(e) => setWidths(e.target.value)}
@@ -108,6 +110,7 @@ export function ISUMediaProcessing() {
 
       {/* Save button */}
       <button
+        data-testid="isu-media-save-button"
         type="button"
         onClick={save}
         disabled={saving}
diff --git a/packages/cms-admin/src/components/ui/mode-toggle.tsx b/packages/cms-admin/src/components/ui/mode-toggle.tsx
index 316f80fc5..84db6bc63 100644
--- a/packages/cms-admin/src/components/ui/mode-toggle.tsx
+++ b/packages/cms-admin/src/components/ui/mode-toggle.tsx
@@ -11,6 +11,7 @@ import { Code, LayoutList } from "lucide-react";
 export function ModeToggle({ mode, onToggle }: { mode: "ui" | "json"; onToggle: () => void }) {
   return (
     <button
+      data-testid="mode-toggle-button"
       type="button"
       onClick={onToggle}
       title={mode === "ui" ? "Switch to JSON" : "Switch to UI"}
diff --git a/packages/cms-admin/src/components/ui/sidebar.tsx b/packages/cms-admin/src/components/ui/sidebar.tsx
index 9df09fdaa..232f3836c 100644
--- a/packages/cms-admin/src/components/ui/sidebar.tsx
+++ b/packages/cms-admin/src/components/ui/sidebar.tsx
@@ -261,6 +261,7 @@ function SidebarTrigger({
 
   return (
     <Button
+      data-testid="sidebar-trigger"
       data-sidebar="trigger"
       data-slot="sidebar-trigger"
       variant="ghost"
@@ -283,6 +284,7 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
 
   return (
     <button
+      data-testid="sidebar-rail"
       data-sidebar="rail"
       data-slot="sidebar-rail"
       aria-label="Toggle Sidebar"
diff --git a/packages/cms-admin/src/components/ui/textarea.tsx b/packages/cms-admin/src/components/ui/textarea.tsx
index 04d27f7d1..ec9f7ec83 100644
--- a/packages/cms-admin/src/components/ui/textarea.tsx
+++ b/packages/cms-admin/src/components/ui/textarea.tsx
@@ -5,6 +5,7 @@ import { cn } from "@/lib/utils"
 function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
   return (
     <textarea
+      data-testid="textarea-element"
       data-slot="textarea"
       className={cn(
         "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",