デザインをテストできる Galen をご紹介

Galenとは、先月公開された ThoughtWorksTechRadar の Tools で、TRIAL カテゴリに載っていて気になったツールです。

このツールが気になったのは、以下のような説明があったためです。

Testing that layout and styling of responsive websites is working as expected across various form factors can be a slow and often manual process.

ちょうど、そのタイミングで会社メンバーとの雑談で、CSS などをレビューや自分で適用するときにデザインをテストしたいという話題が出ていたので、簡単に試した記録です。

Galen を触る

Galen は、サイトを記述するための DSL 書き、その DSL を実行する環境を Java や JavaScript で記述することになります。

Galen Spec Language と呼ばれるものを使うとサイトの構造を DSL で定義することができるようになります。 このファイルは、galen check コマンドにより、単体でサイト等を指定して実行可能です。

コマンドラインでconfigファイルやドライバを渡せば 、コマンドの実行単位でどのブラウザで実行するかを指定できます。 しかし、実際は様々なブラウザで確認したいことが多いでしょう。 そのような時は、JavaScript や Java でコードを記述することで、テストする環境の設定を記述し、まとめて実行することができるようになります。

以下は、JavaScript で FireFox と Chrome で、画面サイズを変えながら表示を確認する時のプログラムになります。

var browsers = {
  firefox: {
    browserName: "firefox"
  },
  chrome: {
    browserName: "chrome"
  }
};

forAll(
  browsers
  , function() {
    forAll([
      ["mobile", "400x700"],
      ["tablet", "600x800"],
      ["desktop", "1024x768"]
    ], function (){
      test("Home page on device", function (browser, deviceName, size){
        var driver = createDriver("https://agile.esm.co.jp", size, browser["browserName"]);
        checkLayout(driver, "homePage.gspec", ["all"]);
      });
    });
  });

また、BrowserStack と連携して実行する方法もあるため、IE などのデザインについても自動で確認できるようになります。

所感

ちゃんと全部定義するには大変だけど、デザイン崩れ起こした時のリグレッションや、よくわからないCSSいじる時のテストハーネスに使えそうだなぁという気持ちになりました。 特に、BrowserStack と連携して自動テストができるようになるというのは、Mac などで開発している身としてはとても魅力的という気がします。 test script 内で takeScreenShot というメソッドを使うと、スクリーンショットを取得することが可能になります。 その機能を使い、まずはスクリーンショットをいろんなブラウザで取得し回るだけでも役立ちそうだなぁという気がしました。