Merge pull request #57 from devbridge/add-offset-support-to-click-and…

…-hover

Add offset support to click and hover

example/tests/elementActions.test.js

@@ -2,6 +2,8 @@
 import { Element } from "test-juggler";
 
 describe("Element Actions", () => {
+    const sliceToClick = new Element("[seriesName='seriesx2'] path");
+
     beforeEach(async () => {
         console.log("Running test: " + jasmine["currentTest"].fullName);
     });
@@ -88,7 +90,9 @@ describe("Element Actions", () => {
         await page.goto("http://demo.guru99.com/test/simple_context_menu.html");
         const doubleClickButton = new Element("#authentication > button");
         var alertIsShown = false;
+        var alertMessage = null;
         page.on("dialog", async dialog => {
+            alertMessage = dialog.message();
             alertIsShown = true;
             await dialog.dismiss();
         });
@@ -98,6 +102,7 @@ describe("Element Actions", () => {
 
         //Assert
         expect(alertIsShown).toBeTruthy();
+        expect(alertMessage).toEqual("You double clicked me.. Thank You..");
     });
 
     it("should right click an element", async () => {
@@ -233,6 +238,27 @@ describe("Element Actions", () => {
         expect(await formElement.getAttributeValue(attributeName)).toEqual("/authenticate");
     });
 
+    it.each`
+    action                                                  | selectedAttr  | pieClickedAttr    | description
+    ${async () => { sliceToClick.hover(150); }}             | ${null}       | ${null}           | ${"hover"}
+    ${async () => { sliceToClick.click(150); }}             | ${"true"}     | ${"true"}         | ${"left-click"}
+    ${async () => { sliceToClick.rightClick(null, 100); }}  | ${"true"}     | ${null}           | ${"right-click"}
+    `("should $description element with offset", async ({ action, selectedAttr, pieClickedAttr }) => {
+    //Arrange
+    const toolTip = new Element(".apexcharts-tooltip.apexcharts-active");
+    await page.goto("https://apexcharts.com/samples/react/pie/simple-donut.html");
+    await page.waitForSelector(`${sliceToClick.selector}[stroke-width='2']`);
+
+    //Act
+    await action();
+
+    //Assert
+    expect(await sliceToClick.getAttributeValue("selected")).toEqual(selectedAttr);
+    expect(await sliceToClick.getAttributeValue("data:pieClicked")).toEqual(pieClickedAttr);
+    expect(await toolTip.isVisible()).toBe(true);
+    expect(await toolTip.text()).toEqual("series-2: 55");
+});
+
     it("should type element's text value", async () => {
         //Arrange
         await page.goto("http://the-internet.herokuapp.com/inputs");
@@ -249,4 +275,19 @@ describe("Element Actions", () => {
     xit("should cover element", async () => {
         //TODO: Test should be added and unxit`ed when DTAF-78 is implemented.
     });
-});
+
+    it("should get coordinates of element", async () => {
+        //Arrange
+        const expectedXCoordinate = 108; //width (200px) / 2 + left margin (8px)
+        const expectedYCoordinate = 179.875; //height (200px) / 2 + top heading (~79.88px)
+        const rectangleCanvas = new Element("#canvas");
+        await page.goto("http://www.cs.sjsu.edu/~mak/archive/CMPE280/code/canvas/rectangles.html");
+
+        //Act
+        const coordinates = await rectangleCanvas.getCoordinates();
+
+        //Assert
+        expect(coordinates.x).toEqual(expectedXCoordinate);
+        expect(coordinates.y).toEqual(expectedYCoordinate);
+    });
+});

example/tests/interceptor.test.js

@@ -53,11 +53,11 @@ describe("Interceptor", () => {
         await expect(navBar.exists()).resolves.toBeFalsy();
     });
 
-    it("should block request by any url fragment during action", async () => {
+    it("should block request by any url fragment after action", async () => {
         //Arrange
         const navBar = new Element(".navbar");
         const requestUrlFragment = "topmenu";
-        await Interceptor.abortRequestsDuringAction(page.goto(DemoGuruSite), requestUrlFragment);
+        await Interceptor.abortRequestsAfterAction(page.goto(DemoGuruSite), requestUrlFragment);
 
         //Assert
         await expect(navBar.exists()).resolves.toBeFalsy();
@@ -69,19 +69,22 @@ describe("Interceptor", () => {
         await expect(navBar.exists()).resolves.toBeTruthy();
     });
 
-    it("should block any request during action", async () => {
+    it("should block any request after action", async () => {
         //Arrange
         await Helpers.goToUrlAndLoad(DemoOpenCartSite);
+        var alertMessage = null;
         page.on("dialog", dialog => {
             console.log(`Alert was detected: '${dialog.message()}'`);
+            alertMessage = dialog.message();
             dialog.dismiss();
         });
 
         //Act
-        await Interceptor.abortRequestsDuringAction(() => { addToCartButton.click(); });
+        await Interceptor.abortRequestsAfterAction(addToCartButton.click());
 
         //Assert
         await expect(successMessage.isVisible()).resolves.toBeFalsy();
+        expect(alertMessage).toEqual("\nerror\nundefined");
     });
 
     it("should count all requests", async () => {
@@ -95,11 +98,11 @@ describe("Interceptor", () => {
 
     it("should detect specific response after action", async () => {
         //Arrange
-        const responsetUrlFragment = "cart/info";
+        const responseUrlFragment = "cart/info";
         await Helpers.goToUrlAndLoad(DemoOpenCartSite);
 
         //Act
-        var responseAfterAction = await Interceptor.waitForResponseAfterAction(addToCartButton.click(), responsetUrlFragment);
+        var responseAfterAction = await Interceptor.waitForResponseAfterAction(addToCartButton.click(), responseUrlFragment);
 
         //Assert
         await expect(successMessage.isVisible()).resolves.toBeTruthy();

framework/Element.js

@@ -44,22 +44,41 @@ export default class Element {
         }
     }
 
-    async click() {
-        console.log(`Clicking ${this.selector} ...`);
+    async getCoordinates(xOffset = null, yOffset = null) {
         const elementHandle = await this.wait();
-        await elementHandle.click();
+        await elementHandle.focus();
+        const rect = await elementHandle.boundingBox();
+        const x = xOffset !== null ? xOffset : rect.width / 2;
+        const y = yOffset !== null ? yOffset : rect.height / 2;
+        const xCoordinate = rect.x + x;
+        const yCoordinate = rect.y + y;
+        console.log(`Action on page at position x: ${xCoordinate}, y: ${yCoordinate}`);
+        console.log(`Action on element rectangle at position x: ${x}, y: ${y}`);
+        return { x: xCoordinate, y: yCoordinate };
+    }
+
+    async click(xOffset = null, yOffset = null) {
+        console.log(`Clicking ${this.selector} ...`);
+        const coordinates = await this.getCoordinates(xOffset, yOffset);
+        await page.mouse.click(coordinates.x, coordinates.y);
     }
 
-    async doubleClick() {
+    async doubleClick(xOffset = null, yOffset = null) {
         console.log(`Double clicking ${this.selector} ...`);
-        const elementHandle = await this.wait();
-        await elementHandle.click({ clickCount: 2 });
+        const coordinates = await this.getCoordinates(xOffset, yOffset);
+        await page.mouse.click(coordinates.x, coordinates.y, { clickCount: 2 });
     }
 
-    async rightClick() {
+    async rightClick(xOffset = null, yOffset = null) {
         console.log(`Right clicking ${this.selector} ...`);
-        const elementHandle = await this.wait();
-        await elementHandle.click({ button: "right" });
+        const coordinates = await this.getCoordinates(xOffset, yOffset);
+        await page.mouse.click(coordinates.x, coordinates.y, { button: "right" });
+    }
+
+    async hover(xOffset = null, yOffset = null) {
+        console.log(`Hovering mouse on to ${this.selector} ...`);
+        const coordinates = await this.getCoordinates(xOffset, yOffset);
+        await page.mouse.move(coordinates.x, coordinates.y);
     }
 
     async exists() {
@@ -136,12 +155,6 @@ export default class Element {
         return attributeValue;
     }
 
-    async hover() {
-        console.log(`Hovering mouse on to ${this.selector} ...`);
-        const elementHandle = await this.wait();
-        await elementHandle.hover();
-    }
-
     async cover() {
         const elementHandle = await this.wait();
         await elementHandle.evaluate((element) => {

framework/interceptor.js

@@ -22,9 +22,10 @@ class Interceptor {
         return requestStopper;
     }
 
-    async abortRequestsDuringAction(action, requestUrlFragment = "") {
+    async abortRequestsAfterAction(action, requestUrlFragment = "", waitDuration = 500) {
         let requestStopper = await this.abortRequests(requestUrlFragment);
         await action;
+        await page.waitFor(waitDuration);
         page.removeListener("request", requestStopper);
         await page.setRequestInterception(false);
     }