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
74
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
研究開発と製品開発、両利きのロボティクス
youtalk
1
470
Nstockの一人目エンジニアが 3年間かけて向き合ってきた セキュリティのこととこれから〜あれから半年〜
yo41sawada
0
210
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
1
150
Language Update: Java
skrb
2
280
役割は変わっても、変わらないもの 〜スクラムマスターからEMへの転身で学んだ信頼構築の本質〜 / How to build trust
shinop
0
160
AIエージェントの活用に重要な「MCP (Model Context Protocol)」とは何か
masayamoriofficial
0
290
2025年になってもまだMySQLが好き
yoku0825
8
4.1k
AI時代にPdMとPMMはどう連携すべきか / PdM–PMM-collaboration-in-AI-era
rakus_dev
0
280
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3k
フィンテック養成勉強会#56
finengine
0
130
異業種出身エンジニアが気づいた、転向して十数年経っても変わらない自分の武器とは
macnekoayu
0
290
kubellが考える戦略と実行を繋ぐ活用ファーストのデータ分析基盤
kubell_hr
0
140
Featured
See All Featured
Facilitating Awesome Meetings
lara
55
6.5k
We Have a Design System, Now What?
morganepeng
53
7.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Unsuck your backbone
ammeep
671
58k
Designing for Performance
lara
610
69k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
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 でその⼀歩⽬を踏み出して⾒てください!
ご清聴ありがとうございました