Bitbucket 管道和非无头 Puppeteer？

Question

我正在尝试运行 non-headless puppeteer 来测试管道中的 chrome 扩展。

当我在谷歌上搜索该主题时，我发现很多人能够让无头 puppeteer 在管道上工作，但由于某种原因我无法让它与 non-headless 一起工作。

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：尝试连接到 30000 毫秒后超时 铬合金！唯一保证工作的 Chrome 版本是 r594312

有没有人设法让非无头 Puppeteer 真正在 Bitbucket Pipelines 上工作？

Answer 1

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。
• 还使用this answer 上提供的 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

结果：