上周接到接到一个需求，将某个页面整体截图，并定时发送邮件。
这里我将其拆解成三个大步骤：
1、实现页面整体截图
2、发送邮件
3、定时发送
本文主要记录实现截图过程中遇到的一些问题和整体复盘。
一、实现过程中遇到的问题
1、页面中存在竖向滚动，如何截全屏？
涉及知识点： puppeteer 模拟滚动
实现过程中参考了 Puppeteer前端检测最佳实践 - 知乎 这篇回答中的答案。
前期尝试 通过配置 fullPage 为 true， 结果发现没有成功。
await page.screenshot({path: 'pics/demo1.png', fullPage: true});后来发现，设置的视口高度要和全屏高度一致。 而想要得到全屏高度，则需要找到页面中的滚动元素，得到其滚动高度。
在参考文中，使用了计算的方式找到滚动元素，而在我们项目中，滚动元素是固定的，因此，直接计算滚动元素高度即可。
/** 获取无头浏览器打开页面的 某dom 高度 */
export const calHeight = async (page: any, dom: string) => {
const scrollHeight = await page.$eval（dom, el => el.scrollHeight);
return scrollHeight;
};在获得滚动高度后，还有仍需注意的一点。这里只是滚动高度，全局是大于滚动高度的。
如上图所示，puppeteer的视口是从页面左上角开始计算的，而一般情况下，页面的滚动都是内容区滚动，上面置顶。
因此，需要将viewPort的height 计算为 滚动部分高度+ 固定部分高度。截图可以选择只截滚动内容。只需要设置clip 中的 x 和 y 即可。
这部分的核心代码如下：
// 引入puppeteer设置
const puppeteer = require('puppeteer');
// 启动浏览器
const browser = await puppeteer.launch();
//创建新页面
const page = await browser.newPage();
// 设置cookies
cookies && await page.setCookie(...cookies);
// 跳转url
const response = await page.goto(url, {
waitUntil: 'networkidle0',
timeout: timeout || 120000
});
// 设置视口高度
await page.setViewport({ width, height: height + y + 20 });
// 设置截图位置
await page.screenshot({ path: shotPath, clip: { x, y, height: height, width: width }, });2、页面中局部存在横向滚动，如何实现截全屏？
解决了竖向的滚动问题，但是，在页面中，是仍然存在局部滚动。
如上图所示，因页面中存在表格，表格内是存在局部滚动的。这种情况下，我在控制台找到了可以获得实际表格宽度的元素。而每个表格中都有这个元素，就可以在找到所有表格宽度后，取最大值。这样就可以截取整屏宽度啦。
/** 获取无头浏览器打开页面的 某dom 宽度 */
export const calWidth = async (page: any, dom: string) => {
let maxWidth = 0;
const width = await page.$$eval（dom, el => el.map(e => e.clientWidth));
width.forEach(w => maxWidth = w > maxWidth ? w : maxWidth);
return maxWidth;
};3、页面中局部存在竖向滚动，如何实现截全屏？
局部竖向滚动指的表格的竖向滚动，这是因为开发表格组件过程中，固定了表格组件的高度。
因此，在渲染的时候，只需要更改表格高度即可。 于是，问题就变成了，
如何通过url传递参数，改变页面渲染？
1、取到url中的参数
2、改变表格高度
项目中使用的vue框架，vue 获取url 参数的方式是：
/** 事件ID */
get urlTableHeight () {
const height = this.$route.query.tableHeight as string;
return height ? parseInt(height) : '';
}而改变表格高度通过组件传参完成。
4、截图的时候，如何保证页面中所有数据已经加载完成？
因为页面存在加载时长和懒加载等问题，必须保证，页面中所有数据均已加载完成才能进行截图。
通过两步来实现：
① 跳转url的时候，添加 waitUntil：‘networkkidle0’ 的参数。networkkidle0 的意思是 在 500ms 内没有网络连接时就算成功(全部的request结束),才认为导航结束。
② 由于我们的这个数据实在太多了，可能在限定时间内依然没有加载完，因此，又使用了pendingXHR 来进行双重保障。
最终代码为：
/** 获取具体的页面响应 */
export const getPageResponse = async (url: string, _page?: any, timeout?: number, waitXhrAll = true, cookies?: Array<{ name: string, value: string, domain: string }>) => {
let pendingXHR;
const page = _page || await getBrowserPage(cookies);
if (!page) return null;
if (waitXhrAll) {
pendingXHR = new PendingXHR(page);
}
const response = await page.goto(url, {
waitUntil: 'networkidle0',
timeout: timeout || 120000
});
if (response.status() !== 200) {
logger(`跳转到${url}失败`, 'error');
return null;
}
// 等当前的xhr请求都返回
waitXhrAll && await pendingXHR.waitForAllXhrFinished();
return response;
};二、整体复盘
1、代码结构
在review过程中，组长告诉我，虽然完成了截图功能的开发，但是整体代码没有复用性，排查问题也比较困难。
整个截图过程是主要包括如下几个事情的：
① 创建页面
② 获取页面内容
③ 截图
而最开始，我是把这些代码全部写在了一个函数中，虽然后期的确是复用这个大函数完成，但是这些代码全部融在一个函数中，即难阅读，也难以排查问题。
最好的办法是将其进行函数拆分。
函数拆分过程中，一个技巧就是，要注意函数的命名，入参，出参。
通过函数命名就能知道，这个函数做了什么。 通过入参的命名知道需要传递什么参数，通过出参明确函数返回什么。
2、异常处理
还有一个问题就是，在开发过程中，不注意异常处理。
前端代码中，往往都是业务代码，并且排查可以通过界面排查，但是后端代码，感觉需要详细的异常处理，不然很难排查问题。
那么，问题就来了，什么时候需要抛出异常呢？
需要抛出异常的三种情况：
①不可控因素 ②不可完全预测异常
①② 常出现在调用第三方库的时候
③ 希望带上异常调用栈
错误日志记录
常常在业务代码使用，譬如在定义post接口的返回的时候，返回为 {data: any, error: Error | null})。
在明确下层调用者的情况下，返回明确的错误，能降低理解成本。
在不明确调用者的情况下，譬如多数框架，均是向上抛出异常。
明确的返回，是错误；异常处理的返回结果；
异常，就是未知的
三、参考链接
1、puppeteer api文档：https://zhaoqize.github.io/puppeteer-api-zh_CN/#?product=Puppeteer&version=v14.4.1&show=api-overview
2、滚动问题：Puppeteer前端检测最佳实践 - 知乎
