等待 puppeteer 中的过渡结束

我正在尝试使用 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 中做到这一点。任何帮助，将不胜感激。

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