Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The basic architecture of Capybara

Yuka Kato
November 03, 2019

The basic architecture of Capybara

Yuka Kato

November 03, 2019
Tweet

More Decks by Yuka Kato

Other Decks in Programming

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.