How to decrease size of mouse pointer in testcafe

Question

How to decrease the size of the mouse pointer in testcafe.. Below is code which I wrote but not working...

import { ClientFunction } from 'testcafe';
import { Selector } from 'testcafe';

fixture test
.page http://example.com
.beforeEach(async t => {
await disableCursor();
})

const disableCursor = ClientFunction(() => {
var styleElement = document.createElement('style');
styleElement.innerHTML = '.cursor-hammerhead-shadow-ui {width:10px; height:40px }';
document.head.appendChild(styleElement);
});

test('test', async t => {
await t.click(Selector('body > div > p:nth-child(3) > a'))
await t.click(Selector('#header > div.navigation > ul > li:nth-child(1) > a'))
});

Answer 1

To decrease the mouse pointer size, do the following:

1. Specify cursor selector: #root-hammerhead-shadow-ui.root-hammerhead-shadow-ui .cursor-hammerhead-shadow-ui.
2. Use the !important flag in CSS properties.

As a result, the code below replaces the default cursor with a red square:

const resizeCursor = ClientFunction(() => {
    var styleElement = document.createElement('style');
    styleElement.innerHTML = '#root-hammerhead-shadow-ui.root-hammerhead-shadow-ui .cursor-hammerhead-shadow-ui { background: red !important; width:40px !important; height:40px !important }';
    document.head.appendChild(styleElement);
});

If you want to change the cursor to your own image, try this CSS property: background-image.

Note, since in a general case, it is hard to predict what unexpected results adding this CSS may produce, I suggest that you carefully check this prior to integrating this solution into your project.

See also: ClientFunction