Headful模式

Question

我正在尝试运行无头木偶来测试管道中的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：尝试连接到30000毫秒后超时铬！保证有效的唯一Chrome版本是r594312

有没有人设法让无头木偶真正在Bitbucket管道上工作？

Answer 1

circlci的人建立了一个很好的docker镜像，可以帮助无头木偶。我用它来测试circlCI和bitbucket管道。

我的测试设置：

一个非常简单的mocha / chai测试文件，我没有为circlCI和bitbucket管道测试配置任何伪造的参数。

// 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秒。
这可能是因为为我用于测试的免费版本分配了资源。

Headful模式

幸运的是，我在上面提到的两个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

结果：

Bitbucket管道和无头木偶吗？

1 个答案:

我的测试设置：

管道文件：

关于bitbucket和circleci的结果：

资源：

注意：

Headful模式