Serenity/JS
How can I show the Mouse Cursor motion in Serenity-JS #2722
-
|
I am working on an end-to-end (E2E) test using WebdriverIO and SerenityJS, but I am unable to see the cursor when performing actions like hovering or clicking |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 1 reply
-
|
Web integration tools like WebdriverIO, Playwright, and Selenium don't take control of your mouse cursor or other input devices. Instead, they communicate with the browser, instructing it to perform a specific mouse or keyboard interaction. Because of that, you don't see the cursor move, even though the interaction is performed. To have something that indicates the cursor's position, you need to make your web integration tool inject some JavaScript into the page to create a DOM element that follows the mouse cursor. This approach was originally proposed in this StackOverflow thread. With Serenity/JS, you can accomplish that using an interaction to import { ExecuteScript, Navigate } from '@serenity-js/web'
import { Task } from '@serenity-js/core'
const showMouseCursor = () =>
Task.where(`#actor shows the mouse cursor`,
ExecuteScript.sync(function createCursorFollower() {
const mouseFollowerId = 'mouse-follower';
if (!document.getElementById(mouseFollowerId)) {
const mouseFollower = document.createElement('img');
mouseFollower.setAttribute('src', [
'data:image/png;base64,',
'iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAQAAACGG/bgAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAA',
'HsYAAB7GAZEt8iwAAAAHdElNRQfgAwgMIwdxU/i7AAABZklEQVQ4y43TsU4UURSH8W+XmYwkS2I0',
'9CRKpKGhsvIJjG9giQmliHFZlkUIGnEF7KTiCagpsYHWhoTQaiUUxLixYZb5KAAZZhbunu7O/PKf',
'e+fcA+/pqwb4DuximEqXhT4iI8dMpBWEsWsuGYdpZFttiLSSgTvhZ1W/SvfO1CvYdV1kPghV68a3',
'0zzUWZH5pBqEui7dnqlFmLoq0gxC1XfGZdoLal2kea8ahLoqKXNAJQBT2yJzwUTVt0bS6ANqy1ga',
'VCEq/oVTtjji4hQVhhnlYBH4WIJV9vlkXLm+10R8oJb79Jl1j9UdazJRGpkrmNkSF9SOz2T71s7M',
'SIfD2lmmfjGSRz3hK8l4w1P+bah/HJLN0sys2JSMZQB+jKo6KSc8vLlLn5ikzF4268Wg2+pPOWW6',
'ONcpr3PrXy9VfS473M/D7H+TLmrqsXtOGctvxvMv2oVNP+Av0uHbzbxyJaywyUjx8TlnPY2YxqkD',
'dAAAAABJRU5ErkJggg==',
].join(''));
mouseFollower.setAttribute('id', mouseFollowerId);
mouseFollower.setAttribute('style', 'position: absolute; z-index: 99999999999; pointer-events: none; left:0; top:0');
document.body.appendChild(mouseFollower);
document.addEventListener('mousemove', function (e) {
mouseFollower.style.left = e.pageX + 'px';
mouseFollower.style.top = e.pageY + 'px';
});
}
})
)
await actor.attemptsTo(
Navigate.to('https://example.org'),
showMouseCursor(),
) |
Beta Was this translation helpful? Give feedback.
-
|
@jan-molak It takes 3 to 5 seconds to complete each test. Do you have any other suggestions for highlighting the selector? I have a method to highlight the selector in the helper file, and I call that method from the WDIO config file |
Beta Was this translation helpful? Give feedback.
-
|
Maybe let's try to approach it another way. What's the reason why you want to see the cursor? Are you trying to perform an interaction like click or hover, but the element you were expediting to react to it doesn't react the way you want? |
Beta Was this translation helpful? Give feedback.
Web integration tools like WebdriverIO, Playwright, and Selenium don't take control of your mouse cursor or other input devices. Instead, they communicate with the browser, instructing it to perform a specific mouse or keyboard interaction. Because of that, you don't see the cursor move, even though the interaction is performed.
To have something that indicates the cursor's position, you need to make your web integration tool inject some JavaScript into the page to create a DOM element that follows the mouse cursor. This approach was originally proposed in this StackOverflow thread.
With Serenity/JS, you can accomplish that using an interaction to
ExecuteScript.sync(...)