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
playwrightのVSCode拡張が便利すぎて、もはやE2E書けないとか言い訳できないレベ...
Search
TsukasaSekiguchi
March 09, 2024
Technology
0
210
playwrightのVSCode拡張が便利すぎて、もはやE2E書けないとか言い訳できないレベルだった
Gunma.web #52のLT資料です。
TsukasaSekiguchi
March 09, 2024
Tweet
Share
More Decks by TsukasaSekiguchi
See All by TsukasaSekiguchi
おれのAI活用の現状とこれから
tsukasagr
0
180
Deep Researchで積読解消!技術書キャッチアップ術
tsukasagr
0
75
v0とCursorで爆速開発🚀
tsukasagr
0
220
Prismaを1年くらい使ってみたのでちょっと語る
tsukasagr
0
220
AWS_Copilotではじめる簡単コンテナ運用.pdf
tsukasagr
0
380
SupabaseにBaaS拡大の未来を感じた
tsukasagr
0
280
超ざっくりFirebase vs Amplify
tsukasagr
0
330
NestJSがいい感じだった
tsukasagr
0
330
Slack Apps × BoltでToDoアプリ作ってみたって話のはずだったけど、周辺技術で良さそうなやつがあったのでそのへんも共有する話
tsukasagr
0
470
Other Decks in Technology
See All in Technology
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
540
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
130
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
arthur1
1
890
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
2
260
Claude Code でアプリ開発をオートパイロットにするためのTips集 Zennの場合 / Claude Code Tips in Zenn
wadayusuke
1
150
20250912_RPALT_データを集める→とっ散らかる問題_Obsidian紹介
ratsbane666
0
100
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
450
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
220
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1.1k
LLM時代のパフォーマンスチューニング:MongoDB運用で試したコンテキスト活用の工夫
ishikawa_pro
0
170
「Linux」という言葉が指すもの
sat
PRO
4
140
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
190
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
What's in a price? How to price your products and services
michaelherold
246
12k
Embracing the Ebb and Flow
colly
87
4.8k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
How to Ace a Technical Interview
jacobian
279
23k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Statistics for Hackers
jakevdp
799
220k
It's Worth the Effort
3n
187
28k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Transcript
playwrightの VSCode拡張が便利すぎ て、もはやE2E書けないと か言い訳できないレベルだ った Gunma.web #52 @TsukasaGR
自己紹介 名前 関⼝ 司 各種アカウント TsukasaGR 仕事 SIer でSaaS 開発 最近触っているもの
TypeScript / React / Next.js / NestJS / Prisma / GraphQL / AWS CDK
先にまとめ: 1番伝えたいこと playwright のVSCode 拡張が便利すぎて「私E2E 書いたこと無いんで。。」という ⾔い訳が通じなくなりつつあるので皆さん気をつけましょう⚠
おことわり 私はplaywright を少しだけ使ったことはあるものの、プロダクト/ プロジェク トでE2E を書いたことは⼀度もありません そのため、あくまで初⼼者の「やってみた」レベルの域を出ない内容である ことをご了承ください
playwrightとは? Microsoft によって開発されたオープンソースのテスト⾃動化ツール 以下のような特徴を持つ クロスブラウザテスト ヘッドレスモード SPA のサポート リッチなAPI ⾃動待機
playwrightは導入のハードルが低い î インストールがめちゃくちゃ楽 1. こちらにある通り、 yarn create playwright するだけで完了 単体でも⼗分便利
2. ヘッドレスでもUI ありでも簡単にテストできる 実⾏ブラウザの指定も簡単 codegen で操作内容をGUI から作成できる
さらにVSCode拡張を利用したらとんでも ないことになる Ķ ⾔葉はいらないのでデモしますĶĶĶ
とは言えすぐにみんなが導入できるわけで はない ⾮常に導⼊は簡単になったものの、それでもまだまだ実際のプロダクト/ プロジェクトで本格導⼊するにはい くつかハードルがあると思います。 GUI ベースの単純なアサーションだけではやりたいテストができない 認証がSNS うまく⾮同期を待ってくれない CI
環境を整えないといけない etc…
それでもE2E導入のハードルは劇的に下が ったはず 1 テストピラミッドの定⽯は「できる限りE2E に頼らず単体、結合テストでカバーする」だとは思いますが、 それでもE2E テストが必要な場⾯は多くのプロダクト/ プロジェクトで出てくると思います。 もしE2E に⼀⾜踏み出せない⽅はぜひplaywright
x VSCode でその⼀歩⽬を踏み出して⾒てください!
ご清聴ありがとうございました