北京网站制作报价,h5网站建设公司,如何写网站优化方案,深圳网站制作公司兴田德润放心Puppeteer实现上下滚动、打开新Tab、用户数据保存#xff08;三#xff09; Puppeteer实现上下滚动、打开新Tab、用户数据保存#xff08;三#xff09;一、实现上下滚动二、打开新Tab三、用户数据保存四、效果演示 一、实现上下滚动
在自动化测试中#xff0c;我们需要能…Puppeteer实现上下滚动、打开新Tab、用户数据保存三 Puppeteer实现上下滚动、打开新Tab、用户数据保存三一、实现上下滚动二、打开新Tab三、用户数据保存四、效果演示 一、实现上下滚动
在自动化测试中我们需要能够通过程序控制进行上下滚动屏幕从而能够查看页面中的更多内容或者进行加载更多数据进行分页操作。但是 Puppeteer 并没有提供专门的滚动方法这里需要我们自己去实现具体细节。
查看文档我们能够看到命令 page.evaluate其作用是执行一段 js 代码有了这个命令我们就能够配合系统中的 window.scrollBy(0, distance);去实现向下滚动页面内容了。通过控制参数的数值然后循环调用就能够实现这种向下滚动向上滚动的效果了。 async function autoScroll(page, distance 100, toScrollHeight 120000) {await page.evaluate(async ({ distance, toScrollHeight }) {await new Promise((resolve, reject) {var totalHeight 0;var timer setInterval(([distanceTime, toScrollHeightTime]) {var scrollHeight document.body.scrollHeight;window.scrollBy(0, distanceTime);totalHeight distanceTime;if (totalHeight scrollHeight || totalHeight toScrollHeightTime) {clearInterval(timer);resolve();}}, 100, [distance, toScrollHeight]);});}, { distance, toScrollHeight });}autoScroll 方法就是一个具体实现通过 setInterval 定时器进行循环执行 window.scrollBy(0, 100);这个方法。
代码中需要传递三个参数 page、distance、toScrollHeight
page: 表示Puppeteer控制的页面distance表示每一次滚动滚动的距离toScrollHeight表示最大滚动到多少距离
在程序中调用 await autoScroll(newPage, 80, 2200)这就实现了向上滚动。上面的方法调用表示每一次滚动 80 的距离滚动的最大值是 2200 。这个就比较自由了如果在自己的项目中使用就可以随意更改这些参数以符合自己的业务需要。
❓ 对于向下滚动该如何实现呢其实也是很简单。
由于 window.scrollBy(0, distance); 中第二个参数 distance 可以为负数当为负数时则会产生向下的滚动那我们也就很容易实现向下滚动。
首先我们可以从 document.body 中获取到页面已经滚动的总高度然后让已经滚动的总高度逐渐变为零则可以实现向下滚动的效果。 let scrollHeight document.body.scrollHeight;var totalHeight scrollHeight;下面来看看完整的向下滚动页面 这里只需要 page, distance两个属性参数不再需要滚动到最大距离因为本身就是需要从最大距离滚动到零这样就可以了。 async function autoScrollZero(page, distance 100) {await page.evaluate(async ({ distance }) {await new Promise((resolve, reject) {let scrollHeight document.body.scrollHeight;var totalHeight scrollHeight;var timer setInterval(([distanceTime, scrollHeightTime]) {window.scrollBy(0, -distanceTime);totalHeight - distanceTime;if (totalHeight 0) {clearInterval(timer);resolve();}}, 100, [distance, scrollHeight]);});}, { distance });}代码中同样是使用 setInterval 和 window.scrollBy(0, -distanceTime); 循环定时逐步减小滚动的值。
调用时使用方法 await autoScrollZero(newPage, 50)这个调用就会让页面向下滚动最终回到顶部。每次的滚动距离是50.
二、打开新Tab
常规测试中我们经常会遇到点击 a 标签打开新的tab页面对于这种需求Puppeteer也提供了处理方式那就是通过浏览器监听 targetcreated 事件完成等待该事件完成再去响应接下来的操作。 const newPagePromise new Promise(x browser.once(targetcreated, target x(target.page())))await page.click(a._1qp91i, { waitUntil: networkidle2 });const newPage await newPagePromise;如上newPagePromise 是一个promise当我们在当前页面通过 page.click(a._1qp91i) 点击链接时会打开一个新的页面然后等待 newPagePromise 响应最后我们就会拿到新页面的page对象也就是对于新页面的操作我们需要使用 newPage 来操作。
比如:
新页面的点击事件 await newPage.click(a._1qp91i, { waitUntil: networkidle2 });新页面的监听事件 newPage.on(console, logFunction);三、用户数据保存
自动化测试时每次的登录都是比较复杂且繁琐的我们可以通过记录一次登录数据信息避免每一次都需要进行登录操作可以使用userDataDir记录登录数据 const browser await puppeteer.launch({headless: false,devtools: false, // 打开开发者模式defaultViewport: null, // 不使用默认的固定大小直接填满浏览器userDataDir: .puppeteer-data, // 保存用户数据记录登录信息不用每次都进行登录});当运行代码时我们能够看到在根目录下生成了一个新的 .puppeteer-data 文件夹里边会记录一些登录的数据信息。
四、效果演示
打开新tab和上下滚动我们可以看看简书中的效果
用户数据我们能够在项目根目录下看到保存的数据信息 以上就是Puppeteer实现上下滚动、打开新Tab、用户数据保存的全部内容。
