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
200
playwrightのVSCode拡張が便利すぎて、もはやE2E書けないとか言い訳できないレベルだった
Gunma.web #52のLT資料です。
TsukasaSekiguchi
March 09, 2024
Tweet
Share
More Decks by TsukasaSekiguchi
See All by TsukasaSekiguchi
おれのAI活用の現状とこれから
tsukasagr
0
150
Deep Researchで積読解消!技術書キャッチアップ術
tsukasagr
0
57
v0とCursorで爆速開発🚀
tsukasagr
0
210
Prismaを1年くらい使ってみたのでちょっと語る
tsukasagr
0
200
AWS_Copilotではじめる簡単コンテナ運用.pdf
tsukasagr
0
370
SupabaseにBaaS拡大の未来を感じた
tsukasagr
0
270
超ざっくりFirebase vs Amplify
tsukasagr
0
320
NestJSがいい感じだった
tsukasagr
0
320
Slack Apps × BoltでToDoアプリ作ってみたって話のはずだったけど、周辺技術で良さそうなやつがあったのでそのへんも共有する話
tsukasagr
0
460
Other Decks in Technology
See All in Technology
Delegating the chores of authenticating users to Keycloak
ahus1
0
130
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
580
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
210
ドメイン特化なCLIPモデルとデータセットの紹介
tattaka
1
350
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
nyata
0
330
Connect 100+を支える技術
kanyamaguc
0
140
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
330
AI専用のリンターを作る #yumemi_patch
bengo4com
2
680
2025-06-26 GitHub CopilotとAI駆動開発:実践と導入のリアル
fl_kawachi
1
220
Witchcraft for Memory
pocke
1
650
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1k
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
300
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
35
6.7k
Docker and Python
trallard
44
3.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Rails Girls Zürich Keynote
gr2m
94
14k
How GitHub (no longer) Works
holman
314
140k
Designing Experiences People Love
moore
142
24k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Being A Developer After 40
akosma
90
590k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
950
Large-scale JavaScript Application Architecture
addyosmani
512
110k
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 でその⼀歩⽬を踏み出して⾒てください!
ご清聴ありがとうございました