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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
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実践者」になるまでのリアル / SRE Kaigi 2026
aeonpeople
6
2.5k
Agile Leadership Summit Keynote 2026
m_seki
1
670
ブロックテーマ、WordPress でウェブサイトをつくるということ / 2026.02.07 Gifu WordPress Meetup
torounit
0
200
usermode linux without MMU - fosdem2026 kernel devroom
thehajime
0
240
AIエージェントを開発しよう!-AgentCore活用の勘所-
yukiogawa
0
190
AI駆動開発を事業のコアに置く
tasukuonizawa
1
360
【Ubie】AIを活用した広告アセット「爆速」生成事例 | AI_Ops_Community_Vol.2
yoshiki_0316
1
120
Cloud Runでコロプラが挑む 生成AI×ゲーム『神魔狩りのツクヨミ』の裏側
colopl
0
140
コスト削減から「セキュリティと利便性」を担うプラットフォームへ
sansantech
PRO
3
1.6k
モダンUIでフルサーバーレスなAIエージェントをAmplifyとCDKでサクッとデプロイしよう
minorun365
4
220
Bill One急成長の舞台裏 開発組織が直面した失敗と教訓
sansantech
PRO
2
400
StrandsとNeptuneを使ってナレッジグラフを構築する
yakumo
1
130
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
196
71k
Ethics towards AI in product and experience design
skipperchong
2
200
Between Models and Reality
mayunak
1
190
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.8k
Technical Leadership for Architectural Decision Making
baasie
2
250
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
150
Making the Leap to Tech Lead
cromwellryan
135
9.7k
Evolving SEO for Evolving Search Engines
ryanjones
0
130
Mobile First: as difficult as doing things right
swwweet
225
10k
Money Talks: Using Revenue to Get Sh*t Done
nikkihalliwell
0
150
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
mfonobong
2
280
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
750
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 ͷՄೳੑແݶେʂ