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',
}
}}
/>
This is with the latest versions of react-joyride, cypress and selenium.