Unable to run chrome.docker in CI

[sudarsh]

npx: installed 239 in 9.067s
loki test v0.14.2
[14:32:39] Chrome (docker) [started]
[14:32:39] Prepare environment [started]
[14:32:39] Prepare environment [failed]
[14:32:39] → Docker is not installed
[14:32:39] Chrome (docker) [failed]
[14:32:39] → Docker is not installed
Docker is not installed
You can download it from https://www.docker.com/
Exited with code 1

[sudarsh]

@oblador can you help me out of this?

[maniator]

@sudarsh which CI service?

How has it been configured?

[michalszajnecki]

You need special docker image (docker in docker) docker:dind

[rwieruch]

I tried using the docker:dind image when using chrome.docker, but I guess it needs to install Node and Chrome in this Docker container as well. Is there an universal Dockerfile which works with Loki for using chrome.docker? I thought that's why we have Docker in the first place. See https://github.com/oblador/loki/issues/204

[myxious]

I ended up creating two docker images: the first for running loki locally, the second for CI. Both are based on the same linux distribution and uses same Chromium. And in the loki config it is determined whether to run chrome.app or chrome.docker, depending on the environment.

First image: /docker/headless-chrome/Dockerfile

FROM alpine:3.12

COPY .bin/install_chromium.sh  /usr/local/bin/install_chromium.sh

RUN apk --no-cache update && apk --no-cache upgrade
RUN sh /usr/local/bin/install_chromium.sh

ENTRYPOINT ["/usr/bin/chromium-browser", \
    "--disable-gpu", \
    "--no-sandbox", \
    "--headless", \
    "--disable-dev-shm-usage", \
    "--remote-debugging-address=0.0.0.0", \
    "--remote-debugging-port=9222"]

Second image: /docker/node-chrome-gm/Dockerfile

FROM node:12-alpine

COPY .bin/install_chromium.sh        /usr/local/bin/install_chromium.sh
COPY .bin/install_graphicsmagick.sh  /usr/local/bin/install_graphicsmagick.sh

RUN apk --no-cache update && apk --no-cache upgrade
RUN sh /usr/local/bin/install_chromium.sh
RUN sh /usr/local/bin/install_graphicsmagick.sh

ENV CHROME_BIN /usr/bin/chromium-browser
ENV LIGHTHOUSE_CHROMIUM_PATH /usr/bin/chromium-browser

Scripts: /docker/.bin/install_chromium.sh

#!/bin/sh

echo "*** Start chromium installation ***"
echo "http://dl-cdn.alpinelinux.org/alpine/edge/community" >> /etc/apk/repositories
echo "http://dl-cdn.alpinelinux.org/alpine/edge/main" >> /etc/apk/repositories
echo "http://dl-cdn.alpinelinux.org/alpine/edge/testing" >> /etc/apk/repositories
apk add --no-cache --virtual .build-deps gifsicle pngquant optipng libjpeg-turbo-utils udev ttf-opensans chromium
rm -rf /var/cache/apk/* /tmp/*

/docker/.bin/install_graphicsmagick.sh

#!/bin/sh

echo "*** Start graphicsMagick installation ***"
apk --no-cache add libgomp libltdl libpng libjpeg tiff libwebp-tools
apk add --no-cache gettext librsvg ghostscript graphicsmagick

Loki config (should use js version instead of package.json): lokirc.js

const target = process.env.CI ? "chrome.app" : "chrome.docker";

module.exports = {
  configurations: {
    laptop: {
      target,
      width: 1366,
      height: 768,
      deviceScaleFactor: 1,
      mobile: false,
    },
  },
}

package.json scripts to run Loki locally:

{
  "scripts": {
    "test-visual": "loki test --chromeDockerImage headless-chrome",
  }
}

Part of CI config (we use gitlab): .gitlab-ci.yml

test-visual:
  image: node-chrome-gm
  stage: code_quality
  script:
    - yarn build-storybook
    - yarn loki test --reactUri file:./storybook-static --chromeFlags='--headless --disable-gpu --hide-scrollbars --no-sandbox' --diffingEngine gm

I know this is dirty and messy and there are a lot of things to simplify, but it is what it is.