testing - TestCafe:如何将页面上的按钮组件设置为单击但未释放的按下状态？

Question

我正在创建一个自动化测试来测试元素(按钮组件)的不同规范或属性，但为了做到这一点，我必须强制按钮进入特定状态，如按下和禁用状态。我已经为焦点和悬停状态完成了它。

1. 如何将页面上的按钮元素/组件设置为单击但未释放按钮的按下状态 - 类似于按下键？由于点击状态和按下状态的规范(文本颜色和背景颜色)不同。

2. 如何将页面上的按钮元素/组件设置为禁用状态。

3. 是否有可能强制元素状态类似于使用浏览器的检查/开发工具？

谢谢

Answer 1

目前，如果没有进一步的 mouseup 操作以及像 DevTools 中那样强制元素状态，您无法提供 mousedown 操作。

但是，如果您想将按钮状态设置为disabled，我认为ClientFunctions机制可以帮助你。见以下代码:

import { Selector, ClientFunction } from 'testcafe';

fixture ``
    .page ``;

const btn = Selector('button');

const setDisabled = ClientFunction(() => {
    btn().setAttribute('disabled', 'disabled');
}, { dependencies: { btn } });

test('test', async t => {
    await setDisabled();
});