GitLab CIでChromeヘッドレスブラウザを使う

Tips
目次

概要

GitLabでソースコードやプロジェクトを管理している場合、CIやCDのためにGitLab CIを使っていることが多いと思います。

ここでは、そのGitLab CIでChromeのヘッドレスブラウザを使い、Node.jsのプロジェクトのテストをする方法を紹介します。

環境

  • GitLab 10.4

テスト方法

Node.jsのテストの例として、私の環境ではKarmaを使っていますが、主にChromeのインストール方法について説明するので、Karmaの部分を適切に書き換えれば他のテストフレームワークでも動くはずです。

方法

実際に動作するものを載せておきます。

image: node:latest

stages:
  - test

test:
  stage: test
  script:
    - apt-get update
    - apt-get install -y gdebi
    - curl -O https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
    - gdebi -n -q google-chrome-stable_current_amd64.deb
    - npm install
    - ./node_modules/.bin/karma start --single-run

この中でも一番重要なのは、「test.script」の1行目から4行目です。

ここでは、最初の2行でgdebiというものをインストールし、次の2行でインストールしたgdebiを使ってChromeのインストールをしています。

gdebiとは、debパッケージのインストール時にデフォルトのdebコマンドと違い、依存関係を解決してインストールしてくれるものです。Chromeは依存関係が複雑なので、gdebiを使ってサクッと依存関係の解決を図ります。

あとは、curlでChromeのdebパッケージをダウンロードして、gdebiでインストールをすれば、Chromeのインストールは終わりです。Chromeヘッドレスブラウザは、通常のChromeに含まれているため、通常のChromeと同じものをインストールしています。

それ以降の記述は、Karmaのテストのためのものなので、説明しません。

さいごに

当初、debコマンドでChromeのインストールをしようとしたら、依存関係の解決に苦しみ、インストールを断念しようとしていました。しかしgdebiと出会って、劇的にインストールが簡単になりました。

gdebiはCI以外にも使えると思うので、覚えておいて損はないと思います。