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
360
ココがすごいぜ!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
28
ErrorBoundaryとSuspenseの導入検討
rakus_fe
0
390
日付をもう少し真面目に勉強中
rakus_fe
0
21
React19 β をざっと見る
rakus_fe
0
250
Reactのパフォーマンス改善例
rakus_fe
0
370
Typescript5.4の新機能
rakus_fe
0
230
非破壊的な配列メソッド
rakus_fe
0
290
スプレッドシートのセル結合がつらいので足掻いてみた話
rakus_fe
0
160
Other Decks in Technology
See All in Technology
Julia 新 LTS v1.10 解説 for JuliaTokai #20
antimon2
1
100
Oracle Cloud Infrastructure:2024年10月度サービス・アップデート
oracle4engineer
PRO
0
290
エンジニアのドメイン知識獲得コストを低減するアプリケーションデザイン
ryo_nagata_
3
180
Vue.js、Nuxtの機能を使い、 大量のコピペコードをリファクタリングする
igayamaguchi
3
1.7k
Deep dive into Nuxt Server Components
wattanx
1
1.5k
JBoss EAPによるクラウドネイティブのススメ
chiroito
0
150
今日から始める技術的負債の解消
leveragestech
3
460
Nuxt × Vue Router の力を最大限に引き出す機能を紹介
ytr0903
2
480
最新のAIツールは何を解決しようとしているのか - Python エンジニアが取り組むべき "越境" とは - / Python-Engineer-in-AI-Era
iktakahiro
1
110
Rist_Meetup_Kaggleは業務の役にたつ - ビジネスコンテンツ情報を活用する BtoB 事業編 - / rist-meetup-20241012
taro_masuda
1
370
サーバーレス SaaS における運用監視の負荷軽減のためのアプローチ
ririru0325
0
100
まだ間に合う! 生成AIトレンド一挙おさらい & AWSのBedrockに入門しよう
minorun365
PRO
4
370
Featured
See All Featured
Practical Orchestrator
shlominoach
186
10k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.5k
Unsuck your backbone
ammeep
668
57k
Building Applications with DynamoDB
mza
90
6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
5
130
Fireside Chat
paigeccino
32
3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
327
21k
Writing Fast Ruby
sferik
626
60k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
23k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
4.9k
Designing for Performance
lara
604
68k
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 ͷՄೳੑແݶେʂ