木偶师 |等待所有JavaScript被执行

Question

我尝试了多个页面的截图，应该是满载（包括懒加载的图片），方便以后对比。

我找到了 lazyimages_without_scroll_events.js example 很有帮助。

使用以下代码，屏幕截图看起来不错，但存在一些重大问题。

async function takeScreenshot(browser, viewport, route) {
  return browser.newPage().then(async (page) => {
    const fileName = `${viewport.directory}/${getFilename(route)}`;

    await page.setViewport({
      width: viewport.width,
      height: 500,
    });
    await page.goto(
        `${config.server.master}${route}.html`,
        {
          waitUntil: 'networkidle0',
        }
    );
    await page.evaluate(() => {
      /* global document,requestAnimationFrame */
      let lastScrollTop = document.scrollingElement.scrollTop;

      // Scroll to bottom of page until we can't scroll anymore.
      const scroll = () => {
        document.scrollingElement.scrollTop += 100;
        if (document.scrollingElement.scrollTop !== lastScrollTop) {
          lastScrollTop = document.scrollingElement.scrollTop;
          requestAnimationFrame(scroll);
        }
      };
      scroll();
    });
    await page.waitFor(5000);
    await page.screenshot({
      path: `screenshots/master/${fileName}.png`,
      fullPage: true,
    });

    await page.close();
    console.log(`Viewport "${viewport.name}", Route "${route}"`);
  });
}

问题：即使 page.waitFor()（超时）的值更高，有时页面上的所有前端相关 JavaScript 也未完全显示已执行。

对于某些 JavaScript 可以更改前端的旧页面。 F.e。在一个遗留案例中 jQuery.matchHeight.

最佳情况：在理想的世界中，Puppeteer 会等到所有 JavaScript 都被评估和执行。 这样的事情可能吗？

编辑
在 cody-g.

的帮助下，我可以稍微改进脚本

function jQueryMatchHeightIsProcessed() {
  return Array.from($('.match-height')).every((element) => {
    return element.style.height !== '';
  });
}

// Within takeScreenshot() after page.waitFor()
await page.waitForFunction(jQueryMatchHeightIsProcessed, {timeout: 0});

...但它远非完美。看来我必须为不同的前端脚本找到类似的解决方案，才能真正考虑目标页面上发生的一切。

在我的例子中，jQuery.matchHeight 的主要问题是它在不同的运行中处理不同的高度。可能是由图像延迟加载引起的。看来要等到可以用 Flexbox 代替了。 (^_^)°

其他需要解决的问题：

禁用动画：

await page.addStyleTag({
  content: `
    * {
      transition: none !important;
      animation: none !important;
    }
  `,
});

处理幻灯片：

function handleSwiperSlideshows() {
  Array.from($('.swiper-container')).forEach((element) => {
    if (typeof element.swiper !== 'undefined') {
      if (element.swiper.autoplaying) {
        element.swiper.stopAutoplay();
        element.swiper.slideTo(0);
      }
    }
  });
}

// Within takeScreenshot() after page.waitFor()
await page.evaluate(handleSwiperSlideshows);

但还是不够。我认为无法对这些遗留页面进行可视化测试。

Answer 1

下面的waitForFunction可能对你有用，你可以用它来等待任意函数的计算结果为真。如果您有权访问该页面的代码，您可以设置 window 状态并使用它来通知 puppeteer 可以安全继续，或者仅依赖于某种其他就绪状态。 注意：此函数是一个轮询函数，并在可以指定的某个时间间隔重新评估。

const watchDog = page.waitForFunction('<your function to evaluate to true>');

例如，

const watchDog = page.waitForFunction('window.status === "ready"');
await watchDog;

在您的页面代码中，您只需将 window.status 设置为 ready

要在多个异步文件中使用多个看门狗，您可以这样做

index.js

...import/require file1.js;
...import/require file2.js;
...code...

file1.js:

var file1Flag=false; // global
...code...
file1Flag=true;

file2.js:

var file2Flag=false; // global
...code...
file2Flag=true;

main.js:

const watchDog = page.waitForFunction('file1Flag && file2Flag');
await watchDog;

Answer 2

async function takeScreenshot(browser, viewport, route) {
  return browser.newPage().then(async (page) => {
    const fileName = `${viewport.directory}/${getFilename(route)}`;

    await page.setViewport({
      width: viewport.width,
      height: 500,
    });
    await page.goto(
        `${config.server.master}${route}.html`,
        {
          waitUntil: 'networkidle0',
        }
    );
    await page.evaluate(() => {
      scroll(0, 99999)
    });
    await page.waitFor(5000);
    await page.screenshot({
      path: `screenshots/master/${fileName}.png`,
      fullPage: true,
    });

    await page.close();
    console.log(`Viewport "${viewport.name}", Route "${route}"`);
  });
}

木偶师 |等待所有JavaScript被执行

Puppeteer | Wait for all JavaScript is executed

javascript

testing

google-chrome

node.js

puppeteer