@nyx-intelligence/val-mcp 0.5.1 → 0.5.5

package/dist/index.js

@@ -38,8 +38,20 @@ async function runCli(args) {
             console.log(`  ERROR: ${e.el} — ${e.error}`);
         await session.close();
     }
+    else if (cmd === "exercise-forms" && url) {
+        console.log(fmtAction(await session.open(url, arg2 || undefined)));
+        const res = await session.exerciseForms();
+        console.log(`\nexercised ${res.tested} form(s): ${res.dead.length} dead, ${res.errored.length} errored, ${res.submitted.length} submitted`);
+        for (const d of res.dead)
+            console.log(`  DEAD: ${d.form} — ${d.reason}`);
+        for (const e of res.errored)
+            console.log(`  ERROR: ${e.form} — ${e.error}`);
+        for (const s of res.submitted)
+            console.log(`  OK: ${s.form}${s.navigatedTo ? ` → ${s.navigatedTo}` : ""}`);
+        await session.close();
+    }
     else {
-        console.error("Usage:\n  val-mcp scan <url> [maxPages] [device]\n  val-mcp exercise <url> [device]\n  val-mcp            (start MCP server on stdio)");
+        console.error("Usage:\n  val-mcp scan <url> [maxPages] [device]\n  val-mcp exercise <url> [device]\n  val-mcp exercise-forms <url> [device]\n  val-mcp            (start MCP server on stdio)");
         process.exit(1);
     }
     process.exit(0);
@@ -66,7 +78,7 @@ async function runServer() {
     const { StdioServerTransport } = await import("@modelcontextprotocol/sdk/server/stdio.js");
     const { chromium } = await import("playwright");
     const { z } = await import("zod");
-    const server = new McpServer({ name: "val", version: "0.5.0" });
+    const server = new McpServer({ name: "val", version: "0.5.5" });
     const text = (t) => ({ content: [{ type: "text", text: t }] });
     // ── Passive crawl ──
     server.registerTool("val_scan", {
@@ -125,6 +137,23 @@ async function runServer() {
             lines.push(`ERROR: ${e.el} — ${e.error}`);
         return text(lines.join("\n"));
     });
+    server.registerTool("val_exercise_forms", {
+        title: "Submit every form on the current page",
+        description: "Find every visible <form>, fill its inputs with plausible test data (email, password, text, etc.), submit it, and report which forms are DEAD (submit produced no effect, no API call, no DOM change), which threw a JS error, and which submitted successfully. Complements val_exercise — buttons-only sweeps miss broken signup/checkout/contact forms.",
+        inputSchema: {},
+    }, async () => {
+        const r = await session.exerciseForms();
+        const lines = [
+            `Exercised ${r.tested} form(s): ${r.dead.length} dead, ${r.errored.length} errored, ${r.submitted.length} submitted.`,
+        ];
+        for (const d of r.dead)
+            lines.push(`DEAD: ${d.form} — ${d.reason}`);
+        for (const e of r.errored)
+            lines.push(`ERROR: ${e.form} — ${e.error}`);
+        for (const s of r.submitted)
+            lines.push(`OK: ${s.form}${s.navigatedTo ? ` → ${s.navigatedTo}` : ""}`);
+        return text(lines.join("\n"));
+    });
     server.registerTool("val_state", {
         title: "Current page state + new errors",
         description: "Return the current URL/title and any console/JS/network errors captured since the last action. Use to verify a step did not break anything.",
@@ -151,7 +180,7 @@ async function runServer() {
     console.error("val-mcp server running on stdio");
 }
 const args = process.argv.slice(2);
-if (args[0] === "scan" || args[0] === "exercise") {
+if (args[0] === "scan" || args[0] === "exercise" || args[0] === "exercise-forms") {
     runCli(args).catch((e) => {
         console.error(e);
         process.exit(1);

package/dist/session.js

@@ -195,13 +195,41 @@ class ValSession {
         const startUrl = page.url();
         for (const b of buttons) {
             this.drain();
-            const before = await this.sig();
             try {
+                const before = await this.sig();
                 const loc = page.locator(`[data-val-ex="${b.ref}"]`);
                 if ((await loc.count()) === 0)
                     continue;
+                // Install mutation watcher BEFORE the click. The handler can mutate
+                // the DOM synchronously and finish before we start observing — we'd
+                // then wait 800ms for nothing and falsely flag the button dead.
+                // Watch ANY mutation: node added/removed (modal, dropdown), attribute
+                // changed (`value=`, `style`, `aria-*` — React preset buttons), or
+                // text changed (counters, totals). Anything = the click did something.
+                await page.evaluate(() => {
+                    const w = window;
+                    w.__valMut = false;
+                    const obs = new MutationObserver(() => {
+                        w.__valMut = true;
+                    });
+                    obs.observe(document.body, {
+                        childList: true,
+                        subtree: true,
+                        attributes: true,
+                        characterData: true,
+                    });
+                    w.__valObs = obs;
+                });
                 await loc.click({ timeout: 4000 });
-                await page.waitForTimeout(400);
+                await page.waitForTimeout(800);
+                const mutated = await page
+                    .evaluate(() => {
+                    const w = window;
+                    const m = !!w.__valMut;
+                    w.__valObs?.disconnect();
+                    return m;
+                })
+                    .catch(() => false);
                 if (page.url() !== startUrl) {
                     await page.goBack({ waitUntil: "load" }).catch(() => { });
                     await page.waitForTimeout(300);
@@ -211,18 +239,185 @@ class ValSession {
                 const after = await this.sig();
                 const errs = this.drain();
                 const label = b.text || b.ref;
-                const moved = after.nodes !== before.nodes || Math.abs(after.text - before.text) > 3;
+                const sigChanged = after.nodes !== before.nodes || Math.abs(after.text - before.text) > 3;
+                const moved = mutated || sigChanged;
                 if (errs.newPageErrors.length)
                     errored.push({ el: label, error: errs.newPageErrors[0] });
                 else if (!moved && errs.newConsoleErrors.length === 0 && errs.newNetworkErrors.length === 0)
                     dead.push(label);
             }
             catch (e) {
-                errored.push({ el: b.text || b.ref, error: e instanceof Error ? e.message : String(e) });
+                const msg = e instanceof Error ? e.message : String(e);
+                // SPA navigations can destroy our eval context mid-probe — recover silently,
+                // don't flag the click as an error of the page under test.
+                if (/Execution context was destroyed|Target closed|frame got detached|Navigation/i.test(msg)) {
+                    try {
+                        if (page.url() !== startUrl) {
+                            await page.goBack({ waitUntil: "load" }).catch(() => { });
+                            await page.waitForTimeout(300);
+                        }
+                        else {
+                            await page.waitForLoadState("load", { timeout: 2000 }).catch(() => { });
+                        }
+                        await tag();
+                    }
+                    catch {
+                        /* nothing more we can do */
+                    }
+                }
+                else {
+                    errored.push({ el: b.text || b.ref, error: msg });
+                }
             }
         }
         return { tested: buttons.length, dead, errored };
     }
+    /**
+     * Find every visible <form>, fill its inputs with plausible test data,
+     * submit it, and classify the outcome. Catches a class of bugs the button
+     * sweep cannot see: signup/checkout/contact forms with no handler, broken
+     * endpoints, validation that silently rejects everything.
+     */
+    async exerciseForms() {
+        const page = await this.ensure();
+        const forms = await page.evaluate(() => {
+            const isVisible = (el) => {
+                const r = el.getBoundingClientRect();
+                return r.width > 0 && r.height > 0;
+            };
+            const fs = Array.from(document.querySelectorAll("form")).filter(isVisible);
+            fs.forEach((f, i) => f.setAttribute("data-val-fx", `f${i}`));
+            return fs.map((f, i) => {
+                const submit = f.querySelector("button[type=submit], input[type=submit], button:not([type])");
+                const label = (submit?.innerText || "").trim().slice(0, 40) ||
+                    f.getAttribute("aria-label") ||
+                    f.id ||
+                    `form-${i}`;
+                return { ref: `f${i}`, label };
+            });
+        });
+        const dead = [];
+        const errored = [];
+        const submitted = [];
+        const startUrl = page.url();
+        for (const fx of forms) {
+            this.drain();
+            try {
+                const form = page.locator(`[data-val-fx="${fx.ref}"]`);
+                if ((await form.count()) === 0)
+                    continue;
+                // Fill every fillable input. Skip hidden/disabled/submit/checkbox/radio/file
+                // so we don't accidentally check legal-agreement boxes or upload anything.
+                const filled = await page.evaluate((ref) => {
+                    const f = document.querySelector(`[data-val-fx="${ref}"]`);
+                    if (!f)
+                        return 0;
+                    const inputs = Array.from(f.querySelectorAll("input, textarea"));
+                    let n = 0;
+                    for (const input of inputs) {
+                        const i = input;
+                        if (i.disabled)
+                            continue;
+                        const t = i.type || "text";
+                        if (["hidden", "submit", "reset", "button", "checkbox", "radio", "file", "image"].indexOf(t) >= 0)
+                            continue;
+                        const value = t === "email" ? "test+val@example.com"
+                            : t === "password" ? "ValTestPass123!"
+                                : t === "tel" ? "+15551234567"
+                                    : t === "number" ? "1"
+                                        : t === "url" ? "https://example.com"
+                                            : t === "date" ? "2026-01-01"
+                                                : t === "search" ? "test"
+                                                    : input.tagName === "TEXTAREA" ? "Test message from Val."
+                                                        : "Test";
+                        input.focus?.();
+                        input.value = value;
+                        input.dispatchEvent(new Event("input", { bubbles: true }));
+                        input.dispatchEvent(new Event("change", { bubbles: true }));
+                        n++;
+                    }
+                    return n;
+                }, fx.ref);
+                // Install mutation watcher BEFORE submit (same rationale as val_exercise).
+                await page.evaluate(() => {
+                    const w = window;
+                    w.__valMut = false;
+                    const obs = new MutationObserver(() => {
+                        w.__valMut = true;
+                    });
+                    obs.observe(document.body, { childList: true, subtree: true, attributes: true, characterData: true });
+                    w.__valObs = obs;
+                });
+                // Prefer clicking the submit control (lets React onClick handlers fire).
+                // Fall back to form.requestSubmit() then form.submit().
+                const submitOk = await page.evaluate((ref) => {
+                    const f = document.querySelector(`[data-val-fx="${ref}"]`);
+                    if (!f)
+                        return false;
+                    const btn = f.querySelector("button[type=submit], input[type=submit]") ||
+                        f.querySelector("button:not([type])");
+                    if (btn) {
+                        btn.click();
+                        return true;
+                    }
+                    if (typeof f.requestSubmit === "function") {
+                        f.requestSubmit();
+                        return true;
+                    }
+                    f.submit();
+                    return true;
+                }, fx.ref);
+                if (!submitOk) {
+                    dead.push({ form: fx.label, reason: "no submit control found" });
+                    continue;
+                }
+                await page.waitForTimeout(900);
+                const mutated = await page
+                    .evaluate(() => {
+                    const w = window;
+                    const m = !!w.__valMut;
+                    w.__valObs?.disconnect();
+                    return m;
+                })
+                    .catch(() => false);
+                const errs = this.drain();
+                const navigated = page.url() !== startUrl;
+                const has5xx = errs.newNetworkErrors.some((n) => n.status >= 500);
+                const networkFired = errs.newNetworkErrors.length > 0;
+                if (errs.newPageErrors.length) {
+                    errored.push({ form: fx.label, error: errs.newPageErrors[0] });
+                }
+                else if (has5xx) {
+                    errored.push({ form: fx.label, error: `server ${errs.newNetworkErrors.find((n) => n.status >= 500).status} on submit` });
+                }
+                else if (navigated || mutated || networkFired) {
+                    submitted.push({ form: fx.label, navigatedTo: navigated ? page.url() : undefined });
+                }
+                else {
+                    dead.push({ form: fx.label, reason: filled === 0 ? "no fillable inputs and submit had no effect" : "submit had no observable effect" });
+                }
+                if (navigated) {
+                    await page.goBack({ waitUntil: "load" }).catch(() => { });
+                    await page.waitForTimeout(300);
+                }
+            }
+            catch (e) {
+                const msg = e instanceof Error ? e.message : String(e);
+                // SPA navigations destroy our eval context. That means submit DID work.
+                if (/Execution context was destroyed|Target closed|frame got detached|Navigation/i.test(msg)) {
+                    submitted.push({ form: fx.label, navigatedTo: page.url() !== startUrl ? page.url() : undefined });
+                    if (page.url() !== startUrl) {
+                        await page.goBack({ waitUntil: "load" }).catch(() => { });
+                        await page.waitForTimeout(300);
+                    }
+                }
+                else {
+                    errored.push({ form: fx.label, error: msg });
+                }
+            }
+        }
+        return { tested: forms.length, dead, errored, submitted };
+    }
     async state() {
         const page = await this.ensure();
         return { ok: true, url: page.url(), title: await safeTitle(page), changed: false, ...this.drain() };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyx-intelligence/val-mcp",
-  "version": "0.5.1",
+  "version": "0.5.5",
   "description": "Val — a 100% MCP QA agent for vibecoders. Drives a real browser to catch UX bugs (broken links, 404s, console errors, broken images) so your coding agent can fix them.",
   "type": "module",
   "license": "UNLICENSED",