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
470
ココがすごいぜ!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
42
ErrorBoundaryとSuspenseの導入検討
rakus_fe
1
680
日付をもう少し真面目に勉強中
rakus_fe
0
34
React19 β をざっと見る
rakus_fe
0
290
Reactのパフォーマンス改善例
rakus_fe
0
460
Typescript5.4の新機能
rakus_fe
0
270
非破壊的な配列メソッド
rakus_fe
0
330
スプレッドシートのセル結合がつらいので足掻いてみた話
rakus_fe
0
210
Other Decks in Technology
See All in Technology
GigaViewerにおけるMackerel APM導入の裏側
7474
0
150
Streamline Cloud-Native App Development Using CDEs
saeedzf
0
520
Oracle Database オプティマイザ・ヒントの活用
oracle4engineer
PRO
1
120
GitHub Coding Agent 概要
kkamegawa
1
810
テストを実施する前に考えるべきテストの話 / Thinking About Testing Before You Test
nihonbuson
PRO
11
1.8k
Machine Intelligence for Vision, Language, and Actions
keio_smilab
PRO
0
210
ソフトウェアは捨てやすく作ろう/Let's make software easy to discard
sanogemaru
3
800
ITエンジニアを取り巻く環境とキャリアパス / A career path for Japanese IT engineers
takatama
3
1.5k
AWS パートナー企業のテクニカルサポートが日々思っていること 〜そして、4/15 の現場から〜
kazzpapa3
2
390
主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義
tiroljpn
1
220
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
大事なのは、AIの精度だけじゃない!〜1円のズレも許されない経理領域とAI〜
jun_nemoto
9
4.6k
Featured
See All Featured
Producing Creativity
orderedlist
PRO
345
40k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
640
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Into the Great Unknown - MozCon
thekraken
38
1.8k
How to Think Like a Performance Engineer
csswizardry
23
1.6k
A Modern Web Designer's Workflow
chriscoyier
693
190k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Building Adaptive Systems
keathley
41
2.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Designing Experiences People Love
moore
142
24k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
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 ͷՄೳੑແݶେʂ