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
570
ココがすごいぜ!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
50
ErrorBoundaryとSuspenseの導入検討
rakus_fe
1
780
日付をもう少し真面目に勉強中
rakus_fe
0
45
React19 β をざっと見る
rakus_fe
0
330
Reactのパフォーマンス改善例
rakus_fe
0
540
Typescript5.4の新機能
rakus_fe
0
320
非破壊的な配列メソッド
rakus_fe
0
380
スプレッドシートのセル結合がつらいので足掻いてみた話
rakus_fe
0
270
Other Decks in Technology
See All in Technology
それぞれのペースでやっていく Bet AI / Bet AI at Your Own Pace
yuyatakeyama
1
680
【インシデント入門】サイバー攻撃を受けた現場って何してるの?
shumei_ito
0
1.2k
Amazon S3 Vectorsを使って資格勉強用AIエージェントを構築してみた
usanchuu
1
100
【NGK2026S】日本株のシステムトレードに入門してみた
kazuhitotakahashi
0
220
AIとともに歩む情報セキュリティ / Information Security with AI
kanny
4
2.8k
BiDiってなんだ?
tomorrowkey
2
510
Databricks Free Edition講座 データサイエンス編
taka_aki
0
240
しろおびセキュリティへ ようこそ
log0417
0
200
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
1k
入社1ヶ月でデータパイプライン講座を作った話
waiwai2111
1
200
IaaS/SaaS管理における SREの実践 - SRE Kaigi 2026
bbqallstars
0
180
Werner Vogelsが14年間 問い続けてきたこと
yusukeshimizu
2
260
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.6k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
helenjbeal
1
100
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
110
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
aleyda
1
1.9k
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
170
Designing Powerful Visuals for Engaging Learning
tmiket
0
210
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
65
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
0
99
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
120
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
1
110
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 ͷՄೳੑແݶେʂ