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
Rails のブラウザテストを Playwright で動かすようにしたらデバッグが簡単になっ...
Search
Tomoya Chiba
November 02, 2023
Technology
3
3.1k
Rails のブラウザテストを Playwright で動かすようにしたらデバッグが簡単になって捗った
Omotesando.rb #91 (
https://omotesandorb.connpass.com/event/299381/
) で発表した資料です。
Tomoya Chiba
November 02, 2023
Tweet
Share
More Decks by Tomoya Chiba
See All by Tomoya Chiba
スポンサーブース用の ruby.wasm くじを vibe coding した話
tomoasleep
0
94
東京Ruby会議12ヘルパー楽しかった✌
tomoasleep
0
130
rbs-inline 生成してみた
tomoasleep
1
320
LiveShare で森羅万象を共同編集する(?)
tomoasleep
1
690
GitHub Actions による RSpec の時間を半分以上短縮した話
tomoasleep
2
1.4k
ts-morph と ast-grep でたくさんの TypeScript コードを書き換えた話
tomoasleep
4
3.9k
render 出来るオブジェクトの作り方
tomoasleep
0
240
Rails アプリを10年以上継続していくためのフロントエンドの底上げ
tomoasleep
3
990
Sorbetやっていき(たい)宣言
tomoasleep
0
450
Other Decks in Technology
See All in Technology
ZOZOのAI活用実践〜社内基盤からサービス応用まで〜
zozotech
PRO
0
150
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
3
250
実装で解き明かす並行処理の歴史
zozotech
PRO
1
300
BtoBプロダクト開発の深層
16bitidol
0
170
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
1
840
GopherCon Tour 概略
logica0419
2
170
Pure Goで体験するWasmの未来
askua
1
170
Oracle Cloud Infrastructure:2025年9月度サービス・アップデート
oracle4engineer
PRO
0
370
#普通の文系サラリーマンチャレンジ 自分でアプリ開発と電子工作を続けたら人生が変わった
tatsuya1970
0
940
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
260
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
130
自作LLM Native GORM Pluginで実現する AI Agentバックテスト基盤構築
po3rin
2
240
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Statistics for Hackers
jakevdp
799
220k
KATA
mclloyd
32
14k
The Cost Of JavaScript in 2023
addyosmani
53
9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
How STYLIGHT went responsive
nonsquared
100
5.8k
What's in a price? How to price your products and services
michaelherold
246
12k
Balancing Empowerment & Direction
lara
4
670
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
Transcript
Tomoya Chiba (@tomoasleep) Rails のブラウザテストを Playwright で動かすよう にしたらデバッグが簡単になって捗った 1
千葉 知也 (@tomoasleep) Qiita 株式会社 エンジニア SNS (?) https://twitter.com/nemunemu3desu https://qiita.com/tomoasleep
今日は Kaigi Effect をうけて(?) LT しにきました 自己紹介 2
アンケートします 3
Rails のブラウザテスト (System Spec, Feature Spec, ...) 書いてる人 4
一部のページで導入 壊れると非常に困るページ ( 登録フロー、ログイン、記事ページ、エディタ, ...etc) フロントエンドが複雑な箇所 ( 年々複雑になってきているので、もうちょっとテスト増やしたい…) ブラウザテストには Feature
Spec を使用 Qiita におけるブラウザテスト 5
独特の記法 (Capybara の DSL) に慣れない 時々よくわからない理由で落ちる 落ちたときのデバッグが難しい Rails ブラウザテストでの課題 6
テストを書けるメンバーを増やしにくい 独特の記法 (Capybara の DSL) に慣れない 書いたテストをメンテナンスしていく上で困る 時々落ちる 落ちたときのデバッグが難しい Rails
ブラウザテストでの課題 ( 分類 ) 7
テストを書けるメンバーを増やしにくい 独特の記法 (Capybara の DSL) に慣れない 書いたテストをメンテナンスしていく上で困る 時々落ちる 落ちたときのデバッグが難しい Rails
ブラウザテストでの課題 ( 分類 ) 8
いわゆる Flaky Test がブラウザテストで多い 色々な理由で落ちることがある wait する時間が短すぎる 不安定なテストデータ その他 困ること
(1): 時々落ちる 9
単にテスト結果を見るだけだと、原因が把握しにくい 特に CI で落ちたときに難しい 場合によっては、ローカルで再現出来ないことがある ただ不安定ならまだ良いが ( 良くないが) 違うと 地獄のデバッグ
が始まる ことになる… 困ること (2): デバッグが難しい 10
Rails ブラウザテストは課題が山積み 11
つ https://playwright.dev/ Microsoft 製のブラウザテストツール つらみを解決しているツールはないか? 12
Playwright は Trace viewer でテストの状況をリプレイすることが可能 (Cypress なども近い機能はある) Playwright の Trace
Viewer が便利 13
Console log も見れる Playwright の Trace Viewer が便利 14
Network Request も見れる (Request, Response ももちろん見れる) Playwright の Trace Viewer
が便利 15
Ruby 用クライアントが開発されている playwright-ruby-client capybara-playwright-driver # こんな感じで書ける page.goto("/tests/#{user.id}") page.wait_for_selector('input').type('hoge') page.keyboard.press('Enter') expect(page.text_content('#content')).to
include('hoge') Playwright を Rails で動かす 16
capybara-playwright-driver を使えば、コードはほぼそのまま に導入可能 Capybara Driver でコードほぼそのままで導入可能 17
RSpec.describe "Todos", type: :system do before do driven_by(:playwright) end #
... end Rails 7.1 で capybara-playwright-driver を使う設定が System Test に組み込まれ た Add support for Playwright as a driver for system tests by yuki24 · Pull Request #48950 · rails/rails Rails 7.1 で System Test に設定が組み込まれた 18
2~3 日程度の作業で移行完了 一部挙動が違う部分を書き換えた程度で、ほぼそのまま移行できた Playwright を導入 19
落ちたテストの Trace を自動で保存するように設定した 設定方法は Rails のブラウザテストを Playwright で動かすようにしたらデバ ッグが簡単になって捗った #Ruby
- Qiita 落ちたテストの Trace を自動保存するようにした 20
CI で落ちたテストの状況を手元で確認できるようになった ※ Action などが一部分かりにくい部分がある (Capybara 経由のため) CI で落ちたテストのデバッグが容易になった 21
落ちたテストのデバッグが容易になった テストの落ちる頻度が体感減った(?) ( が、色んな改善を同時にやっていたので、Playwright だけの効果かは不明) → 少ない工数でブラウザテストのつらい部分を改善できた 移行の効果 22
テストを書けるメンバーを増やしにくい 独特の記法 (Capybara の DSL) に慣れない → 未解消 書いたテストをメンテナンスしていく上で困る 時々落ちる
→ 解消 (?) 落ちたときのデバッグが難しい → 解消 元々の課題に立ち返る 23
将来的には Node.js ベースへの移行もあり? 24
将来的には Node.js ベースへの移行もあり? 25
将来的には Node.js ベースへの移行もあり? 26
Kaigi on Rails で 「Playwright で Rails 資産を使いつつ JS でブラウザテストす
る」手法が紹介されていた https://kaigionrails.org/2023/talks/YusukeIwaki/ https://speakerdeck.com/yusukeiwaki/kaigionrails2023pub Node.js ベースだと、いろいろメリットがある 公式ドキュメント (https://playwright.dev/) を参考文献として使える VSCode 拡張 (https://playwright.dev/docs/getting-started-vscode) の恩恵を 受けられる 画面を触りながらテスト生成、テスト実行、デバッグなど、 将来的には Node.js ベースへの移行もあり? 27
俺たちの Kaigi Effect はこれからだ (?) 28
https://qiita.com/advent-calendar/2023 CM (1): Advent Calendar 2023 オープン 29
社員みんなでもりもり書いていきます https://qiita.com/advent-calendar/2023/qiita-inc CM (1'): Qiita 社 Advent Calendar もやります 30
オンラインLT イベントで、登壇者と参加者募集中です!! Qiita のエンジニアも話します 詳しくは https://increments.connpass.com/event/297116/ CM (2): Qiita 主催の
LT イベントがあります 31
Qiita に書いた記事 Rails のブラウザテストを Playwright で動かすようにしたらデバッグが簡単に なって捗った #Ruby - Qiita
(https://qiita.com/tomoasleep/items/71b792cb2f89235db1ca) サンプル実装: https://github.com/tomoasleep/rails-sample-with-playwright playwright-ruby-client 作者の解説記事 https://yusukeiwaki.hatenablog.com/entry/2021/05/18/capybara- playwright-driver E2E testing on Rails https://speakerdeck.com/yusukeiwaki/kaigionrails2023pub Further Reading 32