Puppeter |等待所有JavaScript执行
我尝试从多个页面截图,这些页面应该是完全加载的(包括延迟加载的图像),以便以后比较 我发现这个方法很有用 使用下面的代码,屏幕截图看起来很好,但存在一些主要问题Puppeter |等待所有JavaScript执行,javascript,node.js,google-chrome,testing,puppeteer,Javascript,Node.js,Google Chrome,Testing,Puppeteer,我尝试从多个页面截图,这些页面应该是完全加载的(包括延迟加载的图像),以便以后比较 我发现这个方法很有用 使用下面的代码,屏幕截图看起来很好,但存在一些主要问题 async function takeScreenshot(browser, viewport, route) { return browser.newPage().then(async (page) => { const fileName = `${viewport.directory}/${getFilename(
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()
(超时)的值较高,有时也不会完全执行页面上所有与前端相关的Java脚本
对于一些旧页面,某些JavaScript可能会更改前端。F.e.在一个遗留案例中ajQuery.matchHeight
最佳情况:在理想情况下,木偶演员会等到所有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);
但仍然不够。我认为不可能对这些遗留页面进行可视化测试。以下内容可能对您有用,您可以使用它等待任何任意函数的计算结果为真。如果您有权访问页面的代码,您可以设置窗口状态并使用它来通知Puppeter继续是安全的,或者仅仅依靠某种其他就绪状态。
注意:此函数是一个轮询函数,可在指定的时间间隔内重新计算
在页面的代码中,只需将窗口的状态设置为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;
是的,可以向目标页面添加代码。这个解决方案的难点在于为这种功能找到合适的位置。有几个脚本通过RequireJS
异步加载和执行。没有单一的终点。对。在这种情况下,你可以创建多个看门狗,对吗?我不知道在这种情况下你可以使用任何“空闲”标志。你能为目标页面添加一个简单的示例代码吗,这可以通过看门狗使用吗?嗯,不确定要添加什么,但我添加了一些。你能添加一些解释吗?到目前为止,我可以看到你改变了滚动行为。我不知道这对我有什么帮助。你有没有找到一个通用的方法来实现这一点?遗憾的是没有。我所做的一切都在编辑中提到了。
var file2Flag=false; // global
...code...
file2Flag=true;
const watchDog = page.waitForFunction('file1Flag && file2Flag');
await watchDog;
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}"`);
});
}