elementus-ai 1.5.0 → 1.5.1

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 All notable changes are documented here. This project adheres to [Semantic Versioning](https://semver.org).
 
+## 1.5.1
+
+### Fixed
+
+- Suggestion/`resolved` quality for **form controls**. A healed `<input>`/`<select>`/`<textarea>` now
+  reports its implicit ARIA **role** (`<input type="submit">` → `button`, text inputs → `textbox`,
+  checkbox/radio/range/number → their roles) and a proper **accessible name** (a button-like input's
+  `value`, e.g. `Login`, instead of its `name` attribute). So the heal suggests
+  `getByRole('button', { name: 'Login' })` instead of the previous `getByText('login-button')` — which
+  would never match a form control. `_suggestLocator` also never falls back to `getByText` for a form
+  control (it uses a tag locator when no role/name is available).
+
+### Changed
+
+- `textOf` (element label derivation, used for both matching and suggestions) now prefers a button-like
+  input's `value` over its `name`/`title`/`alt` attributes; a text input's current value stays a last
+  resort. No public API change — the `resolved`/`suggestion` shapes are unchanged, just more accurate.
+
 ## 1.5.0
 
 ### Added

package/elementus.js

@@ -800,10 +800,19 @@ function createElementus(userConfig = {}) {
       function textOf(el) {
         const t = el.textContent.trim().replace(/\s+/g, ' ')
         if (t) return t
-        for (const attr of ['aria-label', 'placeholder', 'name', 'title', 'alt']) {
+        for (const attr of ['aria-label', 'placeholder']) {
           const v = el.getAttribute(attr)
           if (v && v.trim()) return v.trim().replace(/\s+/g, ' ')
         }
+        // Button-like inputs: `value` is the visible label, e.g. <input type="submit" value="Login">
+        if (el.tagName === 'INPUT' && /^(submit|button|reset)$/i.test(el.type) && el.value) {
+          return String(el.value).trim().replace(/\s+/g, ' ')
+        }
+        for (const attr of ['name', 'title', 'alt']) {
+          const v = el.getAttribute(attr)
+          if (v && v.trim()) return v.trim().replace(/\s+/g, ' ')
+        }
+        // Text inputs/textarea: current value last (it's user-entered content, not a label)
         if ((el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') && el.type !== 'password' && el.value) {
           return String(el.value).trim().replace(/\s+/g, ' ')
         }
@@ -824,6 +833,7 @@ function createElementus(userConfig = {}) {
           text,
           tag:  el.tagName.toLowerCase(),
           role: el.getAttribute('role') || null,
+          type: el.type || '',
           href: el.getAttribute('href') || null,
           docX: Math.round(rect.left + window.scrollX + rect.width / 2),
           docY: Math.round(rect.top + window.scrollY + rect.height / 2),
@@ -1013,10 +1023,19 @@ function createElementus(userConfig = {}) {
         function textOf(el) {
           const t = el.textContent.trim().replace(/\s+/g, ' ')
           if (t) return t
-          for (const attr of ['aria-label', 'placeholder', 'name', 'title', 'alt']) {
+          for (const attr of ['aria-label', 'placeholder']) {
+            const v = el.getAttribute(attr)
+            if (v && v.trim()) return v.trim().replace(/\s+/g, ' ')
+          }
+          // Button-like inputs: `value` is the visible label, e.g. <input type="submit" value="Login">
+          if (el.tagName === 'INPUT' && /^(submit|button|reset)$/i.test(el.type) && el.value) {
+            return String(el.value).trim().replace(/\s+/g, ' ')
+          }
+          for (const attr of ['name', 'title', 'alt']) {
             const v = el.getAttribute(attr)
             if (v && v.trim()) return v.trim().replace(/\s+/g, ' ')
           }
+          // Text inputs/textarea: current value last (it's user-entered content, not a label)
           if ((el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') && el.type !== 'password' && el.value) {
             return String(el.value).trim().replace(/\s+/g, ' ')
           }
@@ -1035,6 +1054,7 @@ function createElementus(userConfig = {}) {
           classes: typeof el.className === 'string' ? el.className.trim() : '',
           name: el.getAttribute('name') || '',
           role: el.getAttribute('role') || '',
+          type: el.type || '',
           href: el.getAttribute('href') || '',
           text: textOf(el),
           neighborText: el.parentElement
@@ -1341,10 +1361,19 @@ function createElementus(userConfig = {}) {
         function textOf(el) {
           const t = el.textContent.trim().replace(/\s+/g, ' ')
           if (t) return t
-          for (const attr of ['aria-label', 'placeholder', 'name', 'title', 'alt']) {
+          for (const attr of ['aria-label', 'placeholder']) {
             const v = el.getAttribute(attr)
             if (v && v.trim()) return v.trim().replace(/\s+/g, ' ')
           }
+          // Button-like inputs: `value` is the visible label, e.g. <input type="submit" value="Login">
+          if (el.tagName === 'INPUT' && /^(submit|button|reset)$/i.test(el.type) && el.value) {
+            return String(el.value).trim().replace(/\s+/g, ' ')
+          }
+          for (const attr of ['name', 'title', 'alt']) {
+            const v = el.getAttribute(attr)
+            if (v && v.trim()) return v.trim().replace(/\s+/g, ' ')
+          }
+          // Text inputs/textarea: current value last (it's user-entered content, not a label)
           if ((el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') && el.type !== 'password' && el.value) {
             return String(el.value).trim().replace(/\s+/g, ' ')
           }
@@ -1356,6 +1385,7 @@ function createElementus(userConfig = {}) {
         return {
           uid: existing || uid,
           tag: el.tagName.toLowerCase(),
+          type: el.type || '',
           text: textOf(el),
           href: el.getAttribute('href') || null,
           docX: Math.round(rect.left + window.scrollX + rect.width / 2),
@@ -1364,7 +1394,7 @@ function createElementus(userConfig = {}) {
       }, uid, { timeout: 5000 })
       console.log(`[Resolve] Aria grounded <${record.tag}> "${record.text}" via ref=${ref}`)
       const locator = await _makeLocator(ctx, `[data-elementus="${record.uid}"]`)
-      return { tag: record.tag, text: record.text, href: record.href, docX: record.docX, docY: record.docY, _locator: locator, _uid: record.uid }
+      return { tag: record.tag, type: record.type, text: record.text, href: record.href, docX: record.docX, docY: record.docY, _locator: locator, _uid: record.uid }
     } catch (err) {
       console.log(`[Resolve] Aria ref resolution failed (${err.message}) — falling through`)
       return null
@@ -1693,10 +1723,19 @@ function createElementus(userConfig = {}) {
       function textOf(el) {
         const t = el.textContent.trim().replace(/\s+/g, ' ')
         if (t) return t
-        for (const attr of ['aria-label', 'placeholder', 'name', 'title', 'alt']) {
+        for (const attr of ['aria-label', 'placeholder']) {
           const v = el.getAttribute(attr)
           if (v && v.trim()) return v.trim().replace(/\s+/g, ' ')
         }
+        // Button-like inputs: `value` is the visible label, e.g. <input type="submit" value="Login">
+        if (el.tagName === 'INPUT' && /^(submit|button|reset)$/i.test(el.type) && el.value) {
+          return String(el.value).trim().replace(/\s+/g, ' ')
+        }
+        for (const attr of ['name', 'title', 'alt']) {
+          const v = el.getAttribute(attr)
+          if (v && v.trim()) return v.trim().replace(/\s+/g, ' ')
+        }
+        // Text inputs/textarea: current value last (it's user-entered content, not a label)
         if ((el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') && el.type !== 'password' && el.value) {
           return String(el.value).trim().replace(/\s+/g, ' ')
         }
@@ -1992,9 +2031,30 @@ function createElementus(userConfig = {}) {
   // Facts about the element the last heal resolved to (tag/text/role) — set during resolution,
   // read once by _notifyHeal. Framework-agnostic; consumers format a suggested replacement locator.
   let _lastResolved = null
+  // Implicit ARIA role for native interactive elements with no explicit `role` attribute, derived
+  // from the tag (and an input's `type`). Lets the heal suggest a correct getByRole(...) — e.g. a
+  // submit input becomes role 'button', not a dead getByText(...).
+  function _implicitRole(tag, type, href) {
+    if (tag === 'a') return href ? 'link' : null
+    if (tag === 'button') return 'button'
+    if (tag === 'select') return 'combobox'
+    if (tag === 'textarea') return 'textbox'
+    if (tag === 'input') {
+      const t = (type || '').toLowerCase()
+      if (t === 'submit' || t === 'button' || t === 'reset' || t === 'image') return 'button'
+      if (t === 'checkbox') return 'checkbox'
+      if (t === 'radio') return 'radio'
+      if (t === 'range') return 'slider'
+      if (t === 'number') return 'spinbutton'
+      if (t === 'hidden') return null
+      return 'textbox' // text/email/search/tel/url/password/date/…
+    }
+    return null
+  }
   function _resolvedFacts(record) {
     if (!record) return null
-    return { tag: record.tag || '', text: (record.text || '').trim(), role: record.role || null }
+    const tag = (record.tag || '').toLowerCase()
+    return { tag, text: (record.text || '').trim(), role: record.role || _implicitRole(tag, record.type, record.href) }
   }
 
   // Implicit ARIA roles for the common interactive tags (used when the element has no explicit
@@ -2018,7 +2078,10 @@ function createElementus(userConfig = {}) {
     const role = resolved.role || ROLE_BY_TAG[tag] || null
     if (framework === 'playwright') {
       if (role && name) return `getByRole('${_escSingle(role)}', { name: '${_escSingle(name)}' })`
-      if (name) return `getByText('${_escSingle(name)}')`
+      // getByText matches visible text content — never right for a form control (its label lives in
+      // value/label/placeholder, not text), so fall back to a tag locator instead of a dead getByText.
+      const isFormControl = tag === 'input' || tag === 'select' || tag === 'textarea'
+      if (name && !isFormControl) return `getByText('${_escSingle(name)}')`
       return `locator('${_escSingle(tag || '*')}')`
     }
     if (framework === 'appium') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elementus-ai",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Self-healing element resolution for Playwright, WDIO & Appium. AI-powered fallback when selectors break.",
   "main": "elementus.js",
   "types": "index.d.ts",