sleep rand(1.year) 年に一度は更新するであろうブログ

Capybara + Poltergeistで不安定なテストはCSSでアニメーションを切ってみよう

今関わっているプロジェクトではRailsのfeature specでCapybara + Poltergeist を使っているのですが、 以前から不安定なテストに悩まされていました。そして、今年に入ってからその不安定さが大きく増し、テストの 実行回数に影響が出てきました。そのため、きちんと原因を調査することになりました。

調べてみると、ボタンを押す操作が正しく動いていないケースが多いことがわかりました。そこで、以下の3つの 仮説を立て、 それぞれについて検証してみました。

  • 仮説1:そもそもボタンが表示されていない。
  • 仮説2:ボタンは表示されているが、ボタンが押せていない。
  • 仮説3:ボタンが押せているが、JS側が関知できていない(JSフレームワークはVueを利用)。

まず最初の「そもそもボタンが表示されていないケース」ですが、これは

find('#id_of_button', visible: false)

とすれば検出可能です。調査したところ、要素自体はあることがわかりました。

次に「ボタンは表示されているが、ボタンが押せていない。」ケースですが、これについては

click_on 'ボタンの値'

となっているところを、

find('#id_of_button').trigger(:click)

と置き換えれば検証できます。これを行ったところ、テストによってはこれで通るようになりましたが、 ボタン押下後に表示されるべき要素が表示されない(正確にはvisibleな要素をだけを対象にしたときに見つからない) という問題が新たに発生しました。また、これにより最後の「ボタンが押せているが、JS側が関知できていない」 という 部分については、調査する前に仮説が否定された形になりました。

ここまできてまた原因不明の状態に戻ったのですが、 さらに調べるとCSS animationが原因という情報を得ました。 Capybaraのclick_onで呼び出されるPoltergeistのメソッドは、要素の位置を取得してその座標をクリックしているらしく、 CSS animationが効いているとクリックした座標に要素が無くなっている、ということが起こるようでした。

そこで、先ほどのエントリにあるCSSをview側でRails.env.test? が真のときに読み込むようにした結果、動作が不安定なfeature specは大きく減り、 retry回数も激減しました。

不安定なfeature specにお悩みの方は、一度トライする価値があると思いますが、CSS animationを無効にしているため、実際にユーザーが 見る画面とは異なる画面をテストしているという点は留意が必要です。また、当然ですがfeature specでCSS animationに関連するような テストを書いている場合はそのテストだけCSS animationを無効化しないなどの方法が必要でしょう。

小規模チームで使える050あんしんナンバー

050あんしんナンバーというサービスをNPOで使っているのですが、これがなかなかに便利です。小規模な組織で、ほぼ受信専用の代表番号として使うのに適しています。

具体的に、以下のような機能があります。

  • (これは普通に転送電話でできる機能ですが)代表番号から他の電話番号に転送ができます。
  • 不在着信のとき、留守番電話の内容を音声ファイルでメールに添付してくれます。発信元番号や着信時間もメールに記載されているので、わざわざセンターに留守電のメッセージを聞きに行くという必要がありません。また、通知先のメールアドレスから複数人に転送するようにしておけば、関係者全員が着信に気づくことができます。
  • 事前登録した番号から代表番号を使って発信ができます。ウェブサイトにアクセスする必要があるのがかったるいですが、相手に自分のプライベート番号を伝えずに発信ができます。

最後の代表番号を使った発信については、リンク先を見てもらうほうがわかりやすいでしょう。とはいえ、ちょっと変わった方式なので図を見てもわからない場合は使って見るしかないですね。。代表番号からよく発信する場合は不向きですが、必ずしも代表番号から発信しないといけないというケースは少ないような気がするので、通常はあまり問題にならないと思います。発信を多くする場合は、050plus等のIP電話サービスを組み合わせれば発信時もビジネスにプライベートの番号を使わずに済みます。

YDKJS読み進め中。

先月からYou don’t know JSを読み進めてます。これまでJavaScriptはほんと片手間にやっていて、 きっちり理解しないまま書いていたというのが正直なところだったんですが、Hacker Newsで本書の存在を知り、O’reillyのサイトでも評価が高かったので 読み始めました。ウェブで原稿公開されているので最初はブラウザで読んでたんですが、Scope & Closuresの巻を読み始めて内容に期待ができたので、電子書籍 でまとめて買って読み始めてます。なぜかAmazonのほうが安かったのでKindle版で。

本書はタイトルから推測できる通り、JavaScript自体に関して効率よく網羅的に知ることを目指して書かれているそうです。全体で6巻の構成となっており、 現時点では2巻から5巻までか出版されてます。1巻はすでに出版準備に入って居るようですが、プログラミングとJavaScript自体への入門編なので自分のように すでにJavaScriptを書いた経験が(曲がりなりにも)ある場合はそんなに読む必要はなさそうです。反対に最後の6巻は “ES6 & Beyond” ということで、まだ 書き終えられていません。

今のところ、”Scope & Closures”と”this & Object Prototypes” を読み終えました。”Scope & Closures” は「あー、そういうことだったんだ」という ものが多かったんですが、”this & Object Prototypes”は「え、そうだったの? まじで?」みたいなのが多く、ときには吹き出しながら読んでました。

このシリーズ、一見すると「取り上げるトピックの順番がなんでこうなっているんだ?」と感じるのですが、読んでいくとその理由がわかります。ここまで読んだ限り でも非常に章構成がうまく、順番に理解していけば前後の巻や章に飛んだり戻ったりする必要なく出来ているところがすばらしいなと思います。

難点があるとすれば、1巻ずつ売られていて全部買うと結構な値段になることでしょうか。とはいえ、全部まとめてたら発刊が遅くなったでしょうし、1冊にしたら 鈍器級の本になりそうではあります。日本語訳がいつでるかはわかりませんが、もし発売されたらJavaScriptについて知識を深めたい幅広い層に受けるものになる んじゃないかと思います。

Yokohama.rb 第50回LT 〜自分を変えた一冊〜

Yokohama.rb #50が50回記念LT大会ということで、自分も発表させていただきました。

資料はちょっと書籍からの引用が多いので控えますが、紹介した一冊はこちら。

今回はテーマが「自分を変えた一冊」ということで、IT系の書籍が被るだろうなと予想して分野が違う本を選んで見ました。 今回、LTに当たって電子書籍版を改めて読んでみたのですが、プログラマーとして非常に勇気づけられるところがありました。 こういった創作に当たっている方々の書籍は、プログラマーにとって参考になることが多いと思います。

最近気に入っているChrome拡張3種

最近使って見て気に入っているChrome拡張があるので、ご紹介。

Octotree

Moongiftの記事で知りました。Githubのプロジェクトを開くと、左側にWindowsのエクスプローラバーみたいなのが出て、ソースコード閲覧が楽になります。がっつりとソースコード読むならgitで手元に落としてくるのがいいと思うのですが、ちゃちゃっとコードを見たいときはブラウザで見られるとすごい便利です。

HackerNew

HackerNewsのサイトを見やすくするためのChrome拡張です。shareやcacheを見る機能などもついてますが、自分はレイアウトを見やすくしてくれるというところだけで使ってます。ちなみにcachedをクリックするとグーグルにあるキャッシュを見るようになっているんですが、これはHN砲くらって落ちるサイトが多いからなんじゃないかと推測してます。

Reddit Enhancement Suite

大江戸Ruby会議04で英語圏文化を知る手段としてRedditが紹介されていて、それからちょこちょこ読むようにしてるのですが、そのときに便利な拡張です。といっても、別にRedditに書き込みしてるわけじゃなくて、同じページで画像が見られるとか、ちょっとした機能しかつかってません。それでも、日本からだとRedditの表示は結構遅いので重宝します。