如何在测试咖啡中选择带有伪元素的div ::after

Question

我需要单击带有伪元素::after的div

。

Div 本身是不可见的，但是将鼠标悬停在另一个元素上后，我需要单击的div 末尾的div::after附加图标。

如何为div::after创建选择器？

我可以使用jQuery在控制台中执行单击，但我不能在testcafe中执行此操作，因为我得到

错误："actionElementIsInvisibleError"。

使用选择器.more-options::after不起作用

Answer 1

您必须通过"修补"目标div 的样式来模拟自己的悬停效果。换句话说，您必须通过调用将更改div 样式的客户端函数来使其可见。你可以在这里找到一个代码示例：tc-client-function-set-style-attribute

Answer 2

我在复选框方面遇到了类似的挑战

我做的一件事是在单击元素之前设置元素的可见性。

前任：

const consent = ClientFunction(() => {
  document.getElementById("agb").style.visibility = "visible";
  document.getElementById("datasecurity").style.visibility = "visible";
});

然后调用函数，然后单击复选框。