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 Component Test
Search
rakus frontend
April 17, 2024
Technology
0
580
ココがすごいぜ!Playwright Component Test
rakus frontend
April 17, 2024
Tweet
Share
More Decks by rakus frontend
See All by rakus frontend
新卒FEが1年目に取り組んだこと・学んだこと
rakus_fe
0
51
ErrorBoundaryとSuspenseの導入検討
rakus_fe
1
780
日付をもう少し真面目に勉強中
rakus_fe
0
46
React19 β をざっと見る
rakus_fe
0
330
Reactのパフォーマンス改善例
rakus_fe
0
550
Typescript5.4の新機能
rakus_fe
0
320
非破壊的な配列メソッド
rakus_fe
0
380
スプレッドシートのセル結合がつらいので足掻いてみた話
rakus_fe
0
270
Other Decks in Technology
See All in Technology
SRE Enabling戦記 - 急成長する組織にSREを浸透させる戦いの歴史
markie1009
0
170
インフラエンジニア必見!Kubernetesを用いたクラウドネイティブ設計ポイント大全
daitak
1
390
日本の85%が使う公共SaaSは、どう育ったのか
taketakekaho
1
240
顧客の言葉を、そのまま信じない勇気
yamatai1212
1
360
コンテナセキュリティの最新事情 ~ 2026年版 ~
kyohmizu
6
1.9k
Tebiki Engineering Team Deck
tebiki
0
24k
Frontier Agents (Kiro autonomous agent / AWS Security Agent / AWS DevOps Agent) の紹介
msysh
3
190
モダンUIでフルサーバーレスなAIエージェントをAmplifyとCDKでサクッとデプロイしよう
minorun365
4
220
配列に見る bash と zsh の違い
kazzpapa3
3
170
Bill One急成長の舞台裏 開発組織が直面した失敗と教訓
sansantech
PRO
2
400
OCI Database Management サービス詳細
oracle4engineer
PRO
1
7.4k
~Everything as Codeを諦めない~ 後からCDK
mu7889yoon
3
510
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The innovator’s Mindset - Leading Through an Era of Exponential Change - McGill University 2025
jdejongh
PRO
1
94
Tips & Tricks on How to Get Your First Job In Tech
honzajavorek
0
440
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
750
The Power of CSS Pseudo Elements
geoffreycrofte
80
6.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Building the Perfect Custom Keyboard
takai
2
690
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
71
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
98
The Language of Interfaces
destraynor
162
26k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
110
Getting science done with accelerated Python computing platforms
jacobtomlinson
2
120
Transcript
ίί͕εΰ͍ͥʂ Playwright Component Test
গࣗ͠ݾհ • ໊લɿ দӜ ߉ੜ • ੜ݄ɿ1999 / 12 /
22 (24) • ग़ɿಸྑݝ • ॴଐɿגࣜձࣾϥΫεɹϑϩϯτΤϯυ։ൃ՝ • ͍ͬͯΔٕज़ɿ React , TypeScript
Playwright is Կ • Microsoft͕࡞ͬͨNode.jsϕʔεͷE2EςετࣗಈԽϑϨʔϜϫʔΫ • ςετϖʔδ(ը໘)୯ҐͰߦ͏ • CypressͳͲ͕ର߅അ
ϩάΠϯͷE2Eςετͷྫ ϩάΠϯը໘ τοϓը໘
Playwright ͷऑʁ
Playwright Component Test is Կ • PlaywrightͰίϯϙʔωϯτςετ·ͰͰ͖Δػೳ • ςετΛϖʔδ୯Ґ͔Βίϯϙʔωϯτ୯Ґʹʂ •
ݱࡏExperimental (࣮ݧతػೳ)
Ͱɺίϯϙʔωϯτ(୯ମ)ςετͬͯ Playwright͡Όͳͯ͘Ͱ͖ΔΑͶʁ Jest × Testing Library ͱ͔
ͪΐͬͱͬͯʂ Playwright Component Testͷίί͕εΰ͍ͶΜʂ
Playwright Component Test ͷεΰ͍ ɾίϯϙʔωϯτ͕࣮ϒϥβͰϨϯμϦϯά͞ΕΔ ɾը໘ͷαΠζΛࢦఆͰ͖Δ ɾλΠϜκʔϯݴޠΛࢦఆͰ͖Δ
ίϯϙʔωϯτ͕࣮ϒϥβͰϨϯμϦϯά͞ΕΔ JSDom
Playwright Component Test ͷεΰ͍ ɾίϯϙʔωϯτ͕࣮ϒϥβͰϨϯμϦϯά͞ΕΔ ɾը໘ͷαΠζΛࢦఆͰ͖Δ ɾλΠϜκʔϯݴޠΛࢦఆͰ͖Δ
ը໘αΠζΛࢦఆͰ͖Δ ϨεϙϯγϒͳαΠυόʔ WindowͷWidthHeightɺresizeΠϕϯτͳ ͲΛࣗ࡞͢Δඞཁ͋Γ (※ ͔ͳΓࠔ)
Playwright Component Test ͷεΰ͍ ɾίϯϙʔωϯτ͕࣮ϒϥβͰϨϯμϦϯά͞ΕΔ ɾը໘ͷαΠζΛࢦఆͰ͖Δ ɾλΠϜκʔϯݴޠΛࢦఆͰ͖Δ
λΠϜκʔϯݴޠΛࢦఆͰ͖Δ ຊޠ ver ӳޠ ver ςετ͕ࠔ खಈVRTͰ֬ೝ͢Δͷ͕ແ
·ͱΊ • खಈͰ֬ೝ͍ͯͨ͠Α͏ͳίϯϙʔωϯτςετʹ͑Δʂ • JestͳͲͱ͍͚Δ͜ͱ͕େࣄʂ • Playwright Component Test ͷՄೳੑແݶେʂ