fix(pw): drag n drop issue (#3692)

codeceptjs · Jun 30, 2023 · cf714ec · cf714ec
1 parent 1b5844a
commit cf714ec
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 8 deletions.
diff --git a/docs/helpers/Playwright.md b/docs/helpers/Playwright.md
@@ -711,7 +711,7 @@ I.dragAndDrop('#dragHandle', '#container');
 -   `options` **any?** [Additional options][13] can be passed as 3rd argument.```js
     // specify coordinates for source position
     I.dragAndDrop('img.src', 'img.dst', { sourcePosition: {x: 10, y: 10} })
-    ```> By default option `force: true` is set 
+    ```> When no option is set, custom drag and drop would be used, to use the dragAndDrop API from Playwright, please set options, for example `force: true`
 
 ### dragSlider
 

diff --git a/lib/helper/Playwright.js b/lib/helper/Playwright.js
@@ -960,21 +960,34 @@ class Playwright extends Helper {
 
   /**
    * {{> dragAndDrop }}
-   *
    * @param {any} [options] [Additional options](https://playwright.dev/docs/api/class-page#page-drag-and-drop) can be passed as 3rd argument.
    *
    * ```js
    * // specify coordinates for source position
    * I.dragAndDrop('img.src', 'img.dst', { sourcePosition: {x: 10, y: 10} })
    * ```
    *
-   * > By default option `force: true` is set
+   * > When no option is set, custom drag and drop would be used, to use the dragAndDrop API from Playwright, please set options, for example `force: true`
    */
-  async dragAndDrop(srcElement, destElement, options = { force: true }) {
-    const src = new Locator(srcElement, 'css');
-    const dst = new Locator(destElement, 'css');
+  async dragAndDrop(srcElement, destElement, options) {
+    const src = new Locator(srcElement);
+    const dst = new Locator(destElement);
+
+    if (options) {
+      return this.page.dragAndDrop(buildLocatorString(src), buildLocatorString(dst), options);
+    }
 
-    return this.page.dragAndDrop(buildLocatorString(src), buildLocatorString(dst), options);
+    const _smallWaitInMs = 600;
+    await this.page.locator(buildLocatorString(src)).hover();
+    await this.page.mouse.down();
+    await this.page.waitForTimeout(_smallWaitInMs);
+
+    const destElBox = await this.page.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 this.page.waitForTimeout(_smallWaitInMs);
+    await this.page.mouse.up();
   }
 
   /**

diff --git a/test/helper/Playwright_test.js b/test/helper/Playwright_test.js
@@ -706,11 +706,16 @@ describe('Playwright', function () {
   });
 
   describe('#dragAndDrop', () => {
-    it('Drag item from source to target (no iframe) @dragNdrop', () => I.amOnPage('https://jqueryui.com/resources/demos/droppable/default.html')
+    it('Drag item from source to target (no iframe) @dragNdrop - customized steps', () => I.amOnPage('https://jqueryui.com/resources/demos/droppable/default.html')
       .then(() => I.seeElementInDOM('#draggable'))
       .then(() => I.dragAndDrop('#draggable', '#droppable'))
       .then(() => I.see('Dropped')));
 
+    it('Drag item from source to target (no iframe) @dragNdrop - using Playwright API', () => I.amOnPage('https://jqueryui.com/resources/demos/droppable/default.html')
+      .then(() => I.seeElementInDOM('#draggable'))
+      .then(() => I.dragAndDrop('#draggable', '#droppable', { force: true }))
+      .then(() => I.see('Dropped')));
+
     xit('Drag and drop from within an iframe', () => I.amOnPage('https://jqueryui.com/droppable')
       .then(() => I.resizeWindow(700, 700))
       .then(() => I.switchTo('//iframe[@class="demo-frame"]'))