@specsage/cli 0.1.16 → 0.1.17

package/lib/browser.js

@@ -860,21 +860,70 @@ async function handleCommand(msg) {
         const centerX = x + w / 2;
         centerY = y + h / 2;
 
-        // Use Playwright's selectOption by locating the element at the position
-        const selectEl = page.locator('select').filter({
-          has: page.locator(`text="${value}"`)
-        }).or(page.locator('select')).first();
-
-        // Try to find the exact select element by position
-        const selectAtPoint = await page.evaluateHandle(
+        // Try to find a native <select> element by position
+        const selectHandle = await page.evaluateHandle(
           ({ x, y }) => document.elementFromPoint(x, y)?.closest('select'),
           { x: centerX, y: centerY }
         );
 
-        if (selectAtPoint) {
-          await selectAtPoint.selectOption({ label: value });
+        // evaluateHandle returns a JSHandle even for null — check the underlying value
+        const isNativeSelect = await selectHandle.evaluate(el => el !== null).catch(() => false);
+
+        if (isNativeSelect) {
+          await selectHandle.selectOption({ label: value });
         } else {
-          throw new Error(`No select element found at position for ${element_id}`);
+          // Custom combobox/select: click to open, then poll for the option.
+          // Options may load asynchronously (e.g. MUI selects that fetch data
+          // after a dependent field changes), so we retry instead of a fixed wait.
+
+          // Grab aria-controls before clicking so we can scope to the correct listbox
+          const listboxId = await page.evaluate(
+            ({ x, y }) => {
+              const el = document.elementFromPoint(x, y)?.closest('[role="combobox"]');
+              return el?.getAttribute('aria-controls') || null;
+            },
+            { x: centerX, y: centerY }
+          );
+
+          await page.mouse.click(centerX, centerY);
+
+          const SELECT_TIMEOUT = 10000;
+          const POLL_INTERVAL = 300;
+          const deadline = Date.now() + SELECT_TIMEOUT;
+          let clicked = false;
+
+          // Build a scoped listbox locator: prefer aria-controls ID, fall back to last visible listbox
+          const listboxLocator = listboxId
+            ? page.locator(`#${CSS.escape(listboxId)}`)
+            : page.locator('[role="listbox"]').last();
+
+          while (Date.now() < deadline) {
+            await new Promise(r => setTimeout(r, POLL_INTERVAL));
+
+            // Try scoped role=option first (MUI, Radix, Headless UI, etc.)
+            const optionLocator = listboxLocator.getByRole('option', { name: value, exact: true });
+            const optionCount = await optionLocator.count();
+            if (optionCount > 0) {
+              await optionLocator.first().click();
+              clicked = true;
+              break;
+            }
+
+            // Fallback: text match inside the scoped listbox or any ul within it
+            const textLocator = listboxLocator.locator(`text="${value}"`).or(
+              page.locator(`ul >> text="${value}"`)
+            ).first();
+            const textCount = await textLocator.count();
+            if (textCount > 0) {
+              await textLocator.click();
+              clicked = true;
+              break;
+            }
+          }
+
+          if (!clicked) {
+            throw new Error(`Option "${value}" not found in custom select after ${SELECT_TIMEOUT}ms`);
+          }
         }
 
         // Wait for page to settle after selection (form updates, validation)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@specsage/cli",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "description": "SpecSage CLI - AI-powered end-to-end testing automation (Node wrapper for Ruby CLI)",
   "type": "module",
   "bin": {