I'm currently facing an issue where I am attempting to click on the center of a map located in the second column of the webpage, which has an offset. However, I am encountering a problem where the cursor always points to the center of the page instead:
https://i.sstatic.net/jUPb8.png
To achieve this, I have tried to calculate the location by adding half of the width and height. Below is the code snippet I have been using:
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 the coordinates 943 and 386 should be correct. It's puzzling why it's not functioning as intended.
I also attempted to disregard the offset, but still encountered issues:
await browser
.actions()
.mouseMove(map, { x: halfWidth, y: halfHeight })
.click()
.perform();
Additionally, I experimented with using map.getWebElement() and changing the selector, but unfortunately none of these fixes worked for me.