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
690
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.4k
Other Decks in Programming
See All in Programming
スクラムマスターって孤独じゃないですか?
yoshitaroyoyo
1
140
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
Advanced App Shrinking Techniques
cbeyls
2
150
継続的な活動で築く地方エンジニアの道
myamashii
2
360
ピグパーティにおけるMongoDB CommunityバージョンからAtlasへの移行事例
10969hotaka
0
130
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
リハビリmruby
kishima
1
160
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
20240706_CDKConf
takuyay0ne
0
1.2k
How to use Macrobenchmark
veronikapj
0
160
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
310
Featured
See All Featured
Designing the Hi-DPI Web
ddemaree
276
34k
What the flash - Photography Introduction
edds
65
11k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
Into the Great Unknown - MozCon
thekraken
20
1.3k
A Tale of Four Properties
chriscoyier
155
22k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
Statistics for Hackers
jakevdp
792
220k
Practical Orchestrator
shlominoach
185
10k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
How STYLIGHT went responsive
nonsquared
93
5k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
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.