Tweet
Tweet

Slide 1

Slide 1 text

reg-viz and VRT tools 2024.2.21 @Quramy

Slide 2

Slide 2 text

About me id: @Quramy (GitHub / X ) - Web ΤϯδχΞ (ϑϩϯτΤϯυଟΊ) - React, Next.js, GraphQL - ։ൃࢧԉπʔϧͷ࡞੒ - ΤσΟλपΓ, Prisma ORM ؔ࿈, Visual Testing ؔ࿈

Slide 3

Slide 3 text

͓඼ॻ͖ - reg-viz Organization ʹ͍ͭͯ - VRT ΁ͷελϯεʹ͍ͭͯ - reg-viz ͕ఏڙ͍ͯ͠Δ tools ͷ঺հ

Slide 4

Slide 4 text

reg-viz organization ʹ͍ͭͯ https://github.com/reg-viz

Slide 5

Slide 5 text

reg-viz organization ʹ͍ͭͯ - https://github.com/reg-viz - Visual Testing ʹؔ࿈͢Δ OSS Λ࡞͍ͬͯΔू·Γ 
 "૊৫" ͱ͍͏΄Ͳ͔ͬ͠Γͨ͠΋ͷ͡Όͳ͍ - reg-suit ΍ Storycap ͳͲ - ༇շͳ஥ؒͨͪ (ओͳϝϯςφ)

Slide 6

Slide 6 text

reg-viz ͷྺ࢙ 2016 2017 2019 2023 2024 reg-cli ࡞੒ reg-suit ࡞੒ SCS / zisui Λ Storycap ΁౷߹ reg-viz ͷ֤छ UI Λ࡮৽ reg-actions ࡞੒ storycap-testrun ࡞੒

Slide 7

Slide 7 text

reg-viz tools ͷಛ௃ - VRT Λ࣮ݱ͢Δ্ͰඞཁͱͳΔ΋ͷΛࣗ෼ͨͪͰ։ൃ͖ͯͨ͠ - αʔϏεͰ͸ͳ͘πʔϧ - ʮࣗલͷ CI ؀ڥͰ VRT Λߏங͢Δʯ͕Ϟοτʔ - CI ͷϦιʔεΛ༻ҙ͢Ε͹ແྉͰར༻Ͱ͖Δ

Slide 8

Slide 8 text

VRT ΁ͷελϯε

Slide 9

Slide 9 text

Visual Testing ʹର͢Δελϯε ϑϩϯτΤϯυͷ VRT ʹର͢Δߟ͑ํ (8೥લ͔ΒมΘͬͯͳ͍): - Visual Testing ͷൣғ: UI Component (React ΍ Vue ͷύʔπ୯Ґ) - Component ͷ୯ମςετ ͱΞϓϦέʔγϣϯ E2E ςετͷதؒఔ౓ - Visual Testing ͷ໨త: VRT ͦΕࣗମ͸໨తͰ͸ͳ͘ɺͨͩͷखஈ - ϑϩϯτΤϯυ։ൃͷεϐʔυΛ্͛ΔͨΊͷ΋ͷ

Slide 10

Slide 10 text

Visual Testing ʹର͢Δελϯε - ϑϩϯτΤϯυͷޮ཰తͳ։ൃ - Storybook ͷΑ͏ͳ Component Χλϩά͕͋Ε͹ɺڍಈ΍ݟͨ໨ Λ֬ೝ͠ͳ͕Βখ͘͞ Component Λ։ൃͰ͖Δ - ʮComponent Χλϩά͕͋Δͷ͔ͩΒ VRT ΋΍ͬͯΈΑ͏ʯͱ͍ ͏ൃ૝ ɻ 
 ʮVRT ͷͨΊʹ Component ΧλϩάΛ༻ҙ͠Α͏ʯͰ͸ͳ͍

Slide 11

Slide 11 text

Visual Testing ʹର͢Δελϯε - ϑϩϯτΤϯυͷޮ཰తͳ։ൃ - मਖ਼ͷӨڹ͕ՄࢹԽ͞ΕΔ҆৺ײ͕डೖͷ଎౓Λอͭ - e.g. Atom Component ͷ min-width Λมߋͯ͠΋ɺMolecule ΍ Organism Component ͷϨΠΞ΢τ͸่Εͯ͸ͳΒͳ͍ - ʮݟͨ໨͕ͲͷΑ͏ʹมߋ͞ΕΔͷ͔ʯ͕ՄࢹԽ͞ΕΔͱɺϨϏϡ Ξͷ֬ೝίετ΋Լ͕Δ

Slide 12

Slide 12 text

reg-viz tools

Slide 13

Slide 13 text

Issue breakdown reg-viz tools Ͱ͸ɺVRT ͷ࣮ݱΛҎԼʹ෼ղͯ͠ଊ͍͑ͯΔ - ςετίʔυ͔Βը૾Λग़ྗ͢ΔͨΊͷπʔϧ 
 e.g. Storycap, storycap-testrun - ग़ྗ͞Εͨը૾Λൺֱ͢ΔͨΊͷπʔϧ 
 e.g. reg-suit, reg-actions

Slide 14

Slide 14 text

Issue breakdown - ʮը૾ʯͰઃܭΛ෼཭͍ͯ͠ΔܦҢ: - 2016 ೥࣌఺Ͱ͸ɺࣗ෼ୡ͸ Component ͷςετʹ SB Λ࢖͍ͬͯͳ ͔ͬͨ (Angular testing on Karma + Electron ͱ͍͏ߏ੒) 
 ςετίʔυ্Ͱը૾ग़ྗΛߦ͏ͷ͸ൺֱత༰қ - ʮը૾ൺֱʯ෦෼͚ͩΛ࡞Ε͹ VRT ͕࣮ݱͰ͖Δ - Storybook ͕ᴈ໌ظ (Vue ΍ Angular ͷରԠ͕ೖͬͨͷ͸ 2017 ೥)

Slide 15

Slide 15 text

Combination ʮը૾ʯͰ෼཭͍ͯ͠ΔͨΊɺ༻్ʹԠͨ͡૊Έ߹Θ͕ͤՄೳ - Web ΞϓϦίϯϙʔωϯτͷϏδϡΞϧςετྫ: 
 Storybook x storycap-testrun x reg-actions - Web ϖʔδͷϏδϡΞϧςετྫ: 
 Playwright (Cypress) x reg-suit - ωΠςΟϒΞϓϦͷϏδϡΞϧςετྫ: 
 iOS Quick x reg-suit 


Slide 16

Slide 16 text

ը૾ͷग़ྗ

Slide 17

Slide 17 text

Storybook - Storybook - UI Component ։ൃج൫ͷσϑΝΫτελϯμʔυ - ۙ೥͸ Component ςετج൫ͱͯ͠ͷػೳڧԽ΋໨ཱͭ - e.g. Play function, @stoybook/test (@storybook/jest, @storybook/ testing-library) - ςετҎ֎Ͱ΋໾ཱͭγʔϯ͕ଟ͍ = ಋೖͷ৺ཧతোน͕௿͍ - Component Χλϩάͱͯ͠ར༻Մೳ

Slide 18

Slide 18 text

Storybook ͱ VRT - chromatic Λ༻͍Δ͜ͱͰ Storybook ͷ VRT Λ࣮ݱՄೳ - Pros: ಋೖ͕༰қ, Storybook ެࣜ, etc... - Cons: VRT ࣮ߦϒϥ΢β, ࣮ߦ Story ਺ʹΑͬͯ͸ແྉ࿮͔Β֎ΕΔ

Slide 19

Slide 19 text

Storybook ͱ reg-viz - reg-viz Ͱ͸ Storybook VRT Λ࣮ݱ͢ΔͨΊͷπʔϧͱͯ͠ҎԼΛఏڙ: - https://github.com/reg-viz/storycap - https://github.com/reg-viz/storycap-testrun

Slide 20

Slide 20 text

Storycap - https://github.com/reg-viz/storycap - Storybook ΛΫϩʔϧ֤ͯ͠ Story ͷը૾Λ PNG Խ͢Δ CLI - ը૾ͷൺֱ͸ reg-suit ΍ reg-actions (ޙड़) ʹ೚͍ͤͯΔ $ npx storycap

Slide 21

Slide 21 text

Storycap ͷ࢓૊Έ - த਎͸ Puppeteer (Headless Chrome) ʹΑΔ Ϋϩʔϥ - Storybook preview iframe ʹରͯ͠ Puppeteer ͔Β Post message͢Δ - औಘ͢Δը૾Λ҆ఆԽͤ͞ΔͨΊͷछʑͷϩδοΫΛ಺แ - e.g. DOM Node ਺΍ CSS ͷ Recalculation ਺͕ఆৗঢ়ଶͱͳΔ·Ͱ଴ ػ

Slide 22

Slide 22 text

storycap-testrun - https://github.com/reg-viz/storycap-testrun - @storybook/test-runner ্Ͱར༻͢Δલఏ ͷϥΠϒϥϦ - postVisit ʹద༻ͤ͞Δ͜ͱͰ Story ͷը૾ ͕औಘՄೳ https://zenn.dev/knowledgework/articles/297ccfb866a5b5

Slide 23

Slide 23 text

Storycap v.s. testrun - storycap-testrun ͷڧΈ = Storybook Test Runner ্Ͱಈ࡞͢Δ͜ͱ - e.g. Playwright αϙʔτ, Play Function ͷ଴ػ - Storycap ͔ΒͷҠߦઌͱͯ͠ storycap-testrun Λຊ֨తʹݕ౼͢Δ͔΋ - storycap-testrun ͕ྼޙ͍ͯ͠ΔՕॴ΋·ͩ͋Δ

Slide 24

Slide 24 text

ը૾ͷൺֱ

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Features of reg-cli: Comparison parameters - ݫີͳ pixel by pixel ͷൺֱͰ͸࣮ӡ༻ʹ଱͑ͳ͍ɻ਺10 pixel ఔ౓ͷޡ ࠩΛِཅੑͱͯ͠ݕग़͢Δ͜ͱ͕͋ΔͨΊɺᮢ஋Λ؇࿨͢ΔΦϓγϣϯ Λ༻ҙ͍ͯ͠Δ - --thresholdRate : ը૾શମʹ͓͚Δ zero diff pixel ਺ͷൺ཰ - --thresholdPixel : ը૾શମʹ͓͚Δ zero diff pixel ͷઈର਺ - ͜ΕΒͷύϥϝʔλ͸ reg-suit ΍ reg-actions Ͱ΋ઃఆՄೳ

Slide 27

Slide 27 text

Features of reg-cli: Report UI - ൺֱ݁ՌΛ HTML Ϩϙʔτͱͯ͠ग़ྗ͢Δػೳ

Slide 28

Slide 28 text

reg-cli ͱϫʔΫϑϩʔ - reg-cli ͸๞͘·Ͱը૾ͷൺֱͷΈΛߦ͏ CLI - ։ൃϫʔΫϑϩʔʹ૊ΈࠐΉʹ͸ෆ଍͍ͯ͠Δ෦෼͕͋Δ

Slide 29

Slide 29 text

εφοϓγϣοτͷѻ͍ εφοϓγϣοτςετͷࠩ෼͸ҎԼʹେผ͞ΕΔ: - डೖෆՄೳͳࠩ෼ = ҙਤͤ͵ഁյ - e.g. ϦϑΝΫλϦϯάʹࣦഊͨ͠৔߹ - डೖՄೳͳࠩ෼ = ҙਤతͳมߋ - Visual Testing ͷ৔߹ɺେ൒͸डೖՄೳͳࠩ෼ͱͳΔ 
 e.g. จݴमਖ਼΍ CSS มߋ, Component ௥ՃͳͲ - ʮडೖՄೳʯor ʮडೖෆՄೳʯ͸୯७ͳػց൑ఆ͕೉͍͠ 
 E2E ϓϥοτϑΥʔϜͰ͸ ػցֶशΛ༻͍ͨ Auto Healing ͳͲ΋ۙ೥ొ৔͍ͯ͠Δ

Slide 30

Slide 30 text

VRT ͸εϞʔΫςετͳͷ͔ https://web.dev/learn/testing/get-started/test-types ΑΓ ςετର৅ͷίʔυ͕มߋ͞ΕΔͨͼʹߋ৽͕ඞཁͳςετ͸ɺ༗༻ͳ ϑΟʔυόοΫΛఏڙͤͣɺࣦഊ͢ΔՄೳੑ͕ߴ͍ͨΊɺنൣ͕ݫ͗͢͠ Δ܏޲͕͋Γ·͢ɻϏδϡΞϧςετ͸ɺ͜ͷམͱ݀͠ʹؕΓ͕ͪͰ͢

Slide 31

Slide 31 text

ʮςετͷߋ৽ʯӡ༻ ҰൠతͳεφοϓγϣοτςετͷϫʔΫϑϩʔ (e.g. jest --update ) - ։ൃऀ - ػೳมߋʹ൐͏ιʔείʔυमਖ਼ - ϩʔΧϧͰεφοϓγϣοτΛߋ৽ͯ͠ push - CI - τϐοΫϒϥϯν্ͷεφοϓγϣοτΛਖ਼ͱͯࣗ͠ಈςετͷ݁Ռ ΛධՁ

Slide 32

Slide 32 text

ʮςετͷߋ৽ʯӡ༻ ͦͷ·· VRT ʹద༻ͨ͠৔߹ - ։ൃऀ - ػೳมߋʹ൐͏ιʔείʔυमਖ਼ - ϩʔΧϧͰεφοϓγϣοτΛߋ৽ͯ͠ push - CI - τϐοΫϒϥϯν্ͷεφοϓγϣοτΛਖ਼ͱͯࣗ͠ಈςετͷ݁Ռ ΛධՁ खݩͰ7JTVBM5FTUΛ࣮ߦ͢Δखؒ 04΍ϑΥϯτͷࠩҟʹΑͬͯEJ ff ͕ੜ͡΍͍͢ QJYFMࠩ෼͕ੜ͡ΔมߋͰ͋ͬͯ΋ߋ৽͕ൃੜ͢Δ

Slide 33

Slide 33 text

ʮςετͷߋ৽ʯӡ༻ reg-viz ͷߟ͑ΔϫʔΫϑϩʔ - ։ൃऀ - ػೳมߋʹ൐͏ιʔείʔυมߋͷΈpush - CI - ετϨʔδ্ͷεφοϓγϣοτΛਖ਼ͱ͠ ͯࣗಈςετͷ݁ՌΛධՁ - ࠓճͷࣗಈςετͷ݁ՌΛετϨʔδʹ upload (ʮςετͷߋ৽ʯ૬౰)

Slide 34

Slide 34 text

ʮςετͷߋ৽ʯӡ༻ reg-viz ͷߟ͑ΔϫʔΫϑϩʔ - CI - VRT ͷ݁Ռͱࠩ෼ͷৄࡉΛ։ൃऀɾϨ ϏϡΞʹ௨஌ - ϨϏϡΞ - ࠩ෼ৄࡉΛ֬ೝ͠ɺडೖՄ൱൑அ ࠩ෼಺༰௨஌ͷྫSFHTVJUͷ13ίϝϯτ

Slide 35

Slide 35 text

ϫʔΫϑϩʔαϙʔτ લड़ͷϫʔΫϑϩʔαϙʔτΛߦ͏πʔϧͱͯ͠ҎԼΛఏڙ: 
 (ͲͪΒ΋಺෦తʹ 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

Slide 36

Slide 36 text

reg-suit / reg-actions SFHTVJU SFHBDUJPOT ը૾εφοϓγϣοτ༻ 
 ετϨʔδ 4PS($4͕ผ్ඞཁ ༻ҙෆཁ 
 ()""SUJGBDUΛར༻ ར༻Մೳͳ$* ೚ҙ (JU)VC"DUJPOTઐ༻ ࠩ෼ݕ஌࣌ͷ௨஌ઌ (JU)VC13 ()&413 (JUMBC.3  4MBDL FUD (JU)VC13 3FQPSU6*ӾཡՄ൱ Մ ෆՄ 
 ͨͩ͠13ίϝϯτʹࠩ෼ͷը૾͕ల։ ͞ΕΔ

Slide 37

Slide 37 text

Thank you