等待过渡以 puppeteer 结束

Question

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

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

我想我需要等待这个transitionend事件，但我不确定如何在 Puppeteer 中做到这一点。任何帮助，将不胜感激。

Answer 1

在 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");

Answer 2

您可以使用page.evaluate()to 和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();
});