如何减小testcafe中鼠标指针的大小

Question

如何在 testcafe 中减小鼠标指针的大小.. 下面是我写的代码但不起作用...

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

要减小鼠标指针大小，请执行以下操作：

指定光标选择器：#root-hammerhead-shadow-ui.root-hammerhead-shadow-ui .cursor-hammerhead-shadow-ui。
在 CSS 属性中使用 !important 标志。

因此，下面的代码将默认光标替换为红色方块：

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);
});

如果你想将光标更改为你自己的图像，试试这个 CSS 属性: background-image.

请注意，由于在一般情况下，很难预测添加此 CSS 可能会产生什么意外结果，我建议您在将此解决方案集成到您的项目之前仔细检查。

另请参阅：ClientFunction

如何减小testcafe中鼠标指针的大小

How to decrease size of mouse pointer in testcafe

automated-tests

e2e-testing

web-testing

testcafe