How to perform a click event on a specific location on the canvas using protractor

Question

I am stuck on this issue for a long time and I don't know how to go about it.

I am trying to autoomate a map application which has locations and places on it. When you click on the particular location it will open details about location or place. There is a canvas for the map and the HTML code looks like this:

<canvas width="642" height="741" oncontextmenu="return false;" type="layer" class="tmc" style="user-select: none; left: 0px; top: 0px; position: absolute; width: 642px; height: 741px;"></canvas>

This canvas is basically a map and I want to perform a mouse click event on a specific location which has some data.

My Non click event looks like this

browser.sleep(10000).then(function () {
            var canvas = element(by.xpath("xpath"));

            canvas.click();

        });

But some how I am not able to achieve the desire result. Please help

Also please find attach below the screenshot of the UI.

Possible duplicate of [Clicking on given coordinates of element in protractor](https://stackoverflow.com/questions/28520623/clicking-on-given-coordinates-of-element-in-protractor) — Liam, Jun 28 '19 at 12:22

score 2 · Answer 1 · answered Mar 16 '17 at 09:07

I can empathize with pain of trying to automate canvas based app's and there is nothing present in the HTML and the complete Map is rendered directly from the canvas element in the browser. Even google Maps also behaves same. There is only canvas element in the HTML and the only way to interact with the page is using Protractor's actions API

You can try something like this. This worked for me on gMaps.

describe('Describe something', function() {
    it('check check', function () {
        browser.driver.get('https://www.google.co.in/maps/place/Hyderabad,+Telangana/data=!4m2!3m1!1s0x3bcb99daeaebd2c7:0xae93b78392bafbc2?sa=X&ved=0ahUKEwiMosHAy9rSAhVCt48KHYP5DBMQ8gEIgQEwDQ')
        browser.driver.actions().
        // Move mouse to a particular position
        mouseMove({x: 636, y: 292}).
        // Click or hoverOver on the location
        doubleClick().
        perform();
    });
});

How to perform a click event on a specific location on the canvas using protractor

1 Answers1