Reverted clickable in Playwright

Author: DavertMik

lib/helper/Playwright.js

@@ -4505,32 +4505,14 @@ async function proceedClick(locator, context = null, options = {}) {
 }
 
 async function findClickable(matcher, locator) {
-  // Convert to Locator first to handle JSON strings properly
-  const matchedLocator = new Locator(locator)
-
-  // Handle role locators from Locator
-  if (matchedLocator.isRole()) {
-    return findByRole(matcher, matchedLocator)
-  }
+  if (locator.react) return findReact(matcher, locator)
+  if (locator.vue) return findVue(matcher, locator)
 
-  if (!matchedLocator.isFuzzy()) return findElements.call(this, matcher, matchedLocator)
+  locator = new Locator(locator)
+  if (!locator.isFuzzy()) return findElements.call(this, matcher, locator)
 
   let els
-  const literal = xpathLocator.literal(matchedLocator.value)
-
-  try {
-    els = await matcher.getByRole('button', { name: matchedLocator.value }).all()
-    if (els.length) return els
-  } catch (err) {
-    // getByRole not supported or failed
-  }
-
-  try {
-    els = await matcher.getByRole('link', { name: matchedLocator.value }).all()
-    if (els.length) return els
-  } catch (err) {
-    // getByRole not supported or failed
-  }
+  const literal = xpathLocator.literal(locator.value)
 
   els = await findElements.call(this, matcher, Locator.clickable.narrow(literal))
   if (els.length) return els
@@ -4545,7 +4527,7 @@ async function findClickable(matcher, locator) {
     // Do nothing
   }
 
-  return findElements.call(this, matcher, matchedLocator.value) // by css or xpath
+  return findElements.call(this, matcher, locator.value) // by css or xpath
 }
 
 async function proceedSee(assertType, text, context, strict = false) {

lib/locator.js

@@ -6,6 +6,9 @@ const require = createRequire(import.meta.url)
 let cssToXPath
 
 const locatorTypes = ['css', 'by', 'xpath', 'id', 'name', 'fuzzy', 'frame', 'shadow', 'role']
+
+// Roles that can be used as shorthand locators: { button: 'text' } -> { role: 'button', text: 'text' }
+const shorthandRoles = ['button', 'link', 'textbox', 'checkbox', 'radio', 'combobox', 'listbox', 'heading', 'listitem', 'menuitem', 'tab', 'option', 'searchbox', 'alert', 'dialog']
 /** @class */
 class Locator {
   /**
@@ -114,6 +117,16 @@ class Locator {
     this.locator = locator
     const keys = Object.keys(locator)
     const [type] = keys
+
+    // Transform shorthand role locators: { button: 'text' } -> { role: 'button', text: 'text' }
+    if (keys.length === 1 && shorthandRoles.includes(type)) {
+      this.locator = { role: type, text: locator[type] }
+      this.type = 'role'
+      this.value = this.locator
+      Locator.filters.forEach(f => f(this.locator, this))
+      return
+    }
+
     this.type = type
     this.value = keys.length > 1 ? locator : locator[type]
     Locator.filters.forEach(f => f(locator, this))
@@ -500,7 +513,7 @@ Locator.clickable = {
       `.//*[@aria-label = ${literal}]`,
       `.//*[@title = ${literal}]`,
       `.//*[@aria-labelledby = //*[@id][normalize-space(string(.)) = ${literal}]/@id ]`,
-      `.//*[@role='button'][normalize-space(.)=${literal}]`,
+      `.//*[@role='button' or @role='link' or @role='tab' or @role='menuitem' or @role='menuitemcheckbox' or @role='menuitemradio' or @role='option' or @role='radio' or @role='checkbox' or @role='switch' or @role='treeitem' or @role='gridcell' or @role='columnheader' or @role='rowheader' or @role='scrollbar' or @role='slider' or @role='spinbutton'][normalize-space(.)=${literal}]`,
     ]),
 
   /**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codeceptjs",
-  "version": "4.0.1-beta.21",
+  "version": "4.0.1-beta.23",
   "type": "module",
   "description": "Supercharged End 2 End Testing Framework for NodeJS",
   "keywords": [