How to run Selenium sind runner in GitLabCI?

Question

I'm currently evaluating Selenium in combination with GitLab CI as a testing tool for our website. This is my current .gitlab-ci.yml:

variables:
    GIT_STRATEGY: clone
    GIT_DEPTH: 0

stages:
    - tests

test:
    stage: tests
    image: node:latest
    tags:
        - linux
    before_script:
        - apt-get update
        - apt-get install -y chromium
        - npm install -g selenium-side-runner
        - npm install -g chromedriver
    script:
        - selenium-side-runner My-UI-Test.side

I'm getting the following error:

FAIL ./DefaultSuite.test.js
  ● Test suite failed to run
    WebDriverError: unknown error: Chrome failed to start: exited abnormally.
      (unknown error: DevToolsActivePort file doesn't exist)
      (The process started from chrome location /usr/bin/chromium is no longer running, so ChromeDriver is assuming that Chrome has crashed.)
      at Object.throwDecodedError (../../../../../../usr/local/lib/node_modules/selenium-side-runner/node_modules/selenium-webdriver/lib/error.js:550:15)
      at parseHttpResponse (../../../../../../usr/local/lib/node_modules/selenium-side-runner/node_modules/selenium-webdriver/lib/http.js:560:13)
      at Executor.execute (../../../../../../usr/local/lib/node_modules/selenium-side-runner/node_modules/selenium-webdriver/lib/http.js:486:26)

I've searched for the error message DevToolsActivePort file doesn't exist and it seems that Chrome doesn't like to be run with root privileges. A lot of answers suggest using the --no-sandbox or --disable-dev-shm-usage flags. But those are Chrome flags, and since I'm not calling Chrome directly, I can't use them. The website in question is also deployed from a different project, so I have no code to work with. The only files I can change are My-UI-Test.side and .side.yaml.

Answer 1

I have a separate project for my e2e tests, into which I've added a Dockerfile, my selenium .side file, as well as a config file .side.conf. This project uses the gitlab docker registry to upload the project as an image, that can be loaded directly into the gitlab-ci.

Here are my files for the e2e test project:

• package.json

...
  "scripts": {
    "test": "selenium-side-runner test.side"
  },
...
  "dependencies": {
    "selenium-side-runner": "^3.17.0",
    "chromedriver": "^101.0.0"
  }

These are the options that I am using, you might want to adjust a few things here and there. The capabilities are pretty much what you want, though.

I've also added the baseUrl key to this file instead of directly into the package.json, because I use the same image for several environments with changing URLs, that I'm replacing in my before_script whenever needed. (I left this out below, as your use case probably differs)

• .side.yml

capabilities:
  browserName: "chrome"
  goog:chromeOptions:
    binary: /usr/bin/google-chrome-stable
    args:
      - no-sandbox
      - disable-dev-shm-usage
      - headless
      - nogpu
output-directory: results
output-format: junit
baseUrl: <baseURL>

The Dockerfile might include a few useless dependencies, you can likely remove a lot of them. Many of those are just copied over from my puppeteer Dockerfile, as they are using the google-chrome-stable binary very similarly. Downloading the fonts with the google-chrome-stable binary might not be needed in your case as well. So just adjust it to your needs.

• Dockerfile

FROM node:14

RUN apt update

RUN apt install -y \
    rsync \
    grsync \
    gnupg \
    ca-certificates \
    fonts-liberation \
    libappindicator3-1 \
    libasound2 \
    libatk-bridge2.0-0 \
    libatk1.0-0 \
    libc6 \
    libcairo2 \
    libcups2 \
    libdbus-1-3 \
    libexpat1 \
    libfontconfig1 \
    libgbm1 \
    libgcc1 \
    libglib2.0-0 \
    libgtk-3-0 \
    libnspr4 \
    libnss3 \
    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 \
    lsb-release \
    wget \
    xdg-utils

RUN apt-get update \
    && apt-get install -y wget gnupg \
    && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
    && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
    && apt-get update \
    && apt-get install -y google-chrome-stable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf libxss1 \
      --no-install-recommends \
    && rm -rf /var/lib/apt/lists/*

WORKDIR /app

COPY package.json /app
COPY .side.yml /app
COPY test.side /app
COPY results /app

RUN npm i -g chromedriver --unsafe-perm
RUN npm i -g selenium-side-runner --unsafe-perm

RUN npm install

And here I include it into my gitlab CI

• gitlab-ci.yml:

e2e:
  stage: test
  image: <image-of-above-project>:1.0
  variables:
    GIT_STRATEGY: none
  script:
    - cat .side.yml
    - npm run test

If you need more information on container registry, head to here: https://docs.gitlab.com/ee/user/packages/container_registry/