Merge pull request #455 from angrykoala/dev

2.12.0

Author: angrykoala

.github/workflows/test.yml

@@ -16,6 +16,8 @@ jobs:
       - run: npm install
       - name: test
         run: |
+          sudo apt-get update
+          sudo apt-get install -y libgbm-dev
           npm run lint
           npm test || npm test
         env:

CHANGELOG.md

@@ -1,3 +1,11 @@
+2.12.0 / 2020-04-26
+===================
+
+* Puppeteer updated to v3
+* DragAndDrop method
+* Minor fix in types
+* Dependencies updated
+
 2.11.3 / 2020-03-07
 ===================
 

README.md

@@ -504,6 +504,15 @@ Unfocus the first element matching the given selector.
 **hover(selector)**  
 Hovers over the first element matching the given selector.
 
+**dragAndDrop(source, target)**  
+Drags the `source` selector and drops it on `target`.
+
+```js
+await browser.dragAndDrop("#my-draggable", "#target");
+```
+
+> Note that this method emulates expected events of this behavior instead of emulating mouse interaction
+
 **scroll(value, xValue?)**  
 Vertically scrolls the page to the given value on pixels, an optional xValue can be passed for horizontal scrolling. If value is a selector or DomElement, the page will scroll until that element is at view.
 
@@ -2049,7 +2058,10 @@ jobs:
           node-version: 12
       - run: npm install
       - name: test
-        run: npm test || npm test
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libgbm-dev
+          npm test || npm test
         env:
           CI: true
 ```

globals.d.ts

@@ -1,6 +1,6 @@
 declare namespace WendigoUtils {
-    function isVisible(element: HTMLElement): boolean;
-    function queryElement(selector: string | HTMLElement): HTMLElement;
+    function isVisible(element: HTMLElement | null): boolean;
+    function queryElement(selector: string | HTMLElement): HTMLElement | null;
     function queryAll(selector: string | HTMLElement): Array<HTMLElement>;
     function xPathQuery(xPath: string): Array<HTMLElement>;
     function getStyles(element: string | HTMLElement): { [s: string]: string };

injection_scripts/wendigo_utils.ts

@@ -6,7 +6,7 @@ export default function WendigoUtilsLoader(): void {
         const _origDate = Date;
 
         (window as any).WendigoUtils = {
-            isVisible(element: Element | Document): boolean {
+            isVisible(element: Element | Document | null): boolean {
                 if (!element) return false;
                 if (element === document) return true; // Top element, always visible
                 else {
@@ -77,7 +77,7 @@ export default function WendigoUtilsLoader(): void {
             },
             findXPath(node: Element | Document): string {
                 return WendigoPathFinder.xPath(node);
-            }
+            },
         };
     }
 }

lib/browser/mixins/browser_actions.ts

@@ -142,6 +142,7 @@ export default abstract class BrowserActions extends BrowserQueries {
                     window.scroll(xval, val);
                 } else {
                     const element = WendigoUtils.queryElement(val);
+                    if(!element) throw new Error()
                     element.scrollIntoView();
                 }
             }, value, xvalue);
@@ -167,6 +168,7 @@ export default abstract class BrowserActions extends BrowserQueries {
         try {
             const result = await this.evaluate((q) => {
                 const element = WendigoUtils.queryElement(q);
+                if(!element) throw new Error()
                 element.blur();
             }, selector);
             return result;
@@ -175,18 +177,55 @@ export default abstract class BrowserActions extends BrowserQueries {
         }
     }
 
-    // public async dragAndDrop(from: WendigoSelector, to: WendigoSelector): Promise<void> {
-    //     const fromElement = await this.query(from);
-    //     const toElement = await this.query(to);
-    //     if (!fromElement || !toElement) throw new QueryError("dragAndDrop", `Elements "${from} and ${to} not found."`);
-    //     const boxFrom = await fromElement.element.boundingBox();
-    //     const boxTo = await toElement.element.boundingBox();
-    //     if (!boxFrom || !boxTo) throw new FatalError("dragAndDrop", "Bounding box not found");
-    //     const mouse = this._page.mouse;
-    //     await mouse.up();
-    //     await mouse.move(boxFrom.x + (boxFrom.width / 2), boxFrom.y + (boxFrom.height / 2));
-    //     await mouse.down();
-    //     await mouse.move(boxTo.x + (boxTo.width / 2), boxTo.y + (boxTo.height / 2));
-    //     await mouse.up();
-    // }
+    @FailIfNotLoaded
+    public async dragAndDrop(from: WendigoSelector, to: WendigoSelector): Promise<void> {
+        try {
+            await this.evaluate((q1, q2) => {
+                // Based on https://stackoverflow.com/questions/49772472/how-to-simulate-a-drag-and-drop-action-in-puppeteer
+                const source = WendigoUtils.queryElement(q1);
+                const target = WendigoUtils.queryElement(q2);
+                if (!source || !target) throw new Error()
+
+                let event = document.createEvent("CustomEvent") as any;
+
+                event.initCustomEvent("mousedown", true, true, null);
+                event.clientX = source.getBoundingClientRect().top;
+                event.clientY = source.getBoundingClientRect().left;
+                source.dispatchEvent(event);
+
+                event = document.createEvent("CustomEvent");
+                event.initCustomEvent("dragstart", true, true, null);
+                event.clientX = source.getBoundingClientRect().top;
+                event.clientY = source.getBoundingClientRect().left;
+                source.dispatchEvent(event);
+
+                event = document.createEvent("CustomEvent");
+                event.initCustomEvent("drag", true, true, null);
+                event.clientX = source.getBoundingClientRect().top;
+                event.clientY = source.getBoundingClientRect().left;
+                source.dispatchEvent(event);
+
+
+                event = document.createEvent("CustomEvent");
+                event.initCustomEvent("dragover", true, true, null);
+                event.clientX = target.getBoundingClientRect().top;
+                event.clientY = target.getBoundingClientRect().left;
+                target.dispatchEvent(event);
+
+                event = document.createEvent("CustomEvent");
+                event.initCustomEvent("drop", true, true, null);
+                event.clientX = target.getBoundingClientRect().top;
+                event.clientY = target.getBoundingClientRect().left;
+                target.dispatchEvent(event);
+
+                event = document.createEvent("CustomEvent");
+                event.initCustomEvent("dragend", true, true, null);
+                event.clientX = target.getBoundingClientRect().top;
+                event.clientY = target.getBoundingClientRect().left;
+                target.dispatchEvent(event);
+            }, from, to);
+        } catch (err) {
+            throw new QueryError("dragAndDrop", `Element not found.`);
+        }
+    }
 }

lib/browser/mixins/browser_edit.ts

@@ -30,6 +30,7 @@ export default abstract class BrowserEdit extends BrowserInfo {
         try {
             await this.evaluate((q, attr, val) => {
                 const element = WendigoUtils.queryElement(q);
+                if(!element) throw new Error()
                 if (val === null) element.removeAttribute(attr);
                 else element.setAttribute(attr, val);
             }, selector, attribute, value);

lib/wendigo.ts

@@ -108,7 +108,7 @@ export default class Wendigo {
         let context: BrowserContext;
         if (settings.incognito) {
             context = await instance.createIncognitoBrowserContext();
-        } else context = await instance.defaultBrowserContext();
+        } else context = instance.defaultBrowserContext();
 
         return new PuppeteerContext(context);
     }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wendigo",
-  "version": "2.11.3",
+  "version": "2.12.0",
   "description": "A proper monster for front-end automated testing",
   "engines": {
     "node": ">=8.0.0"
@@ -43,19 +43,19 @@
   "dependencies": {
     "compositer": "^1.3.6",
     "is-class": "0.0.9",
-    "puppeteer": "~2.0.0"
+    "puppeteer": "~3.0.1"
   },
   "devDependencies": {
     "@types/mocha": "^7.0.2",
-    "@types/node": "^13.9.0",
+    "@types/node": "^13.13.2",
     "@types/puppeteer": "~2.0.1",
     "basic-auth": "^2.0.1",
     "eslint": "^6.8.0",
     "express": "^4.17.1",
     "markdownlint-cli": "^0.22.0",
-    "mocha": "^7.1.0",
-    "sinon": "^9.0.0",
-    "tslint": "^6.0.0",
+    "mocha": "^7.1.1",
+    "sinon": "^9.0.2",
+    "tslint": "^6.1.1",
     "typescript": "^3.8.3"
   }
 }

tests/browser/drag.test.js

@@ -2,14 +2,14 @@
 
 const Wendigo = require('../..');
 const configUrls = require('../config.json').urls;
+const utils = require('../test_utils');
 
-// Tests #227
-describe.skip("Drag And Drop", function() {
+describe("Drag And Drop", function() {
     this.timeout(5000);
     let browser;
 
     before(async() => {
-        browser = await Wendigo.createBrowser();
+        browser = await Wendigo.createBrowser({log: true});
     });
 
     beforeEach(async() => {
@@ -23,7 +23,14 @@ describe.skip("Drag And Drop", function() {
     it("Drag And Drop Element", async() => {
         await browser.assert.text("#result", "NOT");
         await browser.dragAndDrop("#draggable-text", "#target");
-        await browser.wait(100);
         await browser.assert.text("#result", "DROPPED");
     });
+
+    it("Drag And Drop Fails If Element Does Not Exists", async() => {
+        await browser.assert.text("#result", "NOT");
+        await utils.assertThrowsAsync(async() => {
+            await browser.dragAndDrop("#not-element", "#target");
+        }, `QueryError: [dragAndDrop] Element not found.`);
+        await browser.assert.text("#result", "NOT");
+    });
 });

tests/dummy_server/static/drag.html

@@ -25,7 +25,7 @@
             // console.log("drop")
             ev.preventDefault();
             var textElem=document.querySelector("#result");
-            textElem.textContent="DROP"
+            textElem.textContent="DROPPED"
         }
     </script>
 </head>