Question

我正在尝试使用Puppeteer测试网站。不幸的是，我在单击工具栏中的元素时遇到了麻烦。工具栏使用CSS过渡来优雅地滑入页面。我的代码失败，因为我在页面仍处于动画状态时单击元素将出现的位置。我使用超时作为解决方法，但是必须有一个更优雅的解决方案。这是一个示例：

unchecked generic array creation for varargs parameter

我认为我需要等待await page.click("#showMeetings"); //Toolbar slides in await page.waitFor(3000); //Can I do this without a timeout? await page.click("#mtgfind"); //Click button in toolbar事件，但是我不确定如何在Puppeteer中执行此操作。任何帮助将不胜感激。

Answer 1

您可以使用page.evaluate()和transitionend事件来实现您的目标：

await page.evaluate(() => {
  const show_meetings = document.getElementById('showMeetings');
  const mtg_find = document.getElementById('mtgfind');

  mtg_find.addEventListener('transitionend', event => {
    mtg_find.click();
  }, false);

  show_meetings.click();
});

Answer 2

我想出了一个相当愚蠢的解决方案。我查看了转换应该花多长时间（在本例中为0.2秒），并修改了waitFor语句以等待那么长时间。最终代码：

await page.click("#showMeetings"); //Toolbar slides in
await page.waitFor(200);
await page.click("#mtgfind"); //Click button in toolbar

如果时间是可变的，这将不起作用，但是网站会在各处重复使用相同的过渡，因此对于我的用例来说很好。

Answer 3

对于Grant解决方案，您不应忘记删除事件侦听器并等待它。您可以尝试此解决方案，它对我有用。我有类似的问题。

async waitForTransitionEnd(element) {
  await page.evaluate((element) => {
    return new Promise((resolve) => {
      const transition = document.querySelector(element);
      const onEnd = function () {
        transition.removeEventListener('transitionend', onEnd);
        resolve();
      };
      transition.addEventListener('transitionend', onEnd);
    });
  }, element);
}

并命名为：

await page.click('#showMeetings');
await waitForTransitionEnd('#elementWithTransition');
await page.click("#mtgfind");

等待过渡以木偶结尾

3 个答案: