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
reg-viz VRT tools
Search
Yosuke Kurami
February 21, 2024
Programming
4
1.3k
reg-viz VRT tools
Yosuke Kurami
February 21, 2024
Tweet
Share
More Decks by Yosuke Kurami
See All by Yosuke Kurami
App Router 悲喜交々
quramy
7
530
上手に付き合うコンポーネントテスト
quramy
4
1.9k
Patched fetch did not work
quramy
6
600
GraphQL あるいは React における自律的なデータ取得について
quramy
18
4.9k
Next.js App Router
quramy
15
3.4k
Fragment Composition of GraphQL
quramy
16
3.6k
NoInfer
quramy
0
250
Precondition with schema directives
quramy
0
1.5k
T3 Stack and TypeScript ecosystem
quramy
4
2.1k
Other Decks in Programming
See All in Programming
Introduction to kotlinx.rpc
arawn
0
670
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
220
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
130
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
120
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
180
CI改善もDatadogとともに
taumu
0
110
最近のVS Codeで気になるニュース 2025/01
74th
1
260
もう僕は OpenAPI を書きたくない
sgash708
3
990
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
820
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
410
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
310
Featured
See All Featured
Practical Orchestrator
shlominoach
186
10k
Unsuck your backbone
ammeep
669
57k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
What's in a price? How to price your products and services
michaelherold
244
12k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
We Have a Design System, Now What?
morganepeng
51
7.4k
How STYLIGHT went responsive
nonsquared
98
5.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
How to Ace a Technical Interview
jacobian
276
23k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Transcript
reg-viz and VRT tools 2024.2.21 @Quramy
About me id: @Quramy (GitHub / X ) - Web
ΤϯδχΞ (ϑϩϯτΤϯυଟΊ) - React, Next.js, GraphQL - ։ൃࢧԉπʔϧͷ࡞ - ΤσΟλपΓ, Prisma ORM ؔ࿈, Visual Testing ؔ࿈
͓ॻ͖ - reg-viz Organization ʹ͍ͭͯ - VRT ͷελϯεʹ͍ͭͯ - reg-viz
͕ఏڙ͍ͯ͠Δ tools ͷհ
reg-viz organization ʹ͍ͭͯ https://github.com/reg-viz
reg-viz organization ʹ͍ͭͯ - https://github.com/reg-viz - Visual Testing ʹؔ࿈͢Δ OSS
Λ࡞͍ͬͯΔू·Γ "৫" ͱ͍͏΄Ͳ͔ͬ͠Γͨ͠ͷ͡Όͳ͍ - reg-suit Storycap ͳͲ - ༇շͳؒͨͪ (ओͳϝϯςφ)
reg-viz ͷྺ࢙ 2016 2017 2019 2023 2024 reg-cli ࡞ reg-suit
࡞ SCS / zisui Λ Storycap ౷߹ reg-viz ͷ֤छ UI Λ৽ reg-actions ࡞ storycap-testrun ࡞
reg-viz tools ͷಛ - VRT Λ࣮ݱ͢Δ্ͰඞཁͱͳΔͷΛࣗͨͪͰ։ൃ͖ͯͨ͠ - αʔϏεͰͳ͘πʔϧ - ʮࣗલͷ
CI ڥͰ VRT Λߏங͢Δʯ͕Ϟοτʔ - CI ͷϦιʔεΛ༻ҙ͢ΕແྉͰར༻Ͱ͖Δ
VRT ͷελϯε
Visual Testing ʹର͢Δελϯε ϑϩϯτΤϯυͷ VRT ʹର͢Δߟ͑ํ (8લ͔ΒมΘͬͯͳ͍): - Visual Testing
ͷൣғ: UI Component (React Vue ͷύʔπ୯Ґ) - Component ͷ୯ମςετ ͱΞϓϦέʔγϣϯ E2E ςετͷதؒఔ - Visual Testing ͷత: VRT ͦΕࣗମతͰͳ͘ɺͨͩͷखஈ - ϑϩϯτΤϯυ։ൃͷεϐʔυΛ্͛ΔͨΊͷͷ
Visual Testing ʹର͢Δελϯε - ϑϩϯτΤϯυͷޮతͳ։ൃ - Storybook ͷΑ͏ͳ Component Χλϩά͕͋Εɺڍಈݟͨ
Λ֬ೝ͠ͳ͕Βখ͘͞ Component Λ։ൃͰ͖Δ - ʮComponent Χλϩά͕͋Δͷ͔ͩΒ VRT ͬͯΈΑ͏ʯͱ͍ ͏ൃ ɻ ʮVRT ͷͨΊʹ Component ΧλϩάΛ༻ҙ͠Α͏ʯͰͳ͍
Visual Testing ʹର͢Δελϯε - ϑϩϯτΤϯυͷޮతͳ։ൃ - मਖ਼ͷӨڹ͕ՄࢹԽ͞ΕΔ҆৺ײ͕डೖͷΛอͭ - e.g. Atom
Component ͷ min-width Λมߋͯ͠ɺMolecule Organism Component ͷϨΠΞτ่ΕͯͳΒͳ͍ - ʮݟ͕ͨͲͷΑ͏ʹมߋ͞ΕΔͷ͔ʯ͕ՄࢹԽ͞ΕΔͱɺϨϏϡ Ξͷ֬ೝίετԼ͕Δ
reg-viz tools
Issue breakdown reg-viz tools ͰɺVRT ͷ࣮ݱΛҎԼʹղͯ͠ଊ͍͑ͯΔ - ςετίʔυ͔Βը૾Λग़ྗ͢ΔͨΊͷπʔϧ e.g.
Storycap, storycap-testrun - ग़ྗ͞Εͨը૾Λൺֱ͢ΔͨΊͷπʔϧ e.g. reg-suit, reg-actions
Issue breakdown - ʮը૾ʯͰઃܭΛ͍ͯ͠ΔܦҢ: - 2016 ࣌Ͱɺࣗୡ Component ͷςετʹ SB
Λ͍ͬͯͳ ͔ͬͨ (Angular testing on Karma + Electron ͱ͍͏ߏ) ςετίʔυ্Ͱը૾ग़ྗΛߦ͏ͷൺֱత༰қ - ʮը૾ൺֱʯ෦͚ͩΛ࡞Ε VRT ͕࣮ݱͰ͖Δ - Storybook ͕ᴈ໌ظ (Vue Angular ͷରԠ͕ೖͬͨͷ 2017 )
Combination ʮը૾ʯͰ͍ͯ͠ΔͨΊɺ༻్ʹԠͨ͡Έ߹Θ͕ͤՄೳ - Web ΞϓϦίϯϙʔωϯτͷϏδϡΞϧςετྫ: Storybook x storycap-testrun x
reg-actions - Web ϖʔδͷϏδϡΞϧςετྫ: Playwright (Cypress) x reg-suit - ωΠςΟϒΞϓϦͷϏδϡΞϧςετྫ: iOS Quick x reg-suit
ը૾ͷग़ྗ
Storybook - Storybook - UI Component ։ൃج൫ͷσϑΝΫτελϯμʔυ - ۙ Component
ςετج൫ͱͯ͠ͷػೳڧԽཱͭ - e.g. Play function, @stoybook/test (@storybook/jest, @storybook/ testing-library) - ςετҎ֎Ͱཱͭγʔϯ͕ଟ͍ = ಋೖͷ৺ཧతোน͕͍ - Component Χλϩάͱͯ͠ར༻Մೳ
Storybook ͱ VRT - chromatic Λ༻͍Δ͜ͱͰ Storybook ͷ VRT Λ࣮ݱՄೳ
- Pros: ಋೖ͕༰қ, Storybook ެࣜ, etc... - Cons: VRT ࣮ߦϒϥβ, ࣮ߦ Story ʹΑͬͯແྉ͔Β֎ΕΔ
Storybook ͱ reg-viz - reg-viz Ͱ Storybook VRT Λ࣮ݱ͢ΔͨΊͷπʔϧͱͯ͠ҎԼΛఏڙ: -
https://github.com/reg-viz/storycap - https://github.com/reg-viz/storycap-testrun
Storycap - https://github.com/reg-viz/storycap - Storybook ΛΫϩʔϧ֤ͯ͠ Story ͷը૾Λ PNG Խ͢Δ
CLI - ը૾ͷൺֱ reg-suit reg-actions (ޙड़) ʹ͍ͤͯΔ $ npx storycap <storybook_url>
Storycap ͷΈ - த Puppeteer (Headless Chrome) ʹΑΔ Ϋϩʔϥ -
Storybook preview iframe ʹରͯ͠ Puppeteer ͔Β Post message͢Δ - औಘ͢Δը૾Λ҆ఆԽͤ͞ΔͨΊͷछʑͷϩδοΫΛแ - e.g. DOM Node CSS ͷ Recalculation ͕ఆৗঢ়ଶͱͳΔ·Ͱ ػ
storycap-testrun - https://github.com/reg-viz/storycap-testrun - @storybook/test-runner ্Ͱར༻͢Δલఏ ͷϥΠϒϥϦ - postVisit ʹద༻ͤ͞Δ͜ͱͰ
Story ͷը૾ ͕औಘՄೳ https://zenn.dev/knowledgework/articles/297ccfb866a5b5
Storycap v.s. testrun - storycap-testrun ͷڧΈ = Storybook Test Runner
্Ͱಈ࡞͢Δ͜ͱ - e.g. Playwright αϙʔτ, Play Function ͷػ - Storycap ͔ΒͷҠߦઌͱͯ͠ storycap-testrun Λຊ֨తʹݕ౼͢Δ͔ - storycap-testrun ͕ྼޙ͍ͯ͠ΔՕॴ·ͩ͋Δ
ը૾ͷൺֱ
reg-cli - https://github.com/reg-viz/reg-cli - reg-viz ͷதͰ࠷ݹ͍ύοέʔδ. reg-suit reg-actions
reg-cli ͷϥούʔ - ը૾ΛؚΉσΟϨΫτϦಉ࢜ΛҾͱ͠ɺಉ໊ϑΝΠϧͷࠩൺֱΛߦ ͏ CLI - ʮඞཁͳͷࣄલͱࣄޙͷը૾܈͚ͩʯͱ͍͏γϯϓϧ͕͞ಛ $ npx reg-cli actual-dir expected-dir diff-img-dir
Features of reg-cli: Comparison parameters - ݫີͳ pixel by pixel
ͷൺֱͰ࣮ӡ༻ʹ͑ͳ͍ɻ10 pixel ఔͷޡ ࠩΛِཅੑͱͯ͠ݕग़͢Δ͜ͱ͕͋ΔͨΊɺᮢΛ؇͢ΔΦϓγϣϯ Λ༻ҙ͍ͯ͠Δ - --thresholdRate : ը૾શମʹ͓͚Δ zero diff pixel ͷൺ - --thresholdPixel : ը૾શମʹ͓͚Δ zero diff pixel ͷઈର - ͜ΕΒͷύϥϝʔλ reg-suit reg-actions ͰઃఆՄೳ
Features of reg-cli: Report UI - ൺֱ݁ՌΛ HTML Ϩϙʔτͱͯ͠ग़ྗ͢Δػೳ
reg-cli ͱϫʔΫϑϩʔ - reg-cli ͘·Ͱը૾ͷൺֱͷΈΛߦ͏ CLI - ։ൃϫʔΫϑϩʔʹΈࠐΉʹෆ͍ͯ͠Δ෦͕͋Δ
εφοϓγϣοτͷѻ͍ εφοϓγϣοτςετͷࠩҎԼʹେผ͞ΕΔ: - डೖෆՄೳͳࠩ = ҙਤͤ͵ഁյ - e.g. ϦϑΝΫλϦϯάʹࣦഊͨ͠߹ -
डೖՄೳͳࠩ = ҙਤతͳมߋ - Visual Testing ͷ߹ɺେडೖՄೳͳࠩͱͳΔ e.g. จݴमਖ਼ CSS มߋ, Component ՃͳͲ - ʮडೖՄೳʯor ʮडೖෆՄೳʯ୯७ͳػցఆ͕͍͠ E2E ϓϥοτϑΥʔϜͰ ػցֶशΛ༻͍ͨ Auto Healing ͳͲۙొ͍ͯ͠Δ
VRT εϞʔΫςετͳͷ͔ https://web.dev/learn/testing/get-started/test-types ΑΓ ςετରͷίʔυ͕มߋ͞ΕΔͨͼʹߋ৽͕ඞཁͳςετɺ༗༻ͳ ϑΟʔυόοΫΛఏڙͤͣɺࣦഊ͢ΔՄೳੑ͕ߴ͍ͨΊɺنൣ͕ݫ͗͢͠ Δ͕͋Γ·͢ɻϏδϡΞϧςετɺ͜ͷམͱ݀͠ʹؕΓ͕ͪͰ͢
ʮςετͷߋ৽ʯӡ༻ ҰൠతͳεφοϓγϣοτςετͷϫʔΫϑϩʔ (e.g. jest --update ) - ։ൃऀ - ػೳมߋʹ͏ιʔείʔυमਖ਼
- ϩʔΧϧͰεφοϓγϣοτΛߋ৽ͯ͠ push - CI - τϐοΫϒϥϯν্ͷεφοϓγϣοτΛਖ਼ͱͯࣗ͠ಈςετͷ݁Ռ ΛධՁ
ʮςετͷߋ৽ʯӡ༻ ͦͷ·· VRT ʹద༻ͨ͠߹ - ։ൃऀ - ػೳมߋʹ͏ιʔείʔυमਖ਼ - ϩʔΧϧͰεφοϓγϣοτΛߋ৽ͯ͠
push - CI - τϐοΫϒϥϯν্ͷεφοϓγϣοτΛਖ਼ͱͯࣗ͠ಈςετͷ݁Ռ ΛධՁ खݩͰ7JTVBM5FTUΛ࣮ߦ͢Δखؒ 04ϑΥϯτͷࠩҟʹΑͬͯEJ ff ͕ੜ͍͢͡ QJYFM͕ࠩੜ͡ΔมߋͰ͋ͬͯߋ৽͕ൃੜ͢Δ
ʮςετͷߋ৽ʯӡ༻ reg-viz ͷߟ͑ΔϫʔΫϑϩʔ - ։ൃऀ - ػೳมߋʹ͏ιʔείʔυมߋͷΈpush - CI -
ετϨʔδ্ͷεφοϓγϣοτΛਖ਼ͱ͠ ͯࣗಈςετͷ݁ՌΛධՁ - ࠓճͷࣗಈςετͷ݁ՌΛετϨʔδʹ upload (ʮςετͷߋ৽ʯ૬)
ʮςετͷߋ৽ʯӡ༻ reg-viz ͷߟ͑ΔϫʔΫϑϩʔ - CI - VRT ͷ݁ՌͱࠩͷৄࡉΛ։ൃऀɾϨ ϏϡΞʹ௨ -
ϨϏϡΞ - ࠩৄࡉΛ֬ೝ͠ɺडೖՄ൱அ ࠩ༰௨ͷྫSFHTVJUͷ13ίϝϯτ
ϫʔΫϑϩʔαϙʔτ લड़ͷϫʔΫϑϩʔαϙʔτΛߦ͏πʔϧͱͯ͠ҎԼΛఏڙ: (ͲͪΒ෦తʹ reg-cli Λར༻͍ͯ͠Δ) - https://github.com/reg-viz/reg-suit - छʑͷ
SCM / CI Ͱ VRT Λ࣮ݱ͢ΔͨΊͷ CLI - https://github.com/reg-viz/reg-actions - GitHub Action Work fl ow ͔Βར༻Մೳͳ Action
reg-suit / reg-actions SFHTVJU SFHBDUJPOT ը૾εφοϓγϣοτ༻ ετϨʔδ 4PS($4͕ผ్ඞཁ ༻ҙෆཁ
()""SUJGBDUΛར༻ ར༻Մೳͳ$* ҙ (JU)VC"DUJPOTઐ༻ ࠩݕ࣌ͷ௨ઌ (JU)VC13 ()&413 (JUMBC.3 4MBDL FUD (JU)VC13 3FQPSU6*ӾཡՄ൱ Մ ෆՄ ͨͩ͠13ίϝϯτʹࠩͷը૾͕ల։ ͞ΕΔ
Thank you