- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我尝试从多个页面截取屏幕截图,这些页面应该已完全加载(包括延迟加载的图像)以供以后比较。
我找到了 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);
但还是不够。我认为不可能对这些遗留页面进行可视化测试。
最佳答案
以下waitForFunction可能对你有用,你可以用它来等待任意函数的计算结果为真。如果您有权访问页面的代码,则可以设置窗口状态并使用它来通知 puppeteer 可以安全地继续,或者只是依赖某种其他就绪状态。注意:此函数是一个轮询函数,并在可以指定的某个时间间隔重新评估。
const watchDog = page.waitForFunction('<your function to evaluate to true>');
例如,
const watchDog = page.waitForFunction('window.status === "ready"');
await watchDog;
在您的页面代码中,您只需将 window.status
设置为 ready
要在多个异步文件中使用多个看门狗,您可以这样做
索引.js
...import/require file1.js;
...import/require file2.js;
...code...
文件1.js:
var file1Flag=false; // global
...code...
file1Flag=true;
文件2.js:
var file2Flag=false; // global
...code...
file2Flag=true;
主要.js:
const watchDog = page.waitForFunction('file1Flag && file2Flag');
await watchDog;
关于javascript - puppeteer 师 |等待所有 JavaScript 执行完毕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53483578/
什么是“导航”waitForNavigation等待? 网站导航?浏览器刷新图标“导航”以完成旋转? 或者这只是一个措辞笨拙的方法,应该命名为waitForBrowserToLoad ? 但是,当我使
我说的网址是https://www.vudu.com/content/movies/movieslist .我正在尝试滚动浏览电影所在的部分。当我使用以下代码时,它不起作用。 await page.e
我终于想通了如何使用 Node.js。安装了所有库/扩展。所以 puppeteer 正在工作,但就像以前使用 Xmlhttp 一样......它只获取页面的模板/正文,没有需要的信息。在浏览器(Web
我想划分两个 ull 变量并获得最准确的结果。最好的方法是什么? 即5000034/5000000 = 1.0000068 最佳答案 如果你想要“最准确的精度”——你应该避免浮点运算。 你可能想使用一
好的,我已经编程了大约一个星期了,我是从 C++ 开始的。我正在编写一个程序,它是一种算术训练器,你输入你想要的方程式的数量,你输入你对随机数生成器的限制,你指定你想要什么样的方程式(/* - +),
由于浪费了 2 周的时间,我尝试在 AWS Lambda 上安装 Puppeteer 但没有成功。 我试过: https://github.com/sambaiz/puppeteer-lambda-s
你好!在 python 中考虑以下内容: import math num = # Any float... div = # Any float... result_1 = math.floor(num
使用 puppeteer 时,我曾经通过使用以下代码行来获取新选项卡: const browser = await puppeteer.launch() const [page] = await br
如何使用 Puppeteer 检查 HTML 元素是否在视口(viewport)(可见区域)内可见?例如,如果我必须滚动才能看到一个按钮,那么它是不可见的。 page.waitForSelector(
如何将 headless 从假变为真? 如何隐藏浏览器? const browser = await puppeteer.launch({headless: false}) const page =
我无法使用 puppeteer 播放 Youtube 视频。 chromium 好像不支持视频播放。我该怎么办? 这是我的代码: const puppeteer = require('/root/no
需要一个 puppet 特工联系一些不同 puppet 师。 原因:不同的组创建了不同且独立的 list 集。 可能的组及其任务 应用程序供应商:应用程序的配置 安全性:强化 运营:路由表、监控工具
我的目标是获取 .textContent来自不同标签,每个都位于单独的 中. 我认为问题在于 table变量,因为我没有为 child 检查正确的变量。目前,data变量只获取第一个 , 所以 p
我尝试从多个页面截取屏幕截图,这些页面应该已完全加载(包括延迟加载的图像)以供以后比较。 我找到了 lazyimages_without_scroll_events.js example这很有帮助。
时不时地,一个页面会很挑剔,并且会出现这样的错误: UnhandledPromiseRejectionWarning: Error: Protocol error (Runtime.callFunct
我在 Linux 环境中,我想了解如何指定它应该用于 Chromium 的路径。目前,这是我遇到的错误: Chromium revision is not downloaded. Run "npm i
如何找到一个不起眼的单选按钮元素并在 puppeteer 中单击它? 我看过很多文章说“只需使用evaluate(),然后单击它”或类似的内容,但这在我的场景中不起作用。 这是我所拥有的: page.
问题来源:我无法按原样使用 Javascript,因为 Firebase Functions Node.Js 版本尚不支持 Async/Await。所以我把它放在 Typescript 中,现在正在尝
使用 Reactjs 开发的网站,在后端与以太坊智能合约进行交互。 此智能合约需要一个 chrome 扩展程序(metamask)进行交易。 现在,在使用 puppeteer 时,它在 chrome
var snd2 = new Audio("data:audio/wav;base64,//uQRAAAAWMSLwUIYAAsYkXgoQwAEaYLWfkWgAI0wWs/ItAAAGDgYtAg
我是一名优秀的程序员,十分优秀!