The basic architecture of Capybara

Transcript

1. Capybara のしくみ Capybara のしくみ 裏側も⾒てみなイカ？ 裏側も⾒てみなイカ？ by @yucao24hours
2. ゆかお( ゆかお( ) is… ) is… 永和システムマネジメント所属、7 年⽬ よちよち.rb という初学者限定の Ruby コミュニテ ィを主催している（していた） @yucao24hours @yucao24hours
3. ゆかお( ゆかお( ) is… ) is… テストが好き、テストコードが好き 趣味: 筋トレ、e スポーツ観戦 @yucao24hours @yucao24hours
4. この発表のきっかけ この発表のきっかけ お仕事中のとあるタスク
5. “Capybara を使った E2E テストで、 Headless Chrome を使って テストを実⾏できるようセットアップする”
6. というタスクに苦戦していた後輩
7. （Capybara の DSL を使ったテストコードは ちゃんと書ける）
8. 設定をどう変えたら（書いたら）いいかわからず 困っている後輩に、 体系的に説明するための資料がほしかった。
9. 「ネットから拾った設定をコピペしてきた、 よくわかんないけど動いてるからヨシ」 っていう⼈が少なくないような気配を感じた。
10. “ もう知ってるよ” という⽅もいらっしゃるかもしれませんが、 どうぞお付き合いください ( ご意⾒、ご指摘⼤歓迎です )
11. Capybara についておさらい Capybara についておさらい
12. こんなかんじのやつ書くよね こんなかんじのやつ書くよね test "creating a Post" do visit posts_url click_on "New Post" fill_in "Title", with: @post.title fill_in "Content", with: @post.content click_on "Create Post" assert_text "Post was successfully created" click_on "Back" end
13. More about Capybara More about Capybara なぜE2E テストがたまに落ちるのか by @mtsmfm https://speakerdeck.com/mtsmfm/how-do-e2e- tests-fail-randomly
14. さっきの” タスク” に⽴ち返る さっきの” タスク” に⽴ち返る “Capybara を使った E2E テストで、 Headless Chrome を使って テストを実⾏できるようセットアッ プする”
15. Headless Chrome? Headless Chrome?
16. Headless Chrome Headless Chrome ウェブブラウザのひとつである、「あの」 Chrome （の、ヘッドレスバージョン）のこと。
17. Browsers Browsers
18. Headless?? Headless?? ざっくり⾔うと、 GUI を持たないアーキテクチャのこと。 GUI があるものより実⾏速度が速い。
19. Capybara も、私たちがやっているのとおなじように ブラウザを介してアプリケーションを操作する！
20. では、Capybara はどうやって Headless Chrome ( ブラウザ) を操作している？
21. Drivers Drivers
22. Drivers Drivers ブラウザを操作するためのライブラリ （何も⾔っていない）
23. Drivers Drivers RackTest Selenium Apparition Cuprite …Or your own drivers
24. なんでこんないろいろあるの なんでこんないろいろあるの それぞれ特徴があって、 できることとできないことが異なる アプリケーションにあわせて選べるようになっている
25. たとえば… たとえば… RackTest は JS を使った処理の実⾏はできない 最近のアプリだとだいたい JS つかってるからあ んまり⾒ないかも Selenium は JS を実⾏できる Apparition は Poltergeist という別のドライバと互 換性を保つようにして作られている
26. Capybara の設定次第では、 JS が必要ないテストケースでは、JS は実⾏できな いがより実⾏速度が速い RackTest を使う JS が必要なテストケースでは、JS を実⾏可能な Selenium を使う みたいなカスタマイズもできる
27. さっきの” タスク” に⽴ち返る さっきの” タスク” に⽴ち返る “Capybara を使った E2E テストで、 Headless Chrome を使って テストを実⾏できるようセットアッ プする”
28. Capybara のドライバ設定例 Capybara のドライバ設定例 Capybara.register_driver :my_driver do |app| Capybara::Selenium::Driver.new(app, browser: :chrome, desired_capabilities: Selenium::WebDriver::Remote::Capabiliti chrome_options: { args: %w(headless disable-gpu window-size=1680,1050), }, ) ) end Capybara.javascript_driver = :my_driver
29. という API を使って、 という名前をつけてドライバを定義し… Capybara.register_driver :my_driver do |app| Capybara::Selenium::Driver.new(app, browser: :chrome, desired_capabilities: Selenium::WebDriver::Remote::Capabiliti chrome_options: { args: %w(headless disable-gpu window-size=1680,1050), }, ) ) end
30. その という名前のドライバを、 JS ⽤のドライバとして設定 Capybara.javascript_driver = :my_driver
31. Browsers Browsers Drivers Drivers
32. 今⽇話したことのまとめ 今⽇話したことのまとめ Capybara でテストコードを動かすにあたっては、 ブラウザとドライバという要素の理解が重要である ブラウザにもドライバにもいろいろな種類があっ て、それぞれ特徴がある
33. 詳細については、各ライブラリの説明を参照のこと https://github.com/teamcapybara/capybara https://github.com/rack-test/rack-test https://www.seleniumhq.org/projects/webdriver/ https://github.com/twalpole/apparition
34. お役に⽴てたなら嬉しいです
35. Fin. Fin.