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
190
playwrightのVSCode拡張が便利すぎて、もはやE2E書けないとか言い訳できないレベルだった
Gunma.web #52のLT資料です。
TsukasaSekiguchi
March 09, 2024
Tweet
Share
More Decks by TsukasaSekiguchi
See All by TsukasaSekiguchi
おれのAI活用の現状とこれから
tsukasagr
0
110
Deep Researchで積読解消!技術書キャッチアップ術
tsukasagr
0
48
v0とCursorで爆速開発🚀
tsukasagr
0
190
Prismaを1年くらい使ってみたのでちょっと語る
tsukasagr
0
190
AWS_Copilotではじめる簡単コンテナ運用.pdf
tsukasagr
0
370
SupabaseにBaaS拡大の未来を感じた
tsukasagr
0
260
超ざっくりFirebase vs Amplify
tsukasagr
0
310
NestJSがいい感じだった
tsukasagr
0
310
Slack Apps × BoltでToDoアプリ作ってみたって話のはずだったけど、周辺技術で良さそうなやつがあったのでそのへんも共有する話
tsukasagr
0
450
Other Decks in Technology
See All in Technology
【ClickHouseMeetup】ClickHouseを活用したセキュリティログ解析AIエージェント『LogEater』とは
hssh2_bin
0
110
やさしい認証認可
minorun365
PRO
11
1.8k
ソフトウェアテストのAI活用_ver1.20
fumisuke
0
200
impressions-trying-lambda-web-adapter
junkishigaki
2
140
技術書典18結果報告
mutsumix
2
200
kintone開発組織のDevOpsへの移り変わりと実践
ueokande
1
270
不安定だったテストが信頼を取り戻すまで / The Road to Trustworthy Tests
katawara
0
120
Web Intelligence and Visual Media Analytics
weblyzard
PRO
1
6.1k
Cursor Meetup Tokyo
iamshunta
5
1.4k
これでバッチリ!Azure マルチテナントアーキテクチャ設計のコツ/jat06
thara0402
0
160
Spring for GraphQLって実際どうなの?〜小規模スタートアップの事例紹介〜
kogayushi
0
140
医療業界に特化した音声認識モデル構築のためのアノテーションの実態
thickstem
0
400
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
Site-Speed That Sticks
csswizardry
9
610
Practical Orchestrator
shlominoach
188
11k
A better future with KSS
kneath
239
17k
Fireside Chat
paigeccino
37
3.5k
For a Future-Friendly Web
brad_frost
178
9.8k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
How STYLIGHT went responsive
nonsquared
100
5.6k
We Have a Design System, Now What?
morganepeng
52
7.6k
Bash Introduction
62gerente
614
210k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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 でその⼀歩⽬を踏み出して⾒てください!
ご清聴ありがとうございました