implemented clickXY action (#5248)

Co-authored-by: DavertMik <[email protected]>

Author: 2 people

lib/helper/Playwright.js

@@ -2102,6 +2102,49 @@ class Playwright extends Helper {
     return proceedClick.call(this, locator, context, { button: 'right' })
   }
 
+  /**
+   * Performs click at specific coordinates.
+   * If locator is provided, the coordinates are relative to the element.
+   * If locator is not provided, the coordinates are global page coordinates.
+   *
+   * ```js
+   * // Click at global coordinates (100, 200)
+   * I.clickXY(100, 200);
+   *
+   * // Click at coordinates (50, 30) relative to element
+   * I.clickXY('#someElement', 50, 30);
+   * ```
+   *
+   * @param {CodeceptJS.LocatorOrString|number} locator Element to click on or X coordinate if no element.
+   * @param {number} [x] X coordinate relative to element, or Y coordinate if locator is a number.
+   * @param {number} [y] Y coordinate relative to element.
+   * @returns {Promise<void>}
+   */
+  async clickXY(locator, x, y) {
+    // If locator is a number, treat it as global X coordinate
+    if (typeof locator === 'number') {
+      const globalX = locator
+      const globalY = x
+      await this.page.mouse.click(globalX, globalY)
+      return this._waitForAction()
+    }
+
+    // Locator is provided, click relative to element
+    const el = await this._locateElement(locator)
+    assertElementExists(el, locator, 'Element to click')
+
+    const box = await el.boundingBox()
+    if (!box) {
+      throw new Error(`Element ${locator} is not visible or has no bounding box`)
+    }
+
+    const absoluteX = box.x + x
+    const absoluteY = box.y + y
+
+    await this.page.mouse.click(absoluteX, absoluteY)
+    return this._waitForAction()
+  }
+
   /**
    *
    * [Additional options](https://playwright.dev/docs/api/class-elementhandle#element-handle-check) for check available as 3rd argument.

lib/helper/Puppeteer.js

@@ -1341,6 +1341,49 @@ class Puppeteer extends Helper {
     return proceedClick.call(this, locator, context, { button: 'right' })
   }
 
+  /**
+   * Performs click at specific coordinates.
+   * If locator is provided, the coordinates are relative to the element.
+   * If locator is not provided, the coordinates are global page coordinates.
+   *
+   * ```js
+   * // Click at global coordinates (100, 200)
+   * I.clickXY(100, 200);
+   *
+   * // Click at coordinates (50, 30) relative to element
+   * I.clickXY('#someElement', 50, 30);
+   * ```
+   *
+   * @param {CodeceptJS.LocatorOrString|number} locator Element to click on or X coordinate if no element.
+   * @param {number} [x] X coordinate relative to element, or Y coordinate if locator is a number.
+   * @param {number} [y] Y coordinate relative to element.
+   * @returns {Promise<void>}
+   */
+  async clickXY(locator, x, y) {
+    // If locator is a number, treat it as global X coordinate
+    if (typeof locator === 'number') {
+      const globalX = locator
+      const globalY = x
+      await this.page.mouse.click(globalX, globalY)
+      return this._waitForAction()
+    }
+
+    // Locator is provided, click relative to element
+    const els = await this._locate(locator)
+    assertElementExists(els, locator, 'Element to click')
+
+    const box = await els[0].boundingBox()
+    if (!box) {
+      throw new Error(`Element ${locator} is not visible or has no bounding box`)
+    }
+
+    const absoluteX = box.x + x
+    const absoluteY = box.y + y
+
+    await this.page.mouse.click(absoluteX, absoluteY)
+    return this._waitForAction()
+  }
+
   /**
    * {{> checkOption }}
    */

lib/helper/WebDriver.js

@@ -1113,6 +1113,75 @@ class WebDriver extends Helper {
     await this.browser.buttonDown(2)
   }
 
+  /**
+   * Performs click at specific coordinates.
+   * If locator is provided, the coordinates are relative to the element's top-left corner.
+   * If locator is not provided, the coordinates are relative to the body element.
+   *
+   * ```js
+   * // Click at coordinates (100, 200) relative to body
+   * I.clickXY(100, 200);
+   *
+   * // Click at coordinates (50, 30) relative to element's top-left corner
+   * I.clickXY('#someElement', 50, 30);
+   * ```
+   *
+   * @param {CodeceptJS.LocatorOrString|number} locator Element to click on or X coordinate if no element.
+   * @param {number} [x] X coordinate relative to element's top-left, or Y coordinate if locator is a number.
+   * @param {number} [y] Y coordinate relative to element's top-left.
+   * @returns {Promise<void>}
+   */
+  async clickXY(locator, x, y) {
+    // If locator is a number, treat it as X coordinate and use body as base
+    if (typeof locator === 'number') {
+      const globalX = locator
+      const globalY = x
+      locator = '//body'
+      x = globalX
+      y = globalY
+    }
+
+    // Locate the base element
+    const res = await this._locate(withStrictLocator(locator), true)
+    assertElementExists(res, locator, 'Element to click')
+    const el = usingFirstElement(res)
+
+    // Get element position and size to calculate top-left corner
+    const location = await el.getLocation()
+    const size = await el.getSize()
+
+    // WebDriver clicks at center by default, so we need to offset from center to top-left
+    // then add our desired x, y coordinates
+    const offsetX = -(size.width / 2) + x
+    const offsetY = -(size.height / 2) + y
+
+    if (this.browser.isW3C) {
+      // Use performActions for W3C WebDriver
+      return this.browser.performActions([
+        {
+          type: 'pointer',
+          id: 'pointer1',
+          parameters: { pointerType: 'mouse' },
+          actions: [
+            {
+              type: 'pointerMove',
+              origin: el,
+              duration: 0,
+              x: Math.round(offsetX),
+              y: Math.round(offsetY),
+            },
+            { type: 'pointerDown', button: 0 },
+            { type: 'pointerUp', button: 0 },
+          ],
+        },
+      ])
+    }
+
+    // Fallback for non-W3C browsers
+    await el.moveTo({ xOffset: Math.round(offsetX), yOffset: Math.round(offsetY) })
+    return el.click()
+  }
+
   /**
    * {{> forceRightClick }}
    *

test/data/app/view/form/click_coordinates.php

@@ -0,0 +1,60 @@
+<html>
+<head>
+<style>
+body {
+  margin: 0;
+  padding: 20px;
+}
+#clickArea {
+  width: 400px;
+  height: 300px;
+  background-color: #f0f0f0;
+  border: 2px solid #333;
+  position: relative;
+  margin: 20px 0;
+}
+#output {
+  font-family: monospace;
+  margin-top: 20px;
+}
+</style>
+<script>
+let lastClickX = 0;
+let lastClickY = 0;
+
+function handleClick(event) {
+  const rect = event.currentTarget.getBoundingClientRect();
+  lastClickX = event.clientX - rect.left;
+  lastClickY = event.clientY - rect.top;
+
+  document.getElementById('output').innerHTML =
+    'Clicked at: X=' + Math.round(lastClickX) + ', Y=' + Math.round(lastClickY);
+}
+
+function handleGlobalClick(event) {
+  lastClickX = event.clientX;
+  lastClickY = event.clientY;
+
+  document.getElementById('globalOutput').innerHTML =
+    'Global click at: X=' + Math.round(lastClickX) + ', Y=' + Math.round(lastClickY);
+}
+
+window.addEventListener('load', function() {
+  document.getElementById('clickArea').addEventListener('click', handleClick);
+  document.body.addEventListener('click', handleGlobalClick);
+});
+</script>
+</head>
+<body>
+
+<h1>Click Coordinates Test</h1>
+
+<div id="clickArea">
+  Click inside this area
+</div>
+
+<div id="output">No clicks yet</div>
+<div id="globalOutput">No global clicks yet</div>
+
+</body>
+</html>

test/helper/webapi.js

@@ -352,6 +352,28 @@ export function tests() {
     })
   })
 
+  describe('#clickXY', () => {
+    it('should click at global coordinates', async () => {
+      await I.amOnPage('/form/click_coordinates')
+      await I.dontSee('Global click at:')
+      await I.clickXY(100, 50)
+      await I.see('Global click at: X=100, Y=50')
+    })
+
+    it('should click at coordinates relative to element', async () => {
+      await I.amOnPage('/form/click_coordinates')
+      await I.dontSee('Clicked at:')
+      await I.clickXY('#clickArea', 50, 30)
+      await I.see('Clicked at: X=50, Y=30')
+    })
+
+    it('should click at different relative coordinates', async () => {
+      await I.amOnPage('/form/click_coordinates')
+      await I.clickXY('#clickArea', 100, 75)
+      await I.see('Clicked at: X=100, Y=75')
+    })
+  })
+
   describe('#checkOption', () => {
     it('should check option by css', async () => {
       await I.amOnPage('/form/checkbox')