読者です 読者をやめる 読者になる 読者になる

I'm kubosho_

思想の固まり

CSSをリファクタリングするためのテストツール選定

この記事は今年のはじめに公開しようと思っていたのですが、体裁を整えないままずっと下書きに残ってしまっていたので供養の意味も込めて公開します。

もしかしたら間違ったことが書かれているかもしれないのと、情報も若干古くなってしまったのでそれらを承知の上でお読みください。


何をテストするのか

  • 肥大化したCSSを整理したい
  • 見た目は変えないようにする
  • CSSを整理した後に見た目が変わっていないことをテストで保証したい

ツールを検討する上での前提条件

  • 基本テストはVisual Studioのタスクランナーエクスプローラー上から行いたい
  • testタスクをクリックしたらでテスト実行したい
  • グローバルインストールさせたくない
    • タスクランナーエクスプローラーは依存しているパッケージで足りないものがあると、自動的にnpm installしてくれる
    • グローバルインストールが必要なものまではnpm install -gしてくれない

ツールの検討

まずRuby製のツールはNode.js一本でやりたい身としてはパスしたい。 Node.jsの他にインストールさせたくない…

BackstopJS

まずは何をテストするのか | CodeGridで紹介されていたBackstopJSを使ってみることにしました。

使ってみた結果が以下のリポジトリになります。 kubosho/sandbox-backstopjs

自分(達)がダメだと感じたところ

  • ページのキャプチャを取って差分画像をするまでの時間が長い
    • 作業効率が落ちる
  • npm i -g gulp casperjs phantomjs@1 する必要がある
    • グローバルインストールはさせたくない
    • devDependenciesに含めたい
  • node_modules/backstopjs 以下でGulpのタスクを実行する必要がある
    • node_modules 以下は極力触りたくない
    • Visual Studioのタスクランナーエクスプローラーと相性が悪い

PhantomCSS

OS XはCasperJS 1-1betaを別途インストールしないといけないが、Windows向けには.batファイルとしてCasperJSが添付されている。

Huddle/PhantomCSS

PhantomCSSのダメなところ

  • PhantomCSS/testsuite.jsを見ると分かるように依存しているCasperJSのことも考えないといけない構造になっており、PhantomCSSも微妙なのではという思いが募った
  • PhantomJSに対するNightmareのようにラップしたライブラリが欲しいと思った