一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第9天,点击查看活动详情。
前言
什么是Puppeteer?
Puppeteer 是一个 Node 库,它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。
具体怎么开始和API,参考文档:zhaoqize.github.io/puppeteer-a…
作者在工作中有需要用puppeteer编写自动化测试用例,对移动端H5进行E2E测试。
下文主要记录puppeteer进行自动化测试过程中,遇到的问题。
踩坑问题记录
Chromium问题
我们直接使用puppeteer,在MacOS可以正常运行测试脚本,但是部署到Linux服务器,会出现Chromium不存在,或者缺少Chromium依赖库的问题。
解决方案:使用不包含Chromium的puppeteer-core,再自己下载不同系统下的chromium,在配置参数中指定chromium的路径。
参考文章:www.jianshu.com/p/873f0bb2c…
//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
字体问题
问题:由于系统字体问题,一些中文变成方块,
解决方案:添加中文字体,修改字体配置文件
参考文章:www.jianshu.com/p/f2ba4f5b8…
关闭弹窗
page.on('dialog', async dialog => {
try {
await dialog.accept();
} catch (error) {
console.log("关闭弹窗出现错误", error)
}
})
定位授权问题
问题:定位授权弹窗,想要模拟位置,但是puppeteer的api不支持。
解决方案:覆盖navigator.geolocation.getCurrentPosition方法,直接返回一个模拟位置。
参考文章:stackoverflow.com/questions/5…
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'
})