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.4k
reg-viz VRT tools
Yosuke Kurami
February 21, 2024
Tweet
Share
More Decks by Yosuke Kurami
See All by Yosuke Kurami
フロントエンドテストの育て方
quramy
12
3.1k
App Router 悲喜交々
quramy
8
580
上手に付き合うコンポーネントテスト
quramy
5
2k
Patched fetch did not work
quramy
6
670
GraphQL あるいは React における自律的なデータ取得について
quramy
18
5.2k
Next.js App Router
quramy
15
3.5k
Fragment Composition of GraphQL
quramy
16
3.8k
NoInfer
quramy
0
270
Precondition with schema directives
quramy
0
1.6k
Other Decks in Programming
See All in Programming
Thank you <💅>, What's the Next?
ahoxa
1
590
Contribute to Comunities | React Tokyo Meetup #4 LT
sasagar
0
590
Improve my own Ruby
sisshiki1969
0
100
In geheimer Mission: AI Agents entwickeln
joergneumann
0
100
eBPF超入門「o11yに使える」とは (20250424_eBPF_o11y)
thousanda
1
110
カウシェで Four Keys の改善を試みた理由
ike002jp
1
120
AI時代の開発者評価について
ayumuu
0
230
インプロセスQAにおいて大事にしていること / In-process QA Meetup
medley
0
140
AIコーディングの理想と現実
tomohisa
35
37k
note の Elasticsearch 更新系を支える技術
tchov
9
3.4k
RubyKaigi Dev Meeting 2025
tenderlove
1
1.4k
2ヶ月で生産性2倍、お買い物アプリ「カウシェ」4チーム同時改善の取り組み
ike002jp
1
110
Featured
See All Featured
Become a Pro
speakerdeck
PRO
28
5.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.5k
Building an army of robots
kneath
305
45k
A Tale of Four Properties
chriscoyier
159
23k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
23
2.7k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
780
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Site-Speed That Sticks
csswizardry
6
530
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
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