Upgrade to Pro — share decks privately, control downloads, hide ads and more …

reg-viz VRT tools

Yosuke Kurami
February 21, 2024

reg-viz VRT tools

Yosuke Kurami

February 21, 2024
Tweet

More Decks by Yosuke Kurami

Other Decks in Programming

Transcript

  1. About me id: @Quramy (GitHub / X ) - Web

    ΤϯδχΞ (ϑϩϯτΤϯυଟΊ) - React, Next.js, GraphQL - ։ൃࢧԉπʔϧͷ࡞੒ - ΤσΟλपΓ, Prisma ORM ؔ࿈, Visual Testing ؔ࿈
  2. reg-viz organization ʹ͍ͭͯ - https://github.com/reg-viz - Visual Testing ʹؔ࿈͢Δ OSS

    Λ࡞͍ͬͯΔू·Γ 
 "૊৫" ͱ͍͏΄Ͳ͔ͬ͠Γͨ͠΋ͷ͡Όͳ͍ - reg-suit ΍ Storycap ͳͲ - ༇շͳ஥ؒͨͪ (ओͳϝϯςφ)
  3. reg-viz ͷྺ࢙ 2016 2017 2019 2023 2024 reg-cli ࡞੒ reg-suit

    ࡞੒ SCS / zisui Λ Storycap ΁౷߹ reg-viz ͷ֤छ UI Λ࡮৽ reg-actions ࡞੒ storycap-testrun ࡞੒
  4. reg-viz tools ͷಛ௃ - VRT Λ࣮ݱ͢Δ্ͰඞཁͱͳΔ΋ͷΛࣗ෼ͨͪͰ։ൃ͖ͯͨ͠ - αʔϏεͰ͸ͳ͘πʔϧ - ʮࣗલͷ

    CI ؀ڥͰ VRT Λߏங͢Δʯ͕Ϟοτʔ - CI ͷϦιʔεΛ༻ҙ͢Ε͹ແྉͰར༻Ͱ͖Δ
  5. Visual Testing ʹର͢Δελϯε ϑϩϯτΤϯυͷ VRT ʹର͢Δߟ͑ํ (8೥લ͔ΒมΘͬͯͳ͍): - Visual Testing

    ͷൣғ: UI Component (React ΍ Vue ͷύʔπ୯Ґ) - Component ͷ୯ମςετ ͱΞϓϦέʔγϣϯ E2E ςετͷதؒఔ౓ - Visual Testing ͷ໨త: VRT ͦΕࣗମ͸໨తͰ͸ͳ͘ɺͨͩͷखஈ - ϑϩϯτΤϯυ։ൃͷεϐʔυΛ্͛ΔͨΊͷ΋ͷ
  6. Visual Testing ʹର͢Δελϯε - ϑϩϯτΤϯυͷޮ཰తͳ։ൃ - Storybook ͷΑ͏ͳ Component Χλϩά͕͋Ε͹ɺڍಈ΍ݟͨ໨

    Λ֬ೝ͠ͳ͕Βখ͘͞ Component Λ։ൃͰ͖Δ - ʮComponent Χλϩά͕͋Δͷ͔ͩΒ VRT ΋΍ͬͯΈΑ͏ʯͱ͍ ͏ൃ૝ ɻ 
 ʮVRT ͷͨΊʹ Component ΧλϩάΛ༻ҙ͠Α͏ʯͰ͸ͳ͍
  7. Visual Testing ʹର͢Δελϯε - ϑϩϯτΤϯυͷޮ཰తͳ։ൃ - मਖ਼ͷӨڹ͕ՄࢹԽ͞ΕΔ҆৺ײ͕डೖͷ଎౓Λอͭ - e.g. Atom

    Component ͷ min-width Λมߋͯ͠΋ɺMolecule ΍ Organism Component ͷϨΠΞ΢τ͸่Εͯ͸ͳΒͳ͍ - ʮݟͨ໨͕ͲͷΑ͏ʹมߋ͞ΕΔͷ͔ʯ͕ՄࢹԽ͞ΕΔͱɺϨϏϡ Ξͷ֬ೝίετ΋Լ͕Δ
  8. Issue breakdown reg-viz tools Ͱ͸ɺVRT ͷ࣮ݱΛҎԼʹ෼ղͯ͠ଊ͍͑ͯΔ - ςετίʔυ͔Βը૾Λग़ྗ͢ΔͨΊͷπʔϧ 
 e.g.

    Storycap, storycap-testrun - ग़ྗ͞Εͨը૾Λൺֱ͢ΔͨΊͷπʔϧ 
 e.g. reg-suit, reg-actions
  9. Issue breakdown - ʮը૾ʯͰઃܭΛ෼཭͍ͯ͠ΔܦҢ: - 2016 ೥࣌఺Ͱ͸ɺࣗ෼ୡ͸ Component ͷςετʹ SB

    Λ࢖͍ͬͯͳ ͔ͬͨ (Angular testing on Karma + Electron ͱ͍͏ߏ੒) 
 ςετίʔυ্Ͱը૾ग़ྗΛߦ͏ͷ͸ൺֱత༰қ - ʮը૾ൺֱʯ෦෼͚ͩΛ࡞Ε͹ VRT ͕࣮ݱͰ͖Δ - Storybook ͕ᴈ໌ظ (Vue ΍ Angular ͷରԠ͕ೖͬͨͷ͸ 2017 ೥)
  10. Combination ʮը૾ʯͰ෼཭͍ͯ͠ΔͨΊɺ༻్ʹԠͨ͡૊Έ߹Θ͕ͤՄೳ - Web ΞϓϦίϯϙʔωϯτͷϏδϡΞϧςετྫ: 
 Storybook x storycap-testrun x

    reg-actions - Web ϖʔδͷϏδϡΞϧςετྫ: 
 Playwright (Cypress) x reg-suit - ωΠςΟϒΞϓϦͷϏδϡΞϧςετྫ: 
 iOS Quick x reg-suit 

  11. Storybook - Storybook - UI Component ։ൃج൫ͷσϑΝΫτελϯμʔυ - ۙ೥͸ Component

    ςετج൫ͱͯ͠ͷػೳڧԽ΋໨ཱͭ - e.g. Play function, @stoybook/test (@storybook/jest, @storybook/ testing-library) - ςετҎ֎Ͱ΋໾ཱͭγʔϯ͕ଟ͍ = ಋೖͷ৺ཧతোน͕௿͍ - Component Χλϩάͱͯ͠ར༻Մೳ
  12. Storybook ͱ VRT - chromatic Λ༻͍Δ͜ͱͰ Storybook ͷ VRT Λ࣮ݱՄೳ

    - Pros: ಋೖ͕༰қ, Storybook ެࣜ, etc... - Cons: VRT ࣮ߦϒϥ΢β, ࣮ߦ Story ਺ʹΑͬͯ͸ແྉ࿮͔Β֎ΕΔ
  13. Storybook ͱ reg-viz - reg-viz Ͱ͸ Storybook VRT Λ࣮ݱ͢ΔͨΊͷπʔϧͱͯ͠ҎԼΛఏڙ: -

    https://github.com/reg-viz/storycap - https://github.com/reg-viz/storycap-testrun
  14. Storycap - https://github.com/reg-viz/storycap - Storybook ΛΫϩʔϧ֤ͯ͠ Story ͷը૾Λ PNG Խ͢Δ

    CLI - ը૾ͷൺֱ͸ reg-suit ΍ reg-actions (ޙड़) ʹ೚͍ͤͯΔ $ npx storycap <storybook_url>
  15. Storycap ͷ࢓૊Έ - த਎͸ Puppeteer (Headless Chrome) ʹΑΔ Ϋϩʔϥ -

    Storybook preview iframe ʹରͯ͠ Puppeteer ͔Β Post message͢Δ - औಘ͢Δը૾Λ҆ఆԽͤ͞ΔͨΊͷछʑͷϩδοΫΛ಺แ - e.g. DOM Node ਺΍ CSS ͷ Recalculation ਺͕ఆৗঢ়ଶͱͳΔ·Ͱ଴ ػ
  16. Storycap v.s. testrun - storycap-testrun ͷڧΈ = Storybook Test Runner

    ্Ͱಈ࡞͢Δ͜ͱ - e.g. Playwright αϙʔτ, Play Function ͷ଴ػ - Storycap ͔ΒͷҠߦઌͱͯ͠ storycap-testrun Λຊ֨తʹݕ౼͢Δ͔΋ - storycap-testrun ͕ྼޙ͍ͯ͠ΔՕॴ΋·ͩ͋Δ
  17. 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
  18. Features of reg-cli: Comparison parameters - ݫີͳ pixel by pixel

    ͷൺֱͰ͸࣮ӡ༻ʹ଱͑ͳ͍ɻ਺10 pixel ఔ౓ͷޡ ࠩΛِཅੑͱͯ͠ݕग़͢Δ͜ͱ͕͋ΔͨΊɺᮢ஋Λ؇࿨͢ΔΦϓγϣϯ Λ༻ҙ͍ͯ͠Δ - --thresholdRate : ը૾શମʹ͓͚Δ zero diff pixel ਺ͷൺ཰ - --thresholdPixel : ը૾શମʹ͓͚Δ zero diff pixel ͷઈର਺ - ͜ΕΒͷύϥϝʔλ͸ reg-suit ΍ reg-actions Ͱ΋ઃఆՄೳ
  19. εφοϓγϣοτͷѻ͍ εφοϓγϣοτςετͷࠩ෼͸ҎԼʹେผ͞ΕΔ: - डೖෆՄೳͳࠩ෼ = ҙਤͤ͵ഁյ - e.g. ϦϑΝΫλϦϯάʹࣦഊͨ͠৔߹ -

    डೖՄೳͳࠩ෼ = ҙਤతͳมߋ - Visual Testing ͷ৔߹ɺେ൒͸डೖՄೳͳࠩ෼ͱͳΔ 
 e.g. จݴमਖ਼΍ CSS มߋ, Component ௥ՃͳͲ - ʮडೖՄೳʯor ʮडೖෆՄೳʯ͸୯७ͳػց൑ఆ͕೉͍͠ 
 E2E ϓϥοτϑΥʔϜͰ͸ ػցֶशΛ༻͍ͨ Auto Healing ͳͲ΋ۙ೥ొ৔͍ͯ͠Δ
  20. ʮςετͷߋ৽ʯӡ༻ ҰൠతͳεφοϓγϣοτςετͷϫʔΫϑϩʔ (e.g. jest --update ) - ։ൃऀ - ػೳมߋʹ൐͏ιʔείʔυमਖ਼

    - ϩʔΧϧͰεφοϓγϣοτΛߋ৽ͯ͠ push - CI - τϐοΫϒϥϯν্ͷεφοϓγϣοτΛਖ਼ͱͯࣗ͠ಈςετͷ݁Ռ ΛධՁ
  21. ʮςετͷߋ৽ʯӡ༻ ͦͷ·· VRT ʹద༻ͨ͠৔߹ - ։ൃऀ - ػೳมߋʹ൐͏ιʔείʔυमਖ਼ - ϩʔΧϧͰεφοϓγϣοτΛߋ৽ͯ͠

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

    ετϨʔδ্ͷεφοϓγϣοτΛਖ਼ͱ͠ ͯࣗಈςετͷ݁ՌΛධՁ - ࠓճͷࣗಈςετͷ݁ՌΛετϨʔδʹ upload (ʮςετͷߋ৽ʯ૬౰)
  23. ʮςετͷߋ৽ʯӡ༻ reg-viz ͷߟ͑ΔϫʔΫϑϩʔ - CI - VRT ͷ݁Ռͱࠩ෼ͷৄࡉΛ։ൃऀɾϨ ϏϡΞʹ௨஌ -

    ϨϏϡΞ - ࠩ෼ৄࡉΛ֬ೝ͠ɺडೖՄ൱൑அ ࠩ෼಺༰௨஌ͷྫSFHTVJUͷ13ίϝϯτ
  24. ϫʔΫϑϩʔαϙʔτ લड़ͷϫʔΫϑϩʔαϙʔτΛߦ͏πʔϧͱͯ͠ҎԼΛఏڙ: 
 (ͲͪΒ΋಺෦తʹ 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
  25. reg-suit / reg-actions SFHTVJU SFHBDUJPOT ը૾εφοϓγϣοτ༻ 
 ετϨʔδ 4PS($4͕ผ్ඞཁ ༻ҙෆཁ

    
 ()""SUJGBDUΛར༻ ར༻Մೳͳ$* ೚ҙ (JU)VC"DUJPOTઐ༻ ࠩ෼ݕ஌࣌ͷ௨஌ઌ (JU)VC13 ()&413 (JUMBC.3  4MBDL FUD (JU)VC13 3FQPSU6*ӾཡՄ൱ Մ ෆՄ 
 ͨͩ͠13ίϝϯτʹࠩ෼ͷը૾͕ల։ ͞ΕΔ