Puppeteer踩坑问题记录
前言
什么是Puppeteer？
Puppeteer 是一个 Node 库，它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。
具体怎么开始和API，参考文档：https://zhaoqize.github.io/puppeteer-api-zh_CN/
作者在工作中有需要用puppeteer编写自动化测试用例，对移动端H5进行E2E测试。
下文主要记录puppeteer进行自动化测试过程中，遇到的问题。
踩坑问题记录
Chromium问题
我们直接使用puppeteer，在MacOS可以正常运行测试脚本，但是部署到Linux服务器，会出现Chromium不存在，或者缺少Chromium依赖库的问题。
解决方案：使用不包含Chromium的puppeteer-core，再自己下载不同系统下的chromium，在配置参数中指定chromium的路径。
参考文章：https://www.jianshu.com/p/873f0bb2c3e5
//chrome.js 指定chromium路径
const os = require('os')
const type = os.type();
const path = require('path');
const chromePathMap = {
Linux: path.resolve('lib', 'chrome', 'chrome-linux', 'chrome'),
Darwin: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome' // Mac本地调试用
}
exports.chromePath = chromePathMap[type];// 启动浏览器，通过executablePath配置chromium的路径
const browser = await puppeteer.launch({
executablePath: chromePath,
headless: type == 'Linux' ? true : false, // MacOS，不启用无头模式，方便进行调试，
devtools: false,
args: ['--no-sandbox', '--disable-setuid-sandbox']
})tlinux下系统依赖库不存在
报错：
UnhandledPromiseRejectionWarning: Error: Failed to launch the browser process!
/root/luciozhang/pmd-auto-test/lib/chrome/chrome-linux/chrome: error while loading shared libraries: libXss.so.1: cannot open shared object file: No such file or directory
TROUBLESHOOTING: https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md解决方案：手动安装缺失的依赖库
$ cd lib/chrome/chrome-linux
$ ldd chrome | grep not发现缺失依赖库如下
libXss.so.1 => not found
libatk-bridge-2.0.so.0 => not found
libatspi.so.0 => not found
libgtk-3.so.0 => not found
libgdk-3.so.0 => not found安装依赖库
yum install libXScrnSaver*
yum install gtk3字体问题
问题：由于系统字体问题，一些中文变成方块，
解决方案：添加中文字体，修改字体配置文件
参考文章：https://www.jianshu.com/p/f2ba4f5b8f36
关闭弹窗
page.on('dialog', async dialog => {
try {
await dialog.accept();
} catch (error) {
console.log("关闭弹窗出现错误", error)
}
})定位授权问题
问题：定位授权弹窗，想要模拟位置，但是puppeteer的api不支持。
解决方案：覆盖navigator.geolocation.getCurrentPosition方法，直接返回一个模拟位置。
参考文章：https://stackoverflow.com/questions/51229360/puppeteer-close-geolocation-permission-request
await page.evaluateOnNewDocument(function () {
navigator.geolocation.getCurrentPosition = function (cb) {
setTimeout(() => {
cb({
'coords': {
accuracy: 21,
altitude: null,
altitudeAccuracy: null,
heading: null,
latitude: 23.129163,
longitude: 113.264435,
speed: null
}
})
}, 500)
}
})rem单位问题
问题：需要测试的H5页面，大多都是使用rem单位，但是puppeteer没有找到可以模拟dpr的方法。
解决方案：直接在page.evaluate设置为该窗口尺寸下，应该出现的font-size
await page.evaluate(() => {
document.documentElement.style.fontSize = '55px'
})