feature spec と capybara と CSS3 と 私

こんにちは。 開発チームのめろたん(@)です。

マイブームはダンベルを持ち上げたり、下ろしたりすることです。

最近、学生時代の後輩と新年会して、どうしてもオニオンリングが食べたかったので頼んだら じゃがいもをそのまま唐揚げにしたような物体が出てきて困惑しました。

中は生ですごく辛かったです。

はい。

今回はfeature specを安定させた話を書きます。

capybaraとCSS3

f:id:renya-mizuno:20160126160138j:plain

Misocaではcapybara-webkitを使ってfeature specを回しています。 ある日機能の追加がありfeature specを追加したのですが、そのfeature specがCIでたまに失敗することがありました。 たまに落ちるのがストレスだったので原因を調べてみたところ、

github.com

このIssueと同じようにanimationを使っているところで落ちていることが分かりました。 どうやらCSS3のtransformが終わる前にクリック等に進んでしまい、うまくボタンが押せずspecが落ちているようでした。

なので

テスト環境の時だけtransformとかを全部切っちゃいましょう！

となりました。

CSS3 と 私

marcgg.com

まずこのサイトを参考にして同じように全部切ってみました。

* {
 transition-property: none !important;
 -o-transition-property: none !important;
 -moz-transition-property: none !important;
 -ms-transition-property: none !important;
 -webkit-transition-property: none !important;

 transform: none !important;
 -o-transform: none !important;
 -moz-transform: none !important;
 -ms-transform: none !important;
 -webkit-transform: none !important;

 animation: none !important;
 -o-animation: none !important;
 -moz-animation: none !important;
 -ms-animation: none !important;
 -webkit-animation: none !important;
}

するとどうでしょう。 今まで落ちていなかったfeature specが確実に落ちるようになってしまいました。 capybara-screenshotというgemを使っているので、specが失敗した時にスクリーンショットをとってくれるので それを見てみました。

github.com

f:id:renya-mizuno:20160122135214p:plain

なんということでしょう。 この「請求書」と「自動作成予約」の吹き出しはヘッダーメニューの「請求書」にカーソルを合わせた時に出るものなのですが、 この動きがtransformで実装されているため、すべて切ってしまうと、これらがすべて表示されっぱなしになってしまいます。 実はこの吹き出しの下には「一括作成」というリンクがありそれが「隠れてクリック出来ないよ」ということで落ちていました。

なので、上のCSSに一工夫入れます。

この吹き出しは.popupというクラスだったので、

:not(.popup) {
 transition-property: none !important;
 ………
}

このように*ではなく CSS3で追加された:notセレクタを使うことで、:notで指定されたもの以外すべての要素に対してanimation等を切るようにしました！

最後にこのCSSファイルをlayoutファイルでテスト環境の時だけ読み込ませるようにします。

!!!
%html
    %head
        = stylesheet_link_tag 'setting/disable_animation' if Rails.env.test?

以上でテスト環境の時だけanimation等を切るようにできました！

feature spec と 私

このあと落ちるたびに:notをどんどん追加していき、最終的には安定させることが出来ました！

ストレスを感じることもなくなり、ため息をつきながらCIの再ビルドボタンを押すこともほぼなくなりました！

まとめ

  • CSS3で見た目をかっこ良くできるけど、capybara-webkit使っていると大変なことになるかもしれないので気をつけましょう！
  • capybara-screenshot便利ですよ！