Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The basic architecture of Capybara
Search
Yuka Kato
November 03, 2019
Programming
0
780
The basic architecture of Capybara
Yuka Kato
November 03, 2019
Tweet
Share
More Decks by Yuka Kato
See All by Yuka Kato
Understanding DNS with ActionDispatch::HostAuthorization
yucao24hours
3
1.5k
Other Decks in Programming
See All in Programming
Live Coding: Migrating an Application to Signals
manfredsteyer
PRO
0
130
CursorとDevinが仲間!?AI駆動で新規プロダクト開発に挑んだ3ヶ月を振り返る / A Story of New Product Development with Cursor and Devin
rkaga
5
1.4k
オープンソースコントリビュート入門
_katsuma
0
150
VibeCoding時代のエンジニアリング
daisuketakeda
0
270
CQRS/ESのクラスとシステムフロー ~ RailsでフルスクラッチでCQRSESを組んで みたことから得た学び~
suzukimar
0
150
Digging into the Matrix: Practicing Code Archaeology
arthurdoler
PRO
0
120
事業KPIを基に価値の解像度を上げる
nealle
0
160
クラス設計の手順
akikogoto
0
140
ソフトウェア品質特性、意識してますか?AIの真の力を引き出す活用事例 / ai-and-software-quality
minodriven
16
4.9k
一緒に働きたくなるプログラマの思想 #QiitaConference
mu_zaru
84
21k
eBPF超入門「o11yに使える」とは (20250424_eBPF_o11y)
thousanda
1
120
開発者フレンドリーで顧客も満足?Platformの秘密
algoartis
0
250
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
172
14k
The World Runs on Bad Software
bkeepers
PRO
68
11k
Optimizing for Happiness
mojombo
378
70k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
Unsuck your backbone
ammeep
671
58k
Scaling GitHub
holman
459
140k
What's in a price? How to price your products and services
michaelherold
245
12k
Art, The Web, and Tiny UX
lynnandtonic
298
21k
Navigating Team Friction
lara
185
15k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
620
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.5k
Transcript
Capybara のしくみ Capybara のしくみ 裏側も⾒てみなイカ? 裏側も⾒てみなイカ? by @yucao24hours
ゆかお( ゆかお( ) is… ) is… 永和システムマネジメント所属、7 年⽬ よちよち.rb という初学者限定の
Ruby コミュニテ ィを主催している(していた) @yucao24hours @yucao24hours
ゆかお( ゆかお( ) is… ) is… テストが好き、テストコードが好き 趣味: 筋トレ、e スポーツ観戦
@yucao24hours @yucao24hours
この発表のきっかけ この発表のきっかけ お仕事中のとあるタスク
“Capybara を使った E2E テストで、 Headless Chrome を使って テストを実⾏できるようセットアップする”
というタスクに苦戦していた後輩
(Capybara の DSL を使ったテストコードは ちゃんと書ける)
設定をどう変えたら(書いたら)いいかわからず 困っている後輩に、 体系的に説明するための資料がほしかった。
「ネットから拾った設定をコピペしてきた、 よくわかんないけど動いてるからヨシ」 っていう⼈が少なくないような気配を感じた。
“ もう知ってるよ” という⽅もいらっしゃるかもしれませんが、 どうぞお付き合いください ( ご意⾒、ご指摘⼤歓迎です )
Capybara についておさらい Capybara についておさらい
こんなかんじのやつ書くよね こんなかんじのやつ書くよね 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
More about Capybara More about Capybara なぜE2E テストがたまに落ちるのか by @mtsmfm
https://speakerdeck.com/mtsmfm/how-do-e2e- tests-fail-randomly
さっきの” タスク” に⽴ち返る さっきの” タスク” に⽴ち返る “Capybara を使った E2E テストで、
Headless Chrome を使って テストを実⾏できるようセットアッ プする”
Headless Chrome? Headless Chrome?
Headless Chrome Headless Chrome ウェブブラウザのひとつである、「あの」 Chrome (の、ヘッドレスバージョン)のこと。
Browsers Browsers
Headless?? Headless?? ざっくり⾔うと、 GUI を持たないアーキテクチャのこと。 GUI があるものより実⾏速度が速い。
Capybara も、私たちがやっているのとおなじように ブラウザを介してアプリケーションを操作する!
では、Capybara はどうやって Headless Chrome ( ブラウザ) を操作している?
Drivers Drivers
Drivers Drivers ブラウザを操作するためのライブラリ (何も⾔っていない)
Drivers Drivers RackTest Selenium Apparition Cuprite …Or your own drivers
なんでこんないろいろあるの なんでこんないろいろあるの それぞれ特徴があって、 できることとできないことが異なる アプリケーションにあわせて選べるようになっている
たとえば… たとえば… RackTest は JS を使った処理の実⾏はできない 最近のアプリだとだいたい JS つかってるからあ んまり⾒ないかも
Selenium は JS を実⾏できる Apparition は Poltergeist という別のドライバと互 換性を保つようにして作られている
Capybara の設定次第では、 JS が必要ないテストケースでは、JS は実⾏できな いがより実⾏速度が速い RackTest を使う JS が必要なテストケースでは、JS
を実⾏可能な Selenium を使う みたいなカスタマイズもできる
さっきの” タスク” に⽴ち返る さっきの” タスク” に⽴ち返る “Capybara を使った E2E テストで、
Headless Chrome を使って テストを実⾏できるようセットアッ プする”
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
という 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
その という名前のドライバを、 JS ⽤のドライバとして設定 Capybara.javascript_driver = :my_driver
Browsers Browsers Drivers Drivers
今⽇話したことのまとめ 今⽇話したことのまとめ Capybara でテストコードを動かすにあたっては、 ブラウザとドライバという要素の理解が重要である ブラウザにもドライバにもいろいろな種類があっ て、それぞれ特徴がある
詳細については、各ライブラリの説明を参照のこと https://github.com/teamcapybara/capybara https://github.com/rack-test/rack-test https://www.seleniumhq.org/projects/webdriver/ https://github.com/twalpole/apparition
お役に⽴てたなら嬉しいです
Fin. Fin.