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

Question

我有一种情况，表单上的按钮以动画形式显示在视图中，如果 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();

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

不会引发错误（承诺被拒绝），因为它只是在视口中的某个点上单击鼠标，并且没有链接到任何元素。鼠标事件被发送，只是没有任何响应。

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

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

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

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

实际上，它的工作原理如下，在这种情况下，视图是从左侧动画回来的。

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)。

Answer 2

受 Andrea 的回答启发的具有超时功能的通用点击。一旦元素可点击，这个就会返回，因此不会减慢测试速度。

click: async function (page, selector, timeout = 30000) {

    await page.waitForSelector(selector, { visible: true, timeout })

    let error;
    while (timeout > 0) {
        try {
            await page.click(selector);
            return;
        } catch (e) {
            await page.waitFor(100);
            timeout -= 100;
            error = e;
        }
    }
    throw error;
}

Answer 3

我刚刚遇到了一个非常相似的问题：我曾经有过 Puppeteer 脚本，但现在突然单击停止工作。罪魁祸首原来是缩放级别。一旦我将缩放切换到 100%，它就会再次开始工作。显然，Puppeteer 不会将点击坐标调整为缩放级别。

Answer 4

我使用辅助函数来处理点击

    click: async function (page, selector) {

        //selector must to exists
        await page.waitForSelector(selector, {visible: true, timeout: 30000})
        //give time to extra rendering time
        await page.waitFor(500)

        try {
            await page.click(selector)
        } catch (error) {
          console.log("error clicking " + selector + " : " + error ;
        }
    }

使用 page.waitFor(500) 是在理论世界中非常糟糕的做法，但它在具有复杂接口的实践中消除了很多误报。

我宁愿等待 500 毫秒以上而不是获得误报。

Answer 5

page.click() 返回一个 Promise，确保按原样处理它，但也请注意，如果您没有将它作为 xpath 引用，您可能会遇到问题。这就是我必须做的才能让它工作。我尝试过使用 querySelectors 并以这种方式与对象交互，但遇到了问题。

page.evaluate(()=>{
await Promise.all([
    page.click("a[id=tab-default-2__item]"),
    //The page.waitFor is set to 15000 for my personal use. 
    //Feel free to play around with this.
    page.waitFor(15000)
]);
});    

我希望这会有所帮助。

Answer 6

对我来说，下面的代码成功了

const element = await page.$('[name="submit"]')
await this.page.evaluate(ele => ele.click(), element);