问题描述
我遇到这样一种情况：窗体上的一个按钮以动画形式显示在视图中，如果在动画进行过程中发生了element.ick()，则该按钮将无法工作。
element.ick()不引发错误，也不返回失败状态(返回未定义)，只是静默不起作用。
我已尝试确保所单击的元素未被禁用，并且显示(可见)，但即使这两个测试都成功，单击也失败。
如果我等待0.4秒才单击，它会起作用，因为动画已经完成。
我不想添加延迟(这是不可靠的，坦率地说，这是一个障碍)，如果我可以检测到单击何时起作用，如果没有自动重试，则自动重试。
有没有一种通用的方法来检测Click()是否已被实际操作，以便我可以使用重试循环，直到它被操作为止？
推荐答案
我已确定发生了什么，为什么没有收到错误，以及如何解决此问题。
主要问题是element.click()的工作方式。使用DEBUG="puppeteer:*"，我能够看到内部发生了什么。element.click()实际做的是：-
const box = element.boundingBox();
const x = box.x + (box.width/2);
const y = box.y + (box.height/2);
page.mouse.move(x,y);
page.mouse.down();
sleep(delay);
page.mouse.up();
问题在于，因为视图(Div)是元素的边界框()的动画，所以在请求框位置和完成单击()这段时间内，元素已移动或不可单击。
不会抛出错误(承诺被拒绝)，因为它只是在视区中的一个点上单击鼠标，而不是链接到任何元素。发送鼠标事件，但没有任何响应。一种解决方法是增加足够的延迟以允许动画完成。另一种是在测试期间禁用动画。
我的解决方案是等待元素的位置稳定在它的目标位置，也就是说，我在查询bindingBox()时旋转，并等待x，y报告之前确定的元素位置。
在我的例子中，这就像在单击之前添加at 10,10到我的测试脚本一样简单，或者特别是
test-id "form1.button3" at 10,10 click
在操作中，它的工作方式如下所示，在本例中，视图是从左侧重新设置动画的。
00.571 [selector.test,61] at 8,410 test-id "main.add" info tag button displayed at -84,410 size 116,33 enabled not selected check "Add" test-id "main.add" info tag button displayed at -11,410 size 116,33 enabled not selected check "Add" test-id "main.add" info tag button displayed at 8,410 size 116,33 enabled not selected check "Add" 00.947 [selector.test,61] click
它不适用于不断移动的元素或被其他元素覆盖的元素。对于这些情况，请尝试page.evaluate(el => el.click(), element)。