chromeflow 0.1.37 → 0.1.39

package/CLAUDE.md

@@ -140,6 +140,9 @@ screenshot to check what happened.
 2. `get_elements()` to get exact coords → `highlight_region(x,y,w,h,msg)`
 3. `take_screenshot()` only if you still can't identify the element from DOM queries
 
+**Multiple elements with the same label** (e.g. many "Remove" buttons):
+`click_element("Remove", nth=3)` — use `nth` (1-based) to target the specific one by order top-to-bottom. Check `get_form_fields` or `get_page_text` first to determine which index corresponds to the right section.
+
 **`fill_input` not found:**
 1. `click_element(hint)` to focus the field, then retry `fill_input`
 2. `find_and_highlight(hint, "Click here — I'll fill it in")` (no `valueToType`) then
@@ -152,14 +155,31 @@ screenshot to check what happened.
 
 **React Select / custom styled dropdowns** (e.g. "Select..." components on DataAnnotation):
 `click_element` and `fill_input` do NOT work on these — they intercept native events. Use
-`execute_script` directly:
+`execute_script` with the hidden combobox input approach (most reliable):
+
+```js
+// 1. Find the hidden combobox input (each React Select has one: input[id*="react-select-N-input"])
+var input = document.querySelector('input[id*="react-select-3-input"]');
+input.focus();
+
+// 2. Set value via native setter to trigger React's onChange
+var setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set;
+setter.call(input, 'Target Option');
+input.dispatchEvent(new Event('input', {bubbles: true}));
+
+// 3. Wait 300ms for the dropdown to filter, then click the first matching option
+// (run this as a separate execute_script call after a brief pause)
+var option = document.querySelector('[id*="react-select-3-option-0"]');
+if (option) option.click();
+
+// 4. Verify — the control div should show the selected value
+document.querySelector('[class*="singleValue"]').textContent.trim();
+```
 
+Fallback if the combobox approach doesn't work (older React Select versions):
 ```js
-// 1. Open the menu — click the control div (filter by pageY if multiple)
 var controls = document.querySelectorAll('[class*="control"]');
 controls[N].click();
-
-// 2. Pick an option by exact text
 var allEls = document.querySelectorAll('*');
 for (var i = 0; i < allEls.length; i++) {
   if (allEls[i].textContent.trim() === 'Target Option' && allEls[i].children.length === 0) {
@@ -168,10 +188,14 @@ for (var i = 0; i < allEls.length; i++) {
     break;
   }
 }
+```
 
-// 3. Verify
-controls[N].textContent.trim(); // should show selected value
+**Page text with large embedded content** (e.g. uploaded log files previewed inline): full-page `get_page_text()` pagination becomes unwieldy. Scope to a specific section instead:
+```
+get_page_text(selector=".section-3")   — scope to a CSS selector
+get_page_text(selector="#upload-form") — scope to an id
 ```
+Use `execute_script("document.querySelectorAll('section').length")` to find structural selectors first.
 
 **Page content rendered as images** (e.g. qualification "Examples" tabs that show PNG screenshots
 instead of DOM text): `get_page_text()` returns nothing useful. Zoom out and screenshot instead:

package/dist/setup.js

@@ -169,7 +169,9 @@ const CHROMEFLOW_TOOLS = [
   // v0.1.32+
   "fill_form",
   // v0.1.36+
-  "set_file_input"
+  "set_file_input",
+  // v0.1.39+
+  "get_console_logs"
 ].map((t) => `mcp__chromeflow__${t}`);
 function patchSettingsLocalJson(cwd) {
   const claudeDir = join(cwd, ".claude");

package/dist/tools/browser.js

@@ -122,7 +122,8 @@ save_to controls where the PNG is saved: "downloads" (default) saves to ~/Downlo
     `Get the exact pixel positions of all visible interactive elements on the page (inputs, buttons, links, selects).
 Use this INSTEAD OF take_screenshot when you need coordinates for highlight_region \u2014 the coordinates are exact DOM values, not estimates.
 Returns a numbered list with element type, label, and precise x/y/width/height in CSS pixels.
-After calling this, use those exact coordinates in highlight_region \u2014 do NOT adjust them.`,
+IMPORTANT: x/y are VIEWPORT-relative (0,0 = top-left of the visible area). Use these exact values directly in highlight_region \u2014 do not add window.scrollY.
+Use get_form_fields instead if you need document y positions or fields below the fold.`,
     {},
     async () => {
       const response = await bridge.request({ type: "get_elements" });
@@ -175,7 +176,7 @@ ${lines.join("\n")}${r.warning ?? ""}` }]
 Uses Chrome DevTools Protocol to set the file \u2014 the only way to bypass the browser's file-input script restriction.
 hint: label text or name of the file input (or empty string to target the first file input on the page).
 file_path: absolute path to the file on the local filesystem (e.g. /Users/you/Downloads/task.zip).
-After calling this, call get_page_text to confirm the file was accepted.`,
+After calling this, verify the upload was accepted: use execute_script to check that the input's files.length > 0, or use get_page_text to look for a success indicator (e.g. a Remove button appearing). If not accepted, call set_file_input again \u2014 occasional React timing issues may require a retry.`,
     {
       hint: z.string().describe("Label text, name, or surrounding text of the file input. Use empty string to target the first file input on the page."),
       file_path: z.string().describe("Absolute path to the file to upload (e.g. /Users/you/Downloads/task.zip)")

package/dist/tools/capture.js

@@ -12,10 +12,11 @@ DO NOT use for: email address, password, payment/billing info, phone number \u20
 After filling, call wait_for_click only if the user needs to review/confirm; otherwise proceed directly to the next step.`,
     {
       textHint: z.string().describe("The label, placeholder, or nearby text identifying the input (e.g. 'Product name', 'Amount', 'Description')"),
-      value: z.string().describe("The value to fill in")
+      value: z.string().describe("The value to fill in"),
+      nth: z.number().int().min(1).optional().describe("Which match to fill when multiple inputs share the same label (1 = first/topmost, default 1)")
     },
-    async ({ textHint, value }) => {
-      const response = await bridge.request({ type: "fill_input", textHint, value });
+    async ({ textHint, value, nth }) => {
+      const response = await bridge.request({ type: "fill_input", textHint, value, nth });
       if (response.type !== "fill_response") throw new Error("Unexpected response");
       const r = response;
       return {
@@ -117,6 +118,36 @@ The snapshot is read from the local temp file written by save_page_state.`,
       };
     }
   );
+  server.tool(
+    "get_console_logs",
+    `Read the browser console output (log, warn, error, info) captured since the page loaded.
+Returns the last 200 messages with their level and timestamp.
+Use this to check for JavaScript errors, debug React issues, or verify that an action produced the expected console output.
+Pass level="error" to see only errors, or omit to see all levels.`,
+    {
+      level: z.enum(["log", "warn", "error", "info"]).optional().describe('Filter by log level (e.g. "error" to see only errors). Omit for all levels.')
+    },
+    async ({ level }) => {
+      const response = await bridge.request({ type: "execute_script", code: `JSON.stringify(window._consoleLogs || [])` });
+      if (response.type !== "script_response") throw new Error("Unexpected response");
+      let logs;
+      try {
+        logs = JSON.parse(response.result);
+      } catch {
+        return { content: [{ type: "text", text: "No console logs captured (console capture may not be injected on this page yet \u2014 navigate first)." }] };
+      }
+      if (level) logs = logs.filter((l) => l.level === level);
+      if (logs.length === 0) {
+        return { content: [{ type: "text", text: level ? `No ${level}-level console messages.` : "No console messages captured." }] };
+      }
+      const lines = logs.map((l) => {
+        const time = new Date(l.time).toISOString().slice(11, 23);
+        return `[${time}] ${l.level.toUpperCase()}: ${l.message.slice(0, 500)}`;
+      });
+      return { content: [{ type: "text", text: `Console logs (${logs.length} entries):
+${lines.join("\n")}` }] };
+    }
+  );
   server.tool(
     "write_to_env",
     "Write a key=value pair to a .env file. Use this after capturing an API key or ID from the page.",

package/dist/tools/flow.js

@@ -17,14 +17,16 @@ function registerFlowTools(server, bridge) {
     `Click a button, link, or interactive element on the page by its visible text or aria-label.
 Use this whenever Claude can press a button without needing user input \u2014 e.g. "Save", "Continue", "Create product", "Add pricing", "Confirm", "Next".
 After clicking, use get_page_text to check the result \u2014 only use take_screenshot if you need pixel positions.
-Do NOT use for: elements that require the user to make a personal choice, consent to terms, or enter sensitive data.`,
+Do NOT use for: elements that require the user to make a personal choice, consent to terms, or enter sensitive data.
+When multiple elements share the same label (e.g. many "Remove" buttons), use nth to target a specific one (1 = first/topmost, 2 = second, etc.).`,
     {
       textHint: z.string().describe(
         "The visible label of the button or link (e.g. 'Save product', 'Continue', 'Add a product', 'Create')"
-      )
+      ),
+      nth: z.number().int().min(1).optional().describe("Which match to click when multiple elements share the same label (1 = first/topmost, default 1)")
     },
-    async ({ textHint }) => {
-      const response = await bridge.request({ type: "click_element", textHint });
+    async ({ textHint, nth }) => {
+      const response = await bridge.request({ type: "click_element", textHint, nth });
       const r = response;
       if (!r.success) {
         return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chromeflow",
-  "version": "0.1.37",
+  "version": "0.1.39",
   "description": "Browser guidance MCP server for Claude Code — highlights, clicks, fills, and captures from the web so you don't have to.",
   "type": "module",
   "bin": {