Spotlight positioned incorrectly, but only when using an automated testing tool (tried both cypress and selenium)

[opike]

I'm encountering an issue where for certain steps, the spotlight will be positioned correctly when I run it manually as a user, but then when I try to run it in an automated end to end test, the positioning is off. This same issue occurs with either cypress or selenium. I've added wait/pause calls in both tools to ensure that it wasn't an issue of speed. Note that it is only the spotlight that is off in these instances, the tooltip is positioned correctly.

Below is a screencast of the behavior in cypress. There are some other issues with lags in spotlight positioning in the intermediate steps that don't occur when run manually but eventually the spotlight is placed correctly. However with the last spotlight, it remains in the incorrect position. This creates a functional issue for the test since only the spotlight area can receive a mouse click. As a workaround I'm think of expanding the padding of the spotlight (using the spotlightPadding step config value) for only when running in the automated tests, but my preference of course is to try to avoid automated test specific code in the application code.
https://d.pr/v/L6dlRh

Here's a screencast of the behavior when run manually:
https://d.pr/v/mQFQ3d

Here's how I have the step in question configured in react-joyride:

{
 target: '.hip-modal-study-settings .hip-version-1',
 content: 'Click on Version 1',
 disableBeacon: true,
 disableScrolling: true,
 spotlightClicks: true,
},

Here's how the joyride component is being called:

 <Joyride
        debug={true}
        continuous={true}
        stepIndex={stepIndex}
        steps={startTour && tourId !== null ? getTourList()[tourId].steps : []}
        showProgress={false}
        disableOverlayClose={true}
        disableOverlay={false}
        callback={handleJoyrideCallback}
        scrollToFirstStep
        run={startTour}
        styles={{
          options: {
            zIndex: 20000,
          },
          tooltip: {
            width: '250px'
          },
          spotlight: {
            transition: 'opacity 0.2s',
          }
        }}

      />

[gilbarbara]

Hey @opike
I can't know what's happening with the e2e tests from just the video.
It seems like the page layout changes after it moves to the next step, or maybe it is a race condition.
Since you are using the stepIndex and a callback, you could trigger a resize event after updating the step and/or restarting the tour.
Try adding this:window.dispatchEvent(new Event("resize"));.