こんにちは。 開発チームのめろたん(@renyamizuno_)です。
マイブームはダンベルを持ち上げたり、下ろしたりすることです。
最近、学生時代の後輩と新年会して、どうしてもオニオンリングが食べたかったので頼んだら じゃがいもをそのまま唐揚げにしたような物体が出てきて困惑しました。
オニオンリングという概念を超越したなにか pic.twitter.com/atYJXASPpm
— マスター・めろたん (@renyamizuno_) January 22, 2016
中は生ですごく辛かったです。
はい。
今回はfeature specを安定させた話を書きます。
capybaraとCSS3
Misocaではcapybara-webkitを使ってfeature specを回しています。 ある日機能の追加がありfeature specを追加したのですが、そのfeature specがCIでたまに失敗することがありました。 たまに落ちるのがストレスだったので原因を調べてみたところ、
このIssueと同じようにanimationを使っているところで落ちていることが分かりました。
どうやらCSS3のtransform
が終わる前にクリック等に進んでしまい、うまくボタンが押せずspecが落ちているようでした。
なので
テスト環境の時だけtransform
とかを全部切っちゃいましょう!
となりました。
CSS3 と 私
まずこのサイトを参考にして同じように全部切ってみました。
* { 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が失敗した時にスクリーンショットをとってくれるので それを見てみました。
なんということでしょう。
この「請求書」と「自動作成予約」の吹き出しはヘッダーメニューの「請求書」にカーソルを合わせた時に出るものなのですが、
この動きが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便利ですよ!