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
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
rakus frontend
April 17, 2024
Technology
630
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
56
ErrorBoundaryとSuspenseの導入検討
rakus_fe
1
820
日付をもう少し真面目に勉強中
rakus_fe
0
56
React19 β をざっと見る
rakus_fe
0
360
Reactのパフォーマンス改善例
rakus_fe
0
590
Typescript5.4の新機能
rakus_fe
0
350
非破壊的な配列メソッド
rakus_fe
0
420
スプレッドシートのセル結合がつらいので足掻いてみた話
rakus_fe
0
290
Other Decks in Technology
See All in Technology
螺旋型キャリアの生存戦略 / kinoko-conf2026
rakus_dev
1
1.2k
起点・思考・出力で分解する 〜PM業務の自動化設計〜
kazu_kichi_67
2
1.1k
ご挨拶「10周年を迎える共創ラボのこれまでとこれから」
iotcomjpadmin
0
150
自分が詳しくない領域でAIを使う #プロヒス2026
konifar
20
7.9k
2026 AI Memory Architecture
nagatsu
0
550
徹底討論!ECS vs EKS!
daitak
3
1.8k
40代で“やっとエンジニアになれた”――閉じた学びを開き、空の青さを知る / 20260628 Naoki Takahashi
shift_evolve
PRO
4
1.1k
飲食店もAIで。レジ締めやハンディシステムをつくってる話 / Using AI for restaurant management
vtryo
0
200
FPC(フレキシブル)基板にZephyr実装してみた。
iotengineer22
0
180
“詰む”前に仕組みを作れ 〜技術の波に溺れないためのキャッチアップ術〜
takasyou
7
4.3k
いまさら聞けない「仕様駆動開発入門」 〜AI活用時代の開発プロセスを考える〜
findy_eventslides
2
230
AI-DLCを “そのまま導入しなかった”話 ~組織に合わせてアジャストした 私たちの実践共有~
hiroramos4
PRO
1
440
Featured
See All Featured
Visualization
eitanlees
152
17k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
38
2.9k
Between Models and Reality
mayunak
4
350
Claude Code のすすめ
schroneko
67
230k
Designing for humans not robots
tammielis
254
26k
Everyday Curiosity
cassininazir
0
240
Information Architects: The Missing Link in Design Systems
soysaucechin
0
980
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
23k
30 Presentation Tips
portentint
PRO
1
330
The Spectacular Lies of Maps
axbom
PRO
1
820
Fireside Chat
paigeccino
42
4k
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
5
1.1k
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 ͷՄೳੑແݶେʂ