时间戳

首页 > 解决方案 > TestCafe：如何将页面上的按钮组件设置为单击但未释放的按下状态？

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

问题描述

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

  1. 如何将页面上的按钮元素/组件设置为单击但未释放按钮的按下状态 - 类似于按下键？询问，因为单击状态和按下状态的规格（文本颜色和背景颜色）不同。

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

  3. 甚至可以使用浏览器强制类似于检查/开发工具的元素状态吗？

谢谢

标签： testingautomationautomated-testse2e-testingtestcafe

解决方案

目前，您无法在mousedown没有进一步mouseup操作的情况下提供操作，也无法像在 DevTools 中那样强制元素状态。

但是，如果您想将按钮状态设置为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();
});

推荐阅读