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
58
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
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
370
AI導入の理想と現実~コストと浸透〜
oprstchn
0
160
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
690
GitHub Copilot の概要
tomokusaba
1
150
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
1
1.7k
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
1.7k
mrubyと micro-ROSが繋ぐロボットの世界
kishima
3
390
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
motoyoshi_kakaku
2
820
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
300
本が全く読めなかった過去の自分へ
genshun9
0
730
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
230
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
190
Featured
See All Featured
KATA
mclloyd
30
14k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Bash Introduction
62gerente
614
210k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Code Review Best Practice
trishagee
69
18k
Automating Front-end Workflow
addyosmani
1370
200k
Git: the NoSQL Database
bkeepers
PRO
430
65k
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 でその⼀歩⽬を踏み出して⾒てください!
ご清聴ありがとうございました