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
2.1k
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
620
About Type Syntax Proposal
quramy
1
1.9k
GraphQLとの向き合い方2022年版
quramy
33
12k
Other Decks in Programming
See All in Programming
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
700
Milestoner
bkuhlmann
1
420
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
130
Deep Dive into React Stream/Serialize
mugi_uno
3
760
Anthropic Cookbook のおすすめレシピ
schroneko
7
1.4k
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
420
Elm 0.19.0 Changes
bkuhlmann
0
510
PHPはいつから死んでいるかの調査
chiroruxx
2
430
Site Reliability Engineering for GMO
pyama86
9
1.1k
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.4k
Git Rebase
bkuhlmann
11
1.6k
SIMD Parallel Programming with the Vector API
josepaumard
0
240
Featured
See All Featured
Done Done
chrislema
178
15k
A better future with KSS
kneath
231
16k
[RailsConf 2023] Rails as a piece of cake
palkan
28
4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
9
1.3k
Building Your Own Lightsaber
phodgson
100
5.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
22
1.6k
Building Adaptive Systems
keathley
32
1.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Faster Mobile Websites
deanohume
300
30k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
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