Backstopjs on GitLab CI and Pages

.gitlab-ci.yml

stages:
  - get_reference
  - regression_test
  - publish

backstopjs_reference:
  stage: get_reference
  image:
    name: backstopjs/backstopjs:latest
    entrypoint: [""]
  dependencies:
  - deploy-staging
  script:
    - backstop reference
  artifacts:
    when: always
    paths:
      - backstop_data/html_report
  allow_failure: true

backstopjs_test:
  stage: regression_test
  dependencies:
    - backstopjs_reference
  image:
    name: backstopjs/backstopjs:latest
    entrypoint: [""]
  script:
    - backstop test
  artifacts:
    when: always
    paths:
      - backstop_data/html_report
  allow_failure: true

pages:
  stage: publish
  dependencies:
    - backstopjs_test
  script:
    - mv backstop_data/html_report public
  artifacts:
    paths:
    - public

backstop.json

{
  "id": "autumnsky.jp",
  "viewports": [
    {
      "label": "phone",
      "width": 320,
      "height": 480
    },
    {
      "label": "midium",
      "width": 1024,
      "height": 768
    }
  ],
  "onBeforeScript": "puppet/onBefore.js",
  "onReadyScript": "puppet/onReady.js",
  "scenarios": [
    {
    }
  ],
  "paths": {
    "bitmaps_reference": "backstop_data/html_report/bitmaps_reference",
    "bitmaps_test": "backstop_data/html_report/bitmaps_test",
    "engine_scripts": "backstop_data/engine_scripts",
    "html_report": "backstop_data/html_report",
    "ci_report": "backstop_data/ci_report"
  },
  "report": ["browser"],
  "engine": "puppeteer",
  "engineOptions": {
    "args": [""]
  },
  "asyncCaptureLimit": 2,
  "asyncCompareLimit": 10,
  "debug": false,
  "debugWindow": false
}

onBefore.js

module.exports = async (page, scenario, vp) => {
  const USERNAME = 'USER';
  const PASSWORD = 'PASS';

  await page.setExtraHTTPHeaders({
    Authorization: `Basic ${new Buffer(`${USERNAME}:${PASSWORD}`).toString('base64')}`
  });

  await require('./loadCookies')(page, scenario);
};