discover coordinates for a cypress manual coordinate click

generateMouseEventHandler.js

// paste this into a file like location-map-component.js:
if (typeof window !== 'undefined') {
	window.addEventListener('mousemove', (e) => {
		console.log(
			'x', e.x,
			'y', e.y,
			'ofsX', e.offsetX,
			'ofsY', e.offsetY,
			'cursor:', document.getElementsByClassName('MicrosoftMap')[0].style.cursor || '""',
			{ el: e.target }
		);
	});
}

// you can then mouseover anything on the page and see the target element and the coordinates of that event
// until the selected map pin has changed, offsets will be off by 100px.
// The top left corner of the map will have a offsetX/Y of about 100px/100px (
// once a selected map pin has changed once.
// You can do this by 1. actually clicking a new pin on the map, or
// 2. by firing SET_LOCATION_ID with a new storeId (which is not already selected)

// For example, you can run this in the console to fix this:
// window.actionLog.dispatch(
//   {
//     type: "SET_LOCATION_ID",
//     storeId: 329,
//   },
//   "console"
// );
// Setting to the storeId that is already selected will not fix the offsets.

// If offsets are not fixed, when running cypress in headless mode, the bing map canvas tag will be generated with
// different inline css, and different width+height attributes
// In a browser chrome window with 1000px width canvas tag will look like this:
// (height does not appear to matter, as long as it's higher than 660px)
// <canvas
//   id="labelCanvasId"
//   class="labelCanvas"
//   width="2336" height="1668"
//   style="
//     outline: none;
//     position: absolute;
//     z-index: 20000;
//     width: 1168px;
//     height: 834px;
//     top: -100px;
//     left: -100px;
//     transform: translate(0px, 0px);
//     display: block;"
// ></canvas>

// When running cypress in headless mode, I'd get errors like this:
// `cy.trigger()` failed because the center of this element is hidden from view:
// <canvas
//   id="labelCanvasId"
//   class="labelCanvas"
//   width="1568" height="1234"
//   style="
//     outline: none;
//     position: absolute;
//     z-index: 20000;
//     width: 1568px;
//     height: 1234px;
//     top: -300px;
//     left: -300px;
//     transform: translate(0px, 0px);
//     display: block;
//   "></canvas>`

// There are 3 canvas tags created by bing maps.
// Initially, this (3rd) #labelCanvasId will be on top, receiving mouse events.
// Once the selected map pin has changed, this 2nd canvas tag will be on top, covering up the 3rd one
//  canvas:nth-of-type(2)
// (It will then remain on top, receiving mouse events)

// However, firing SET_LOCATION_ID with a different store id does change the currently selected store id

// paste this in the console
// hover over the thing you want to click on, and observe the ofX+ofY properties
// along with the `el` property (event target)
// then in your cypress test:
// cy.get(/* the event target */).click(/* event.offsetX, event.offsetY */)
// NOTE: offsetX/Y are OFF by 100px until the selected may pin has changed once.
// You can see this by hovering around the top left corner, before and after running this:

window.actionLog.dispatch(
  {
    type: "SET_LOCATION_ID",
    storeId: 329,
  },
  "console"
);

if (window.innerWidth !== 1000) {
	throw new Error('window width is not 1000')
}
// This is a utility you paste this in the console to determine some click coordinates
// It'll continuously log {x: 1, y: 2, offsetX: 3, offsetY: 4, el: canvasSelector
window.addEventListener('mousemove', (e) => {
	console.log({ x: e.x, y: e.y, offsetX: e.offsetX, offsetY: e.offsetY, el: e.target });
	// hover over the thing you want to click on, and observe the offsetX+offsetY properties
	// along with the `el` property (event target)
	// then in your cypress test:
	// cy.get(/* the event target */).click(/* event.offsetX, event.offsetY */)
	// NOTE: offsetX/Y are OFF by 100px until the selected may pin has changed once.
	// You can see this by hovering around the top left corner, before and after running this:
	/*
	window.actionLog.dispatch(
		{
			type: "SET_LOCATION_ID",
			storeId: 329,
		},
		"console"
	);
	*/
	if (window.innerWidth !== 1000) {
		throw new Error('window width is not 1000')
	}
});