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
2.7k
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
rbs-inline 生成してみた
tomoasleep
1
180
LiveShare で森羅万象を共同編集する(?)
tomoasleep
1
360
GitHub Actions による RSpec の時間を半分以上短縮した話
tomoasleep
2
840
ts-morph と ast-grep でたくさんの TypeScript コードを書き換えた話
tomoasleep
4
3.4k
render 出来るオブジェクトの作り方
tomoasleep
0
150
Rails アプリを10年以上継続していくためのフロントエンドの底上げ
tomoasleep
3
830
Sorbetやっていき(たい)宣言
tomoasleep
0
330
RubyKaigi に貢献したくなる組織の作り方
tomoasleep
1
700
Qiita株式会社における ChatGPT の布教と活用
tomoasleep
4
1.9k
Other Decks in Technology
See All in Technology
AWS Media Services 最新サービスアップデート 2024
eijikominami
0
200
オープンソースAIとは何か? --「オープンソースAIの定義 v1.0」詳細解説
shujisado
9
1k
Introduction to Works of ML Engineer in LY Corporation
lycorp_recruit_jp
0
130
Making your applications cross-environment - OSCG 2024 NA
salaboy
0
190
OCI Network Firewall 概要
oracle4engineer
PRO
0
4.1k
rootlessコンテナのすゝめ - 研究室サーバーでもできる安全なコンテナ管理
kitsuya0828
3
390
AGIについてChatGPTに聞いてみた
blueb
0
130
iOSチームとAndroidチームでブランチ運用が違ったので整理してます
sansantech
PRO
0
140
AWS Lambda のトラブルシュートをしていて思うこと
kazzpapa3
2
180
これまでの計測・開発・デプロイ方法全部見せます! / Findy ISUCON 2024-11-14
tohutohu
3
370
10XにおけるData Contractの導入について: Data Contract事例共有会
10xinc
6
650
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
3.2k
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
Ruby is Unlike a Banana
tanoku
97
11k
Gamification - CAS2011
davidbonilla
80
5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
Building Adaptive Systems
keathley
38
2.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Art, The Web, and Tiny UX
lynnandtonic
297
20k
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