puppeteer element.click() 不工作且不抛出错误

Question

我有一种情况，表单上的一个按钮被动画到 View 中，如果 element.click() 在动画进行时发生，它就不起作用。

element.click() 不会抛出错误，不会返回失败状态(它返回未定义)，它只是默默地不起作用。

我已尝试确保被单击的元素未被禁用，并且显示(可见)，但即使这两个测试都成功，单击也会失败。

如果我在点击之前等待 0.4 秒，它会起作用，因为动画已经完成。

如果我可以检测到点击何时起作用，并且如果不能自动重试，我不想增加延迟(这是不可靠的，坦率地说是一个错误)。

是否有一种通用的方法来检测 click() 是否已实际执行，以便我可以使用重试循环直到它执行？

Answer 1

我已经确定发生了什么，为什么我没有收到错误，以及如何解决这个问题。

主要问题是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();

问题在于，因为 View (div)正在为元素的 boundingBox() 设置动画，所以在请求框位置和完成 click() 之间，元素已移动或不可点击。

不会抛出错误( promise 被拒绝)，因为它只是在视口(viewport)中的一个点上单击鼠标，并且没有链接到任何元素。鼠标事件被发送，只是没有任何响应。

一种解决方法是添加足够的延迟以允许动画完成。另一个是在测试期间禁用动画。

我的解决方案是等待元素的位置稳定在其目标位置，即我旋转查询 boundingBox() 并等待 x,y 报告先前确定的元素位置。

就我而言，这就像添加 at 10,10 一样简单在点击之前到我的测试脚本，或者特别是

test-id "form1.button3" at 10,10 click

在行动中，它的工作原理如下，在这种情况下， View 是从左边动画回来的。

00.571 [selector.test,61] 在 8,410
test-id "main.add"信息标签按钮显示在 -84,410 大小 116,33 启用 未选中 检查 "添加"
test-id "main.add"信息标签按钮显示在 -11,410 大小 116,33 启用 未选中 检查 "添加"
test-id "main.add"信息标签按钮显示在 8,410 大小 116,33 启用 未选中 检查 "添加"
00.947 [selector.test,61] 点击

它不适用于不断移动的元素或被其他东西覆盖的元素。对于这些情况，请尝试 page.evaluate(el => el.click(), element) .