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
600
ココがすごいぜ!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
54
ErrorBoundaryとSuspenseの導入検討
rakus_fe
1
800
日付をもう少し真面目に勉強中
rakus_fe
0
51
React19 β をざっと見る
rakus_fe
0
340
Reactのパフォーマンス改善例
rakus_fe
0
560
Typescript5.4の新機能
rakus_fe
0
330
非破壊的な配列メソッド
rakus_fe
0
400
スプレッドシートのセル結合がつらいので足掻いてみた話
rakus_fe
0
280
Other Decks in Technology
See All in Technology
AIにより大幅に強化された AWS Transform Customを触ってみる
0air
0
210
Tour of Agent Protocols: MCP, A2A, AG-UI, A2UI with ADK
meteatamel
0
150
ブラックボックス化したMLシステムのVertex AI移行 / mlops_community_62
visional_engineering_and_design
1
240
Oracle Cloud Infrastructure(OCI):Onboarding Session(はじめてのOCI/Oracle Supportご利⽤ガイド)
oracle4engineer
PRO
2
17k
DMBOKを使ってレバレジーズのデータマネジメントを評価した
leveragestech
0
480
QA組織のAI戦略とAIテスト設計システムAITASの実践
sansantech
PRO
1
260
BFCacheを活用して無限スクロールのUX を改善した話
apple_yagi
0
130
出版記念イベントin大阪「書籍紹介&私がよく使うMCPサーバー3選と社内で安全に活用する方法」
kintotechdev
0
120
How to install a gem
indirect
0
2k
20260326_AIDD事例紹介_ULSC.pdf
findy_eventslides
0
210
パワポ作るマンをMCP Apps化してみた
iwamot
PRO
0
240
Microsoft Fabricで考える非構造データのAI活用
ryomaru0825
0
520
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.6k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
330
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
200
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
davidcarrasco
0
95
Balancing Empowerment & Direction
lara
5
1k
Mobile First: as difficult as doing things right
swwweet
225
10k
Six Lessons from altMBA
skipperchong
29
4.2k
Designing for Performance
lara
611
70k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
19k
Music & Morning Musume
bryan
47
7.1k
How to build a perfect <img>
jonoalderson
1
5.3k
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
260
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 ͷՄೳੑແݶେʂ