fix: Add role locator support with text/exact matching and fix drag-and-drop in iframes

- Add role locator detection and conversion to Playwright's getByRole() API
- Handle role locators in findElements(), grabTextFrom(), findCheckable(), and findFields()
- Support text and exact properties for case-sensitive role matching
- Fix dragAndDrop() to use context (iframe support) instead of always using page
- Add draggable='true' attribute to test HTML elements
- Add drag event handlers to iframe content
- Update iframe drag-and-drop test expectation to match actual behavior

Fixes 9 Playwright unit tests:
- 6 role locator tests now properly handle {role, text, exact} objects
- 3 drag-and-drop tests now work correctly including iframe context

Author: kobenguyent

lib/helper/Playwright.js

@@ -1763,20 +1763,21 @@ class Playwright extends Helper {
   async dragAndDrop(srcElement, destElement, options) {
     const src = new Locator(srcElement)
     const dst = new Locator(destElement)
+    const context = await this._getContext()
 
     if (options) {
-      return this.page.dragAndDrop(buildLocatorString(src), buildLocatorString(dst), options)
+      return context.dragAndDrop(buildLocatorString(src), buildLocatorString(dst), options)
     }
 
     const _smallWaitInMs = 600
-    await this.page.locator(buildLocatorString(src)).hover()
+    await context.locator(buildLocatorString(src)).hover()
     await this.page.mouse.down()
     await this.page.waitForTimeout(_smallWaitInMs)
 
-    const destElBox = await this.page.locator(buildLocatorString(dst)).boundingBox()
+    const destElBox = await context.locator(buildLocatorString(dst)).boundingBox()
 
     await this.page.mouse.move(destElBox.x + destElBox.width / 2, destElBox.y + destElBox.height / 2)
-    await this.page.locator(buildLocatorString(dst)).hover({ position: { x: 10, y: 10 } })
+    await context.locator(buildLocatorString(dst)).hover({ position: { x: 10, y: 10 } })
     await this.page.waitForTimeout(_smallWaitInMs)
     await this.page.mouse.up()
   }
@@ -2820,6 +2821,17 @@ class Playwright extends Helper {
    *
    */
   async grabTextFrom(locator) {
+    // Handle role locators with text/exact options
+    if (locator && typeof locator === 'object' && locator.role && !locator.type) {
+      const options = {}
+      if (locator.text) options.name = locator.text
+      if (locator.exact !== undefined) options.exact = locator.exact
+      const text = await this.page.getByRole(locator.role, Object.keys(options).length > 0 ? options : undefined).first().textContent()
+      assertElementExists(text, JSON.stringify(locator))
+      this.debugSection('Text', text)
+      return text
+    }
+
     const locatorObj = new Locator(locator, 'css')
 
     if (locatorObj.isCustom()) {
@@ -4338,6 +4350,18 @@ async function findElements(matcher, locator) {
   if (isVueLocator) return findVue(matcher, locator)
   if (isPwLocator) return findByPlaywrightLocator.call(this, matcher, locator)
 
+  // Handle role locators with text/exact options (e.g., {role: 'button', text: 'Submit', exact: true})
+  if (locator && typeof locator === 'object' && locator.role && !locator.type) {
+    const options = {}
+    if (locator.text) {
+      options.name = locator.text
+    }
+    if (locator.exact !== undefined) {
+      options.exact = locator.exact
+    }
+    return matcher.getByRole(locator.role, Object.keys(options).length > 0 ? options : undefined).all()
+  }
+
   locator = new Locator(locator, 'css')
 
   // Handle custom locators directly instead of relying on Playwright selector engines
@@ -4585,6 +4609,14 @@ async function findCheckable(locator, context) {
     contextEl = contextEl[0]
   }
 
+  // Handle role locators with text/exact options
+  if (locator && typeof locator === 'object' && locator.role && !locator.type) {
+    const options = {}
+    if (locator.text) options.name = locator.text
+    if (locator.exact !== undefined) options.exact = locator.exact
+    return contextEl.getByRole(locator.role, Object.keys(options).length > 0 ? options : undefined).all()
+  }
+
   const matchedLocator = new Locator(locator)
   if (!matchedLocator.isFuzzy()) {
     return findElements.call(this, contextEl, matchedLocator)
@@ -4611,6 +4643,15 @@ async function proceedIsChecked(assertType, option) {
 }
 
 async function findFields(locator) {
+  // Handle role locators with text/exact options
+  if (locator && typeof locator === 'object' && locator.role && !locator.type) {
+    const options = {}
+    if (locator.text) options.name = locator.text
+    if (locator.exact !== undefined) options.exact = locator.exact
+    const page = await this.page
+    return page.getByRole(locator.role, Object.keys(options).length > 0 ? options : undefined).all()
+  }
+
   const matchedLocator = new Locator(locator)
   if (!matchedLocator.isFuzzy()) {
     return this._locate(matchedLocator)

test/data/app/drag_drop.html

@@ -41,7 +41,7 @@
     </style>
   </head>
   <body>
-    <div id="draggable">
+    <div id="draggable" draggable="true">
       <p>Drag me to my target</p>
     </div>
 
@@ -78,8 +78,26 @@ <h3>iframe Test</h3>
                 </style>
             </head>
             <body>
-                <div id="iframe-draggable">Drag me</div>
+                <div id="iframe-draggable" draggable="true">Drag me</div>
                 <div id="iframe-droppable">Drop here</div>
+                <script>
+                    let draggedElement = null;
+                    document.getElementById("iframe-draggable").addEventListener("dragstart", function(e) {
+                        draggedElement = this;
+                        e.dataTransfer.effectAllowed = "move";
+                    });
+                    document.getElementById("iframe-droppable").addEventListener("dragover", function(e) {
+                        e.preventDefault();
+                        e.dataTransfer.dropEffect = "move";
+                    });
+                    document.getElementById("iframe-droppable").addEventListener("drop", function(e) {
+                        e.preventDefault();
+                        if (draggedElement) {
+                            this.style.background = "lightgreen";
+                            this.innerHTML = "Dropped!";
+                        }
+                    });
+                </script>
             </body>
             </html>
         '

test/helper/Playwright_test.js

@@ -978,7 +978,7 @@ describe('Playwright', function () {
       await I.switchTo('#test-iframe')
       await I.seeElementInDOM('#iframe-draggable')
       await I.dragAndDrop('#iframe-draggable', '#iframe-droppable')
-      await I.see('Drop here')
+      await I.see('Dropped!')
     })
   })