javascript - Bitbucket 管道和非无头 Puppeteer?
问题描述
我正在尝试运行非无头 puppeteer 来测试管道中的 chrome 扩展。
当我在谷歌上搜索这个主题时,我发现很多人能够让无头木偶师在管道上工作,但由于某种原因,我无法让它与非无头人一起工作。
Puppeteer 故障排除文档说 TravisCI 是可能的,所以管道也应该是可能的,不是吗?
我已经尝试了很多不同的 docker 图像,但它们似乎都不起作用。这是我目前的设置:
image: node:9
pipelines:
branches:
staging:
- step:
script:
- node -v
- yarn -v
- yarn install
- apt update && apt install -yq gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
- apt-get install -y xvfb
- export DISPLAY=:99.0
- Xvfb :99 -ac &
- yarn start build.staging
- yarn start test.unit
- yarn start test.e2e.staging
当我尝试这样做时:
export const loadBrowser = async () => {
browser = await puppeteer.launch({
headless: false,
args: [
`--disable-extensions-except=${absDistPath}`,
`--load-extension=${absDistPath}`,
"--user-agent=PuppeteerAgent",
"--no-sandbox",
"--disable-setuid-sandbox"
]
});
我得到的错误是:
TimeoutError:尝试连接到 Chrome 时超时 30000 毫秒!唯一保证工作的 Chrome 版本是 r594312
有没有人设法让非无头 Puppeteer 真正在 Bitbucket Pipelines 上工作?
解决方案
circlci 的人们构建了一个很好的 docker 镜像来帮助无头 puppeteer。我用它来测试 circlCI 和 bitbucket 管道。
我的测试设置:
一个非常简单的 mocha/chai 测试文件,我没有为 circlCI 和 bitbucket 管道测试配置任何 puppeteer 参数。
// index.js
module.exports = {
async getLocation(page) {
return page.evaluate(() => window.location.href);
},
};
// test.js
const { expect, assert } = require('chai');
const puppeteer = require('puppeteer');
const example = require('./index');
describe('Puppeteer', () => {
before(async function () {
this.browser = await puppeteer.launch();
this.page = await this.browser.newPage();
});
after(async function () {
await this.browser.close();
process.exit(0);
});
describe('Startup', () => {
it('should start', async function () {
assert.equal('object', typeof this.browser);
});
});
describe('In Browser', () => {
it('url should be blank', async function () {
const url = await example.getLocation(this.page);
expect(url).to.include('about:blank');
});
it('url should have example.com', async function () {
await this.page.goto('http://example.com');
const url = await example.getLocation(this.page);
expect(url).to.include('example.com');
});
});
});
管道文件:
image: circleci/node:8.12.0-browsers
pipelines:
default:
- step:
caches:
- node
script:
- yarn install
- yarn run lint
- yarn run test
bitbucket 和 circleci 的结果:
资源:
- 要使用的图像
circleci/node:8.12.0-browsers
,他们的Dockerfile。 - 还使用此答案上提供的 dockerfile 测试了类似的设置。
笔记:
- CirclCI 提取图像的时间更短,缓存时间几乎为 1-2 秒。整个运行只需约 13 秒。
- Bitbucket 拉取图片需要更多时间,第一次拉取需要 2 分钟,下一次需要 10~30 秒缓存。总共约 45 秒来完成整个运行。
- 这可能是因为分配给我用于测试的免费版本的资源。
头部模式
幸运的是,我上面提到的两个 dockerfile 都提供了 Xvfb。你只需要使用它们。代码还必须具有沙箱参数才能正常工作。
添加参数:
this.browser = await puppeteer.launch({
headless: false,
args: [
'--no-sandbox',
'--disable-setuid-sandbox',
],
})
将测试线替换为以下内容,
xvfb-run -a --server-args="-screen 0 1024x768x24" yarn run test
结果:
推荐阅读
- r - 如何将计算值添加到 R 中的现有列
- c# - 以编程方式将当前调试器附加到已启动的进程
- pandas - 基于 Pandas 中列值的条件乘法
- c# - 启用 UseAuthentication 无法到达 HomeController 路由
- javascript - 是否有一种可能的方法可以在客户端和服务器端之间发送和接收对象(使用原型),并且对象被定义在客户端?
- c# - 为什么我的论点似乎被 vhost.exe 覆盖
- powershell - 使用通配符将文件中的文本替换为行尾
- multithreading - Ehcache 多线程并发读写
- matlab - 表面估计
- python-3.x - Python3:TypeError:'float'对象不可下标