How to insert DOM elment when the page reloads due to clicking?

[rydergaming]

Hi everyone!

I'm trying to show the mouse cursor throughout an E2E test. I've managed to get to the mouse cursor to work perfectly while using the cy.visit command, as it's overwritten with this piece of code (window is the returned value from cy.visit()):

const cursorElement = window.document.createElement('div');

  const onMouseMove = (event) => {
    cursorElement.style.left = `${event.pageX}px`;
    cursorElement.style.top = `${event.pageY}px`;
  };

  const onClick = () => {
    cursorElement.classList.remove('cypress__cursor--click');
    void cursorElement.offsetWidth; // Prevent browser from batching remove and add class commands -> force repaint so css animation runs again
    cursorElement.classList.add('cypress__cursor--click');

  };

  window.addEventListener('mousemove', onMouseMove);
  window.addEventListener('click', onClick);

  cursorElement.setAttribute('class', 'cypress__cursor');

  Cypress.$('body').append(cursorElement);
  Cypress.$('body').append(`<style>${cursorCss}</style>`);

  return Cypress.Promise.resolve(window);

Unfortunately this only works until the test navigates to another URL and that triggers to DOM to reload and this removes the appended cursorElement and the event listeners.

Is there any Cypress commands I can overwrite to essentially trigger this piece of code again? I've been searching the repository for hours now, but to no avail.

TIA,
Steve

[istvanszilagyiintland]

I've found the solution for this problem.

I added the mouse appending snipped to the window:load event and now it's working fine while also changing URLs:

Cypress.on('window:load', (win) => {
  if (video) addMouse(win);
});