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
870
reg-viz VRT tools
Yosuke Kurami
February 21, 2024
Tweet
Share
More Decks by Yosuke Kurami
See All by Yosuke Kurami
Next.js App Router
quramy
12
2k
Fragment Composition of GraphQL
quramy
13
1.6k
NoInfer
quramy
0
110
Precondition with schema directives
quramy
0
1.1k
T3 Stack and TypeScript ecosystem
quramy
4
1.7k
apollo client / react / esm
quramy
1
210
Apollo Client useFragment
quramy
1
610
About Type Syntax Proposal
quramy
1
1.9k
GraphQLとの向き合い方2022年版
quramy
33
12k
Other Decks in Programming
See All in Programming
Open standards for building event-driven applications in the cloud
meteatamel
0
190
使ってみよう Azure AI Document Intelligence
kosmosebi
2
370
Micro Frontends for Java Microservices - Utah JUG 2024
mraible
PRO
1
110
Polars入門
daikikatsuragawa
1
190
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
460
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
690
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
110
AppRouter Panel Talk
yosuke_furukawa
PRO
1
490
Node.js v22 で変わること
yosuke_furukawa
PRO
12
4k
Milestoner
bkuhlmann
1
420
VS Code をプロダクトにどう取り込むか
onomax
1
780
Site Reliability Engineering for GMO
pyama86
9
1.1k
Featured
See All Featured
Six Lessons from altMBA
skipperchong
22
3k
Into the Great Unknown - MozCon
thekraken
15
1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Happy Clients
brianwarren
92
6.4k
Ruby is Unlike a Banana
tanoku
96
10k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
8
3.4k
Being A Developer After 40
akosma
67
580k
What's in a price? How to price your products and services
michaelherold
238
11k
The Cost Of JavaScript in 2023
addyosmani
21
3.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
47k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
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