reg-viz VRT tools

Transcript

1. reg-viz and VRT tools 2024.2.21 @Quramy
2. About me id: @Quramy (GitHub / X ) - Web ΤϯδχΞ (ϑϩϯτΤϯυଟΊ) - React, Next.js, GraphQL - ։ൃࢧԉπʔϧͷ࡞੒ - ΤσΟλपΓ, Prisma ORM ؔ࿈, Visual Testing ؔ࿈
3. ͓඼ॻ͖ - reg-viz Organization ʹ͍ͭͯ - VRT ΁ͷελϯεʹ͍ͭͯ - reg-viz ͕ఏڙ͍ͯ͠Δ tools ͷ঺հ
4. reg-viz organization ʹ͍ͭͯ https://github.com/reg-viz
5. reg-viz organization ʹ͍ͭͯ - https://github.com/reg-viz - Visual Testing ʹؔ࿈͢Δ OSS Λ࡞͍ͬͯΔू·Γ 
 "૊৫" ͱ͍͏΄Ͳ͔ͬ͠Γͨ͠΋ͷ͡Όͳ͍ - reg-suit ΍ Storycap ͳͲ - ༇շͳ஥ؒͨͪ (ओͳϝϯςφ)
6. reg-viz ͷྺ࢙ 2016 2017 2019 2023 2024 reg-cli ࡞੒ reg-suit ࡞੒ SCS / zisui Λ Storycap ΁౷߹ reg-viz ͷ֤छ UI Λ࡮৽ reg-actions ࡞੒ storycap-testrun ࡞੒
7. reg-viz tools ͷಛ௃ - VRT Λ࣮ݱ͢Δ্ͰඞཁͱͳΔ΋ͷΛࣗ෼ͨͪͰ։ൃ͖ͯͨ͠ - αʔϏεͰ͸ͳ͘πʔϧ - ʮࣗલͷ CI ؀ڥͰ VRT Λߏங͢Δʯ͕Ϟοτʔ - CI ͷϦιʔεΛ༻ҙ͢Ε͹ແྉͰར༻Ͱ͖Δ
8. VRT ΁ͷελϯε
9. Visual Testing ʹର͢Δελϯε ϑϩϯτΤϯυͷ VRT ʹର͢Δߟ͑ํ (8೥લ͔ΒมΘͬͯͳ͍): - Visual Testing ͷൣғ: UI Component (React ΍ Vue ͷύʔπ୯Ґ) - Component ͷ୯ମςετ ͱΞϓϦέʔγϣϯ E2E ςετͷதؒఔ౓ - Visual Testing ͷ໨త: VRT ͦΕࣗମ͸໨తͰ͸ͳ͘ɺͨͩͷखஈ - ϑϩϯτΤϯυ։ൃͷεϐʔυΛ্͛ΔͨΊͷ΋ͷ
10. Visual Testing ʹର͢Δελϯε - ϑϩϯτΤϯυͷޮ཰తͳ։ൃ - Storybook ͷΑ͏ͳ Component Χλϩά͕͋Ε͹ɺڍಈ΍ݟͨ໨ Λ֬ೝ͠ͳ͕Βখ͘͞ Component Λ։ൃͰ͖Δ - ʮComponent Χλϩά͕͋Δͷ͔ͩΒ VRT ΋΍ͬͯΈΑ͏ʯͱ͍ ͏ൃ૝ ɻ 
 ʮVRT ͷͨΊʹ Component ΧλϩάΛ༻ҙ͠Α͏ʯͰ͸ͳ͍
11. Visual Testing ʹର͢Δελϯε - ϑϩϯτΤϯυͷޮ཰తͳ։ൃ - मਖ਼ͷӨڹ͕ՄࢹԽ͞ΕΔ҆৺ײ͕डೖͷ଎౓Λอͭ - e.g. Atom Component ͷ min-width Λมߋͯ͠΋ɺMolecule ΍ Organism Component ͷϨΠΞ΢τ͸่Εͯ͸ͳΒͳ͍ - ʮݟͨ໨͕ͲͷΑ͏ʹมߋ͞ΕΔͷ͔ʯ͕ՄࢹԽ͞ΕΔͱɺϨϏϡ Ξͷ֬ೝίετ΋Լ͕Δ
12. reg-viz tools
13. Issue breakdown reg-viz tools Ͱ͸ɺVRT ͷ࣮ݱΛҎԼʹ෼ղͯ͠ଊ͍͑ͯΔ - ςετίʔυ͔Βը૾Λग़ྗ͢ΔͨΊͷπʔϧ 
 e.g. Storycap, storycap-testrun - ग़ྗ͞Εͨը૾Λൺֱ͢ΔͨΊͷπʔϧ 
 e.g. reg-suit, reg-actions
14. Issue breakdown - ʮը૾ʯͰઃܭΛ෼཭͍ͯ͠ΔܦҢ: - 2016 ೥࣌఺Ͱ͸ɺࣗ෼ୡ͸ Component ͷςετʹ SB Λ࢖͍ͬͯͳ ͔ͬͨ (Angular testing on Karma + Electron ͱ͍͏ߏ੒) 
 ςετίʔυ্Ͱը૾ग़ྗΛߦ͏ͷ͸ൺֱత༰қ - ʮը૾ൺֱʯ෦෼͚ͩΛ࡞Ε͹ VRT ͕࣮ݱͰ͖Δ - Storybook ͕ᴈ໌ظ (Vue ΍ Angular ͷରԠ͕ೖͬͨͷ͸ 2017 ೥)
15. Combination ʮը૾ʯͰ෼཭͍ͯ͠ΔͨΊɺ༻్ʹԠͨ͡૊Έ߹Θ͕ͤՄೳ - Web ΞϓϦίϯϙʔωϯτͷϏδϡΞϧςετྫ: 
 Storybook x storycap-testrun x reg-actions - Web ϖʔδͷϏδϡΞϧςετྫ: 
 Playwright (Cypress) x reg-suit - ωΠςΟϒΞϓϦͷϏδϡΞϧςετྫ: 
 iOS Quick x reg-suit 

16. ը૾ͷग़ྗ
17. Storybook - Storybook - UI Component ։ൃج൫ͷσϑΝΫτελϯμʔυ - ۙ೥͸ Component ςετج൫ͱͯ͠ͷػೳڧԽ΋໨ཱͭ - e.g. Play function, @stoybook/test (@storybook/jest, @storybook/ testing-library) - ςετҎ֎Ͱ΋໾ཱͭγʔϯ͕ଟ͍ = ಋೖͷ৺ཧతোน͕௿͍ - Component Χλϩάͱͯ͠ར༻Մೳ
18. Storybook ͱ VRT - chromatic Λ༻͍Δ͜ͱͰ Storybook ͷ VRT Λ࣮ݱՄೳ - Pros: ಋೖ͕༰қ, Storybook ެࣜ, etc... - Cons: VRT ࣮ߦϒϥ΢β, ࣮ߦ Story ਺ʹΑͬͯ͸ແྉ࿮͔Β֎ΕΔ
19. Storybook ͱ reg-viz - reg-viz Ͱ͸ Storybook VRT Λ࣮ݱ͢ΔͨΊͷπʔϧͱͯ͠ҎԼΛఏڙ: - https://github.com/reg-viz/storycap - https://github.com/reg-viz/storycap-testrun
20. Storycap - https://github.com/reg-viz/storycap - Storybook ΛΫϩʔϧ֤ͯ͠ Story ͷը૾Λ PNG Խ͢Δ CLI - ը૾ͷൺֱ͸ reg-suit ΍ reg-actions (ޙड़) ʹ೚͍ͤͯΔ $ npx storycap <storybook_url>
21. Storycap ͷ࢓૊Έ - த਎͸ Puppeteer (Headless Chrome) ʹΑΔ Ϋϩʔϥ - Storybook preview iframe ʹରͯ͠ Puppeteer ͔Β Post message͢Δ - औಘ͢Δը૾Λ҆ఆԽͤ͞ΔͨΊͷछʑͷϩδοΫΛ಺แ - e.g. DOM Node ਺΍ CSS ͷ Recalculation ਺͕ఆৗঢ়ଶͱͳΔ·Ͱ଴ ػ
22. storycap-testrun - https://github.com/reg-viz/storycap-testrun - @storybook/test-runner ্Ͱར༻͢Δલఏ ͷϥΠϒϥϦ - postVisit ʹద༻ͤ͞Δ͜ͱͰ Story ͷը૾ ͕औಘՄೳ https://zenn.dev/knowledgework/articles/297ccfb866a5b5
23. Storycap v.s. testrun - storycap-testrun ͷڧΈ = Storybook Test Runner ্Ͱಈ࡞͢Δ͜ͱ - e.g. Playwright αϙʔτ, Play Function ͷ଴ػ - Storycap ͔ΒͷҠߦઌͱͯ͠ storycap-testrun Λຊ֨తʹݕ౼͢Δ͔΋ - storycap-testrun ͕ྼޙ͍ͯ͠ΔՕॴ΋·ͩ͋Δ
24. ը૾ͷൺֱ
25. 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
26. Features of reg-cli: Comparison parameters - ݫີͳ pixel by pixel ͷൺֱͰ͸࣮ӡ༻ʹ଱͑ͳ͍ɻ਺10 pixel ఔ౓ͷޡ ࠩΛِཅੑͱͯ͠ݕग़͢Δ͜ͱ͕͋ΔͨΊɺᮢ஋Λ؇࿨͢ΔΦϓγϣϯ Λ༻ҙ͍ͯ͠Δ - --thresholdRate : ը૾શମʹ͓͚Δ zero diff pixel ਺ͷൺ཰ - --thresholdPixel : ը૾શମʹ͓͚Δ zero diff pixel ͷઈର਺ - ͜ΕΒͷύϥϝʔλ͸ reg-suit ΍ reg-actions Ͱ΋ઃఆՄೳ
27. Features of reg-cli: Report UI - ൺֱ݁ՌΛ HTML Ϩϙʔτͱͯ͠ग़ྗ͢Δػೳ
28. reg-cli ͱϫʔΫϑϩʔ - reg-cli ͸๞͘·Ͱը૾ͷൺֱͷΈΛߦ͏ CLI - ։ൃϫʔΫϑϩʔʹ૊ΈࠐΉʹ͸ෆ଍͍ͯ͠Δ෦෼͕͋Δ
29. εφοϓγϣοτͷѻ͍ εφοϓγϣοτςετͷࠩ෼͸ҎԼʹେผ͞ΕΔ: - डೖෆՄೳͳࠩ෼ = ҙਤͤ͵ഁյ - e.g. ϦϑΝΫλϦϯάʹࣦഊͨ͠৔߹ - डೖՄೳͳࠩ෼ = ҙਤతͳมߋ - Visual Testing ͷ৔߹ɺେ൒͸डೖՄೳͳࠩ෼ͱͳΔ 
 e.g. จݴमਖ਼΍ CSS มߋ, Component ௥ՃͳͲ - ʮडೖՄೳʯor ʮडೖෆՄೳʯ͸୯७ͳػց൑ఆ͕೉͍͠ 
 E2E ϓϥοτϑΥʔϜͰ͸ ػցֶशΛ༻͍ͨ Auto Healing ͳͲ΋ۙ೥ొ৔͍ͯ͠Δ
30. VRT ͸εϞʔΫςετͳͷ͔ https://web.dev/learn/testing/get-started/test-types ΑΓ ςετର৅ͷίʔυ͕มߋ͞ΕΔͨͼʹߋ৽͕ඞཁͳςετ͸ɺ༗༻ͳ ϑΟʔυόοΫΛఏڙͤͣɺࣦഊ͢ΔՄೳੑ͕ߴ͍ͨΊɺنൣ͕ݫ͗͢͠ Δ܏޲͕͋Γ·͢ɻϏδϡΞϧ
    ςετ͸ɺ͜ͷམͱ݀͠ʹؕΓ͕ͪͰ͢
    
31. ʮςετͷߋ৽ʯӡ༻ ҰൠతͳεφοϓγϣοτςετͷϫʔΫϑϩʔ (e.g. jest --update ) - ։ൃऀ - ػೳมߋʹ൐͏ιʔείʔυमਖ਼ - ϩʔΧϧͰεφοϓγϣοτΛߋ৽ͯ͠ push - CI - τϐοΫϒϥϯν্ͷεφοϓγϣοτΛਖ਼ͱͯࣗ͠ಈςετͷ݁Ռ ΛධՁ
32. ʮςετͷߋ৽ʯӡ༻ ͦͷ·· VRT ʹద༻ͨ͠৔߹ - ։ൃऀ - ػೳมߋʹ൐͏ιʔείʔυमਖ਼ - ϩʔΧϧͰεφοϓγϣοτΛߋ৽ͯ͠ push - CI - τϐοΫϒϥϯν্ͷεφοϓγϣοτΛਖ਼ͱͯࣗ͠ಈςετͷ݁Ռ ΛධՁ खݩͰ
    7JTVBM
    5FTU
    Λ࣮ߦ͢Δखؒ 04΍ϑΥϯτͷࠩҟʹΑͬͯ
    EJ ff
    ͕ੜ͡΍͍͢ 
    QJYFM
    ࠩ෼͕ੜ͡ΔมߋͰ͋ͬͯ΋ߋ৽͕ൃੜ͢Δ
33. ʮςετͷߋ৽ʯӡ༻ reg-viz ͷߟ͑ΔϫʔΫϑϩʔ - ։ൃऀ - ػೳมߋʹ൐͏ιʔείʔυมߋͷΈpush - CI - ετϨʔδ্ͷεφοϓγϣοτΛਖ਼ͱ͠ ͯࣗಈςετͷ݁ՌΛධՁ - ࠓճͷࣗಈςετͷ݁ՌΛετϨʔδʹ upload (ʮςετͷߋ৽ʯ૬౰)
34. ʮςετͷߋ৽ʯӡ༻ reg-viz ͷߟ͑ΔϫʔΫϑϩʔ - CI - VRT ͷ݁Ռͱࠩ෼ͷৄࡉΛ։ൃऀɾϨ ϏϡΞʹ௨஌ - ϨϏϡΞ - ࠩ෼ৄࡉΛ֬ೝ͠ɺडೖՄ൱൑அ ࠩ෼಺༰௨஌ͷྫ
    SFHTVJU
    ͷ
    13
    ίϝϯτ
35. ϫʔΫϑϩʔαϙʔτ લड़ͷϫʔΫϑϩʔαϙʔτΛߦ͏πʔϧͱͯ͠ҎԼΛఏڙ: 
 (ͲͪΒ΋಺෦తʹ 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
36. reg-suit / reg-actions SFHTVJU SFHBDUJPOT ը૾εφοϓγϣοτ༻ 
 ετϨʔδ 4
    PS
    ($4
    ͕ผ్ඞཁ ༻ҙෆཁ 
 ()"
    "SUJGBDU
    Λར༻ ར༻Մೳͳ
    $* ೚ҙ (JU)VC
    "DUJPOT
    ઐ༻ ࠩ෼ݕ஌࣌ͷ௨஌ઌ (JU)VC
    13
    ()&4
    13
    (JUMBC
    .3
    4MBDL
    FUD
    (JU)VC
    13 3FQPSU
    6*
    ӾཡՄ൱ Մ ෆՄ 
 ͨͩ͠
    13
    ίϝϯτʹࠩ෼ͷը૾͕ల։ ͞ΕΔ
37. Thank you