How to click on the center of a leaflet map using protractor

Question

I'm trying to click on the center of a map that is on the second column in the page (so it has an offset) but it doesn't work, it seems that the cursor always point to the center of the page :

I'm trying to additionnate the location with the half of the width/height, Here is the code :

    it('should select center point', async () => {
        const map = pageObject.getMap(); // $('.map-container')
        const size = await map.getSize();
        const location = await map.getLocation();
        const halfWidth = parseInt(await map.getAttribute('clientWidth'), 10) / 2;
        const halfHeight = parseInt(await map.getAttribute('clientHeight'), 10) / 2;
        const x = location.x + halfWidth;
        const y = location.y + halfHeight;
        await browser
          .actions()
          .mouseMove(map, { x, y })
          .click()
          .perform();
        console.log('size', size); { height: 482, width: 840 }
        console.log('location', location); { x: 523, y:145 }
        console.log('halfWidth', halfWidth); // 420
        console.log('halfHeight', halfHeight); // 241
        console.log('x', x); // 943
        console.log('y', y); // 386
        debugger;
      });

The window size is 1380*668 so 943 and 386 seems to be correct, i don't know why it doesn't work.

I've tried to don't take care of the offset too and it doesn't work :

    await browser
              .actions()
              .mouseMove(map, { x: halfWidth, y: halfHeight })
              .click()
              .perform();

I've tried to use map.getWebElement(), to change the selector but nothing work

Julien METRAL Julien METRAL · Accepted Answer · 2019-11-21T10:43:38

So i've found a solution, by default when i click on the map element, protractor click on the center:

await pageObject.getMap().click();

To click on a specific address, I directly type an address on the geocoder bar and then click on the map to get the center but i do not found a solution with moveMove(element, { x, y })

How to click on the center of a leaflet map using protractor

1 Answers