TestCafe - 在某些 HTML 元素上时如何确定鼠标光标（指针）的形状

Question

我正在尝试围绕拖放编写 TestCafe 功能测试。我已经可以进行拖放操作，并且正在尝试通过尝试将元素拖到不允许拖放的屏幕的一部分来测试源/目标功能。当鼠标悬停期间不允许放置时，鼠标光标形状将变为“禁止进入”符号。我在 TestCafe 文档中看不到可以查询鼠标光标图标形状的任何地方。

我在 TestCafe 中看不到任何关于此的文档。
TestCafe 支持这个吗？

谢谢 标记

Answer 1

TestCafe selectors在测试页面上指定一个元素，返回一个带有一组属性和方法的对象给服务器。 在TestCafe docs 中阅读有关 Selector 属性的更多信息。

您可以使用getStyleProperty 方法来验证元素的光标样式，例如。 g.

.expect(Selector('div').getStyleProperty('cursor')).eql('no-drop');

在任何其他情况下，当您需要获取有关 DOM 元素的特定信息时，可以使用 ClientFunction 和 Selector 的组合。这种情况可能如下所示：

const el = Selector('#editable-div');

    const getCursorStyle = ClientFunction(() => {
        return window.getComputedStyle(el()).cursor;
    }, {dependencies: {el}})

    await t
        .drag(Selector('#create'), -14, -255, {
            offsetX: 38,
            offsetY: 11
        })
        .expect(getCursorStyle()).eql("no-drop");

您甚至可以使用更高级的方法 - implementing addCustomDOMProperties，尤其是在您需要多次检查添加的属性时。