Puppeteer实现上下滚动、打开新Tab、用户数据保存（三）

Puppeteer实现上下滚动、打开新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 });
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

autoScroll 方法就是一个具体实现，通过 setInterval 定时器，进行循环执行 window.scrollBy(0, 100);这个方法。

代码中需要传递三个参数 page、distance、toScrollHeight

• page: 表示Puppeteer控制的页面
• distance：表示每一次滚动滚动的距离
• toScrollHeight：表示最大滚动到多少距离

在程序中调用：

  await autoScroll(newPage, 80, 2200)
1

这就实现了向上滚动。上面的方法调用表示每一次滚动 80 的距离，滚动的最大值是 2200 。这个就比较自由了，如果在自己的项目中使用，就可以随意更改这些参数，以符合自己的业务需要。

❓ 对于向下滚动该如何实现呢？其实也是很简单。

由于 window.scrollBy(0, distance); 中第二个参数 distance 可以为负数，当为负数时，则会产生向下的滚动，那我们也就很容易实现向下滚动。

首先，我们可以从 document.body 中获取到页面已经滚动的总高度，然后让已经滚动的总高度逐渐变为零，则可以实现向下滚动的效果。

 let scrollHeight = document.body.scrollHeight;
 var totalHeight = scrollHeight;
1
2

下面来看看完整的向下滚动页面：
这里只需要 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 });
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

代码中，同样是使用 setInterval 和 window.scrollBy(0, -distanceTime); 循环定时逐步减小滚动的值。

调用时使用方法：

  await autoScrollZero(newPage, 50)
1

这个调用就会让页面向下滚动，最终回到顶部。每次的滚动距离是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;
1
2
3

如上，newPagePromise 是一个promise，当我们在当前页面通过 page.click('a._1qp91i') 点击链接时，会打开一个新的页面，然后等待 newPagePromise 响应，最后我们就会拿到新页面的page对象，也就是对于新页面的操作，我们需要使用 newPage 来操作。

比如:

• 新页面的点击事件

 await newPage.click('a._1qp91i', { waitUntil: 'networkidle2' });
1

• 新页面的监听事件

  newPage.on('console', logFunction);
1

三、用户数据保存

自动化测试时，每次的登录都是比较复杂且繁琐的，我们可以通过记录一次登录数据信息，避免每一次都需要进行登录操作，可以使用userDataDir记录登录数据

 const browser = await puppeteer.launch({
    headless: false,
    devtools: false, // 打开开发者模式
    defaultViewport: null, // 不使用默认的固定大小，直接填满浏览器

    userDataDir: '.puppeteer-data',  // 保存用户数据，记录登录信息，不用每次都进行登录

  });
1
2
3
4
5
6
7
8

当运行代码时，我们能够看到在根目录下生成了一个新的 .puppeteer-data 文件夹，里边会记录一些登录的数据信息。

四、效果演示

打开新tab和上下滚动，我们可以看看简书中的效果：

用户数据，我们能够在项目根目录下看到保存的数据信息

以上就是Puppeteer实现上下滚动、打开新Tab、用户数据保存的全部内容。

---