Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
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
560
ココがすごいぜ!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
760
日付をもう少し真面目に勉強中
rakus_fe
0
44
React19 β をざっと見る
rakus_fe
0
320
Reactのパフォーマンス改善例
rakus_fe
0
530
Typescript5.4の新機能
rakus_fe
0
310
非破壊的な配列メソッド
rakus_fe
0
370
スプレッドシートのセル結合がつらいので足掻いてみた話
rakus_fe
0
260
Other Decks in Technology
See All in Technology
AWS CLIの新しい認証情報設定方法aws loginコマンドの実態
wkm2
6
710
[CMU-DB-2025FALL] Apache Fluss - A Streaming Storage for Real-Time Lakehouse
jark
0
120
会社紹介資料 / Sansan Company Profile
sansan33
PRO
11
390k
GitHub Copilotを使いこなす 実例に学ぶAIコーディング活用術
74th
3
2.9k
今年のデータ・ML系アップデートと気になるアプデのご紹介
nayuts
1
310
Lessons from Migrating to OpenSearch: Shard Design, Log Ingestion, and UI Decisions
sansantech
PRO
1
120
業務のトイルをバスターせよ 〜AI時代の生存戦略〜
staka121
PRO
2
120
Gemini でコードレビュー知見を見える化
zozotech
PRO
1
250
Ruby で作る大規模イベントネットワーク構築・運用支援システム TTDB
taketo1113
1
280
CARTAのAI CoE が挑む「事業を進化させる AI エンジニアリング」 / carta ai coe evolution business ai engineering
carta_engineering
0
690
乗りこなせAI駆動開発の波
eltociear
1
1.1k
AWS re:Invent 2025で見たGrafana最新機能の紹介
hamadakoji
0
350
Featured
See All Featured
Music & Morning Musume
bryan
46
7k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.8k
BBQ
matthewcrist
89
9.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
720
How GitHub (no longer) Works
holman
316
140k
4 Signs Your Business is Dying
shpigford
186
22k
Building Adaptive Systems
keathley
44
2.9k
Documentation Writing (for coders)
carmenintech
76
5.2k
The Cost Of JavaScript in 2023
addyosmani
55
9.3k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.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 ͷՄೳੑແݶେʂ