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会产生什么意外结果，因此建议您在将此解决方案集成到项目中之前仔细检查一下。

如何在TestCafe中减小鼠标指针的大小

1 个答案: