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
640
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
ココがすごいぜ!Playwright Component Test
rakus frontend
April 17, 2024
More Decks by rakus frontend
See All by rakus frontend
新卒FEが1年目に取り組んだこと・学んだこと
rakus_fe
0
59
ErrorBoundaryとSuspenseの導入検討
rakus_fe
1
840
日付をもう少し真面目に勉強中
rakus_fe
0
57
React19 β をざっと見る
rakus_fe
0
370
Reactのパフォーマンス改善例
rakus_fe
0
610
Typescript5.4の新機能
rakus_fe
0
360
非破壊的な配列メソッド
rakus_fe
0
430
スプレッドシートのセル結合がつらいので足掻いてみた話
rakus_fe
0
300
Other Decks in Technology
See All in Technology
markdown-poster Introduction
kazamori
0
400
医療の現場を変革に挑戦した半年間の軌跡 - PythonとAIで現場を変える / From Code to Care
soudai
PRO
1
640
EUDIWの枠組みを出発点に民間エコシステムの在り方を考える(OAuth/OIDC Numa (Immersion) Workshop 2026)
oidfj
PRO
0
340
どんな手を使っても絶対間に合わせるスケジューラ
asari194617
0
1.5k
Microsoft MVP プログラムを紹介するから目指す人増えてくれ
tsubakimoto_s
0
140
PdMをやめて、 "プロダクトビルダー"という 働き方に変えました / PdM to Product Builder
shikichee
0
120
全社に広がるMCPサーバーを、 どう安全に管理するか MCPass開発の舞台裏
mtpooh
3
180
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
5k
Eight Engineering Unit 紹介資料
sansan33
PRO
3
8.3k
DMMブックスのNext.js化を加速させるAI活用 / Migrating DMM Books to Next.js with AI
kentarom
0
180
暗号化?某ファイルストレージはどうなるの!? 3rd Partyとうまく付き合う秘密度ラベル設計
kasada
0
210
OAuth SPIFFE Client Authentication(OAuth/OIDC Numa (Immersion) Workshop 2026)
oidfj
PRO
0
350
Featured
See All Featured
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
630
Color Theory Basics | Prateek | Gurzu
gurzu
0
440
What’s in a name? Adding method to the madness
productmarketing
PRO
24
4.1k
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
510
[SF Ruby Conf 2025] Rails X
palkan
2
1.3k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
akashhashmi
0
450
Testing 201, or: Great Expectations
jmmastey
46
8.2k
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
280
Product Roadmaps are Hard
iamctodd
55
12k
New Earth Scene 8
popppiees
3
2.5k
Test your architecture with Archunit
thirion
2
2.4k
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
500
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 ͷՄೳੑແݶେʂ