Bitbucket 管道和非无头 Puppeteer？

Question

我正在尝试运行非无头木偶操纵者来测试管道中的 chrome 扩展。

当我 google 这个话题时，我发现很多人能够让无头木偶操纵者在管道上工作，但由于某种原因我无法让它与非无头操纵者一起工作。

Puppeteer 故障排除文档说 TravisCI 是可行的，所以管道也应该可行吗？

我尝试了很多不同的 docker 图片，但其中 none 似乎有效。这是我当前的设置：

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: Timed out after 30000 ms while trying to connect to Chrome! The only Chrome revision guaranteed to work is r594312

有没有人设法让非无头 Puppeteer 实际在 Bitbucket 管道上工作？

Answer 1

circlci 的人们构建了一个很好的 docker 图像，有助于无头木偶操纵者。我用它来测试 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。
还使用上提供的 docker 文件测试了类似的设置。

备注：

CirclCI 拉取图像的时间更少，在缓存上几乎只用了 1-2 秒。完成整个运行.
Bitbucket 拉取图片的时间比较长，第一次拉取需要 2 分钟，下一次在缓存上需要 10~30 秒。完成整个运行.
这可能是因为为我用于测试的免费版本分配了资源。

有头模式

幸运的是，我上面提到的两个 docker 文件都提供了 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

结果：

Bitbucket 管道和非无头 Puppeteer？

Bitbucket Pipelines & non-headless Puppeteer?

javascript

continuous-integration

automated-tests

bitbucket-pipelines

puppeteer

我的测试设置：

管道文件：

bitbucket 和 circleci 的结果：

资源：

备注：

有头模式