capybara + poltergeist な構成で、各種ブラウザへのイベントはどのように phantom js へ送られるかをソースコードを追って見る。

1. click
呼ぶとどうなるん？
capybara + poltergeist ( + phantomjs ) の場合
atsushi.yasuda@crowdworks.co.jp

2. 自己紹介
• Crowdworks
• 元々はテストエンジニア
• ちょっと前まではゲーム作ってた
• 興味ある技術: prolog, Haxe, elm-lang

3. ネタバレ・このバグの誰か直して…

4. いつも RSpec 中などでこんな風に使っている
click や visit と言ったメソッド群は

5. Capybara::Session の定数として
NODE, DOCUMENt, SESSION のメソッドをまとめた
DSL_METHOD って名前で登録されていて

6. Capybara::DSL でこんな風にメソッド作られているので

7. include すると使えます。

8. で、やっていることは、 current_session の同名メソッド呼び出しです。

9. current_session は capybara.rb に実装されていますが、
app は rack アプリ current_driver は Capybara::Driver のインスタンスです。
と、いうわけで Capybara::Session のインスタンスが visit や click を持っている訳ですね。

10. ちなみに Session は初期化のタイミングでテスト対象のラックアプリを立ち上げます。

11. まぁ、こんな感じで。

12. さて、実際のところ、Capybara::Session は
DSL_METHODS のうち SESSION_METHOD のみを実装してます。
NODE_METHODS と DOCUMENT_METHODS は

13. こんな風にして、インスタンス変数へ送ってやっています。
ここの current_scope と document は各ドライバのインスタンスですね。

14. こんな感じで、ドライバは node を実装しているので、
ここから先は driver の話となります。

15. いきなり Capybara::Poltergeist::Node にいきたいのですが、
その前に Poltergeist::Driver の初期化について。
Poltergeist ドライバは内部に app, server, client とかが見えるとおもいます。
app は rack アプリですが、 server や client は
Poltergeist 独自のもの。

16. server はこんな感じ。 Poltergeist は中で WebSocketServer を立ち上げます。

17. client は PhantomJS をラップした javascript アプリケーション

18. つまり、Capybara::Driver の実装である Poltergeist は、click とかを呼ばれると

19. こんな風に、Polteregesit 内部の WebSocket サーバーに click というコマンドを積んで

20. PhantomJS を操る javascript アプリケーションがそれを受け取り

21. なんやかんやで js のこの辺に行き着くと言う訳です。
で、やることは scroll して、
絶対座標をとって、ブラウザの絶対座標に click イベントを送る、と。

22. mouseEvent はこんな感じで、
マウスの座標を動かして、実際のイベントを送る

23. sendEvent はこう実装されていて、
ここの this._native が phantomJS なので、イベントが発火する訳です。

24. さて、先ほどみた mouseEvent 。
この 47 行目と 51 行目の間にノードがアニメーションして、
位置がずれているケースがあります。
この場合、座標に基づく click は成功しますが、ノードへの click は失敗します。
このケースは、capybara, poltergeist, phantomjs のデバッグログを見ても、
全て正常に見えますが、直接 console.log を挟んで座標を見るとわかります。

25. そんな訳で、昨年3月くらいからレアケースとしてこんなバグがありますが、
まだ解決していません。

26. crowdworks では、このバグを直せるエンジニアを募集しております。