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
540
ココがすごいぜ!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
48
ErrorBoundaryとSuspenseの導入検討
rakus_fe
1
750
日付をもう少し真面目に勉強中
rakus_fe
0
43
React19 β をざっと見る
rakus_fe
0
320
Reactのパフォーマンス改善例
rakus_fe
0
510
Typescript5.4の新機能
rakus_fe
0
300
非破壊的な配列メソッド
rakus_fe
0
360
スプレッドシートのセル結合がつらいので足掻いてみた話
rakus_fe
0
250
Other Decks in Technology
See All in Technology
DMMの検索システムをSolrからElasticCloudに移行した話
hmaa_ryo
0
310
serverless team topology
_kensh
3
250
プレイドのユニークな技術とインターンのリアル
plaidtech
PRO
1
570
パフォーマンスチューニングのために普段からできること/Performance Tuning: Daily Practices
fujiwara3
2
180
プロダクト開発と社内データ活用での、BI×AIの現在地 / Data_Findy
sansan_randd
1
710
ソースを読む時の思考プロセスの例-MkDocs
sat
PRO
1
350
Oracle Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
0
400
AWSが好きすぎて、41歳でエンジニアになり、AAIを経由してAWSパートナー企業に入った話
yama3133
2
220
ViteとTypeScriptのProject Referencesで 大規模モノレポのUIカタログのリリースサイクルを高速化する
shuta13
3
240
AIでデータ活用を加速させる取り組み / Leveraging AI to accelerate data utilization
okiyuki99
6
1.6k
アウトプットから始めるOSSコントリビューション 〜eslint-plugin-vueの場合〜 #vuefes
bengo4com
3
1.9k
kotlin-lsp の開発開始に触発されて、Emacs で Kotlin 開発に挑戦した記録 / kotlin‑lsp as a Catalyst: My Journey to Kotlin Development in Emacs
nabeo
2
110
Featured
See All Featured
Designing for humans not robots
tammielis
254
26k
Agile that works and the tools we love
rasmusluckow
331
21k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Bash Introduction
62gerente
615
210k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
How GitHub (no longer) Works
holman
315
140k
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 ͷՄೳੑແݶେʂ