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
390
ココがすごいぜ!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
30
ErrorBoundaryとSuspenseの導入検討
rakus_fe
0
460
日付をもう少し真面目に勉強中
rakus_fe
0
25
React19 β をざっと見る
rakus_fe
0
250
Reactのパフォーマンス改善例
rakus_fe
0
380
Typescript5.4の新機能
rakus_fe
0
240
非破壊的な配列メソッド
rakus_fe
0
300
スプレッドシートのセル結合がつらいので足掻いてみた話
rakus_fe
0
170
Other Decks in Technology
See All in Technology
Nihonbashi Test Talk #3_WebDriver BiDiと最新の実装状況 / WebDriver BiDi latest status
takeyaqa
1
150
GitHub Actions의 다양한 기능 활용하기 - GitHub Universe '24 Recap
outsider
0
510
イベントをどう管理するか
mikanichinose
1
110
【AWS re:Invent 2024】Amazon Bedrock アップデート総まとめ
minorun365
PRO
7
590
間違いだらけのポストモーテム - ホントに役立つレビューはこうだ!
jacopen
5
1k
Password-less Journey - パスキーへの移行を見据えたユーザーの準備 @ AXIES 2024
ritou
0
410
多様なロール経験が導いたエンジニアキャリアのナビゲーション
coconala_engineer
1
160
GeminiとUnityで実現するインタラクティブアート
hokkey621
0
640
2024/12/05 AITuber本著者によるAIキャラクター入門 - AITuberの基礎からソフトウェア設計、失敗談まで
sr2mg4
2
570
[DevFestTokyo]Accelerating Flutter App Development Using Generative AI
korodroid
1
350
大規模サーバ移行を成功に導くための事前調査フェーズの工夫事例
fukuchiiinu
2
110
コーポレートデータマスター構築への道
kworkdev
PRO
0
130
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
48
2.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
160
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Docker and Python
trallard
41
3.1k
Speed Design
sergeychernyshev
25
650
Automating Front-end Workflow
addyosmani
1366
200k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Designing for Performance
lara
604
68k
Facilitating Awesome Meetings
lara
50
6.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
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 ͷՄೳੑແݶେʂ