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
3k
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
83
東京Ruby会議12ヘルパー楽しかった✌
tomoasleep
0
110
rbs-inline 生成してみた
tomoasleep
1
300
LiveShare で森羅万象を共同編集する(?)
tomoasleep
1
670
GitHub Actions による RSpec の時間を半分以上短縮した話
tomoasleep
2
1.4k
ts-morph と ast-grep でたくさんの TypeScript コードを書き換えた話
tomoasleep
4
3.9k
render 出来るオブジェクトの作り方
tomoasleep
0
240
Rails アプリを10年以上継続していくためのフロントエンドの底上げ
tomoasleep
3
970
Sorbetやっていき(たい)宣言
tomoasleep
0
440
Other Decks in Technology
See All in Technology
どこで動かすか、誰が動かすか 〜 kintoneのインフラ基盤刷新と運用体制のシフト 〜
ueokande
0
180
実践アプリケーション設計 ②トランザクションスクリプトへの対応
recruitengineers
PRO
2
140
サービスロボット最前線:ugoが挑むPhysical AI活用
kmatsuiugo
0
190
Browser
recruitengineers
PRO
3
260
実践アプリケーション設計 ①データモデルとドメインモデル
recruitengineers
PRO
2
200
我々は雰囲気で仕事をしている / How can we do vibe coding as well
naospon
2
220
制約理論(ToC)入門
recruitengineers
PRO
2
250
LLMエージェント時代に適応した開発フロー
hiragram
1
410
AIドリブンのソフトウェア開発 - うまいやり方とまずいやり方
okdt
PRO
9
570
退屈なことはDevinにやらせよう〜〜Devin APIを使ったVisual Regression Testの自動追加〜
kawamataryo
1
130
Devinを使ったモバイルアプリ開発 / Mobile app development with Devin
yanzm
0
180
広島発!スタートアップ開発の裏側
tsankyo
0
240
Featured
See All Featured
Scaling GitHub
holman
462
140k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
We Have a Design System, Now What?
morganepeng
53
7.7k
Automating Front-end Workflow
addyosmani
1370
200k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Typedesign – Prime Four
hannesfritz
42
2.8k
Thoughts on Productivity
jonyablonski
69
4.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
780
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