Chromaticで手軽にVisual Regression Testを導入する / Visual Regression Testing with Chromatic

We Are JavaScripters! @33rd【初心者歓迎・LT会】の登壇資料です

デモ動画：https://youtu.be/9qsX_UsyG-g

Transcript

1. ChromaticͰ
   खܰʹ
   Visual Regression TestΛ
   ಋೖ͢Δ
   2019/06/28 We Are JavaScripters! @33rd
   

   View Slide

2. ࠷ۙௐ΂͍ͯͨ
   πʔϧͷ࿩Λ͠·͢
   

   View Slide

3. • Shingo Yamazaki
   • αΠϘ΢ζגࣜձࣾ (2018/12~)
   • kintone ։ൃνʔϜɹ݉

   ϑϩϯτΤϯυΤΩεύʔτνʔϜ
   • #WeJS ॳࢀՃͰ͢
   About me
   zaki-yama
   zaki___yama
   

   View Slide

4. • ͱ͋ΔUIίϯϙʔωϯτϥΠϒϥϦ։ൃͷ

   ͓ख఻͍Λ͍ͯ͠Δ
   • JS -> TypeScript Ҡߦ͕ϝΠϯ
   • ʮUI ίϯϙʔωϯτ͕σάϨͯ͠ͳ͍͜ͱΛ୲อ͢Δ
   ͘͠Έʗπʔϧ͕΄͍͠Ͷʯͱ͍͏࿩͕͋ͬͨ
   • ݱࡏ͸ Storybook + Storyshots Λར༻த
   Intro
   

   View Slide

5. • UIίϯϙʔωϯτͷ։ൃ
   & ϒϥ΢δϯά؀ڥΛఏڙ
   ͢ΔOSS
   • ίϯϙʔωϯτΛΞϓϦ
   έʔγϣϯͱಠཱͨ͠؀ڥ
   Ͱ։ൃͰ͖Δ
   • ಈ࡞͢Δίϯϙʔωϯτ͕
   ҰཡͰݟΒΕΔ
   Storybook?
   

   View Slide

6. • StorybookͷΞυΦϯ
   • JestͷSnapshot TestingΛར༻
   • ίϯϙʔωϯτͷSnapshotΛऔ
   ಘ͠ɺอଘͯ͋͠Δ΋ͷͱൺֱ
   • DOMͷൺֱͳͷͰɺελΠϧͷ
   ่Εͱ͔͸ݕ஌Ͱ͖ͣ
   Storyshots?
   IUUQTTUPSZCPPLKTPSHEPDTUFTUJOHTUSVDUVSBMUFTUJOH
   

   View Slide

7. https://twitter.com/domyen/status/1138861429669412864?s=20
   

   View Slide

8. https://twitter.com/domyen/status/1138861429669412864?s=20
   %FTJHOTZTUFN͸͓͖ͯ͞
   ͜ͷπʔϧؾʹͳΔ
   

   View Slide

9. Chromatic
   

   View Slide

10. Chromatic
    
    

    View Slide

11. • Visual Testing Λ΍ͬͯ͘ΕΔαʔϏε
    • “Made for Storybook by Storybook maintainers”
    • OSS͸ແྉ
    Chromatic
    

    View Slide

12. DEMO
    

    View Slide

13. ࢖͍ํ
    

    View Slide

14. • Storybook ಋೖࡁΈͷGitHubϦϙδτϦΛ༻ҙ
    • https://www.chromaticqa.com/ ʹΞΫηε
    • GitHubΞΧ΢ϯτͰSign in
    • Add project ͰϦϙδτϦΛબ୒
    ΞΧ΢ϯτొ࿥
    #JUCVDLFU (JU-BC
    ʹ΋ରԠ
    

    View Slide

15. ϦϙδτϦଆͰඞཁͳͷ͸3 Step
    $ISPNBUJDΛ
    Πϯετʔϧ
    TUPSZCPPLDPOpHKTʹ
    ߦ௥Ճ
    εΫϦϓτ࣮ߦ
    project͝ͱʹϢχʔΫͳapp code
    

    View Slide

16. ͜ͷ63-ʹΞΫηε
    

    View Slide

17. • ͋ͱ͸chromatic testͷͨͼʹbuild & diffൺֱ
    ॳճͷbuild੒ޭ
    

    View Slide

18. package.json
    CIͷઃఆ(CircleCIͷ৔߹)
    .circleci/config.yml
    

    View Slide

19. • \
    •
    CIͷઃఆ(CircleCIͷ৔߹)
    BQQDPEFͰ౉͍ͯͨ͠஋
    

    View Slide

20. Ͱ͖ͨ
    

    View Slide

21. EJ⒎Λ֬ೝ͠ɺ"DDFQU%FOZ
    શ෦νΣοΫ͢Δͱ(JU)VCଆͷεςʔλ
    ε΋ߋ৽͞ΕΔ
    %0.ʹมߋ͋Ε͹͜͜ʹදࣔ͞ΕΔ
    

    View Slide

22. ศརͳػೳ
    

    View Slide

23. ίϯϙʔωϯτΛදࣔ͠ͳ͕ΒɺҟͳΔϒϥϯ
    ν΍աڈͷϏϧυ݁Ռʹ੾Γସ͑ΒΕΔ
    Library
    

    View Slide

24. ※Standard/Pro ϓϥϯͷΈ
    Multi Browser Support
    

    View Slide

25. ࢦఆͨ͠ViewportͰෳ਺ͷSnapshotΛࡱͬͯ͘
    ΕΔ
    Viewports
    

    View Slide

26. Tips
    

    View Slide

27. • ࠩ෼͕͋ͬͯ΋Ϗϧυࣗମ͸Passʹ͢Δ
    • ͚ͭͳ͍ͱʮશ෦Accept͚ͨ͠ͲCircleCIͷ
    εςʔλε͸FailedͰϚʔδͰ͖ͳ͍ʯͱͳΔ
    CI༻ͷεΫϦϓτʹ͸
    --exit-zero-on-changesΛ͚ͭΔ
    

    View Slide

28. Open source plan͸৹͕ࠪඞཁ
    4JHOJOͨ͠Βී௨ʹ࢖͑ͨͷͰ
    1VCMJD3FQPTJUPSZͳΒͳΜͰ΋0,ͳͷ͔ͱࢥͬͯ·ͨ͠
    

    View Slide

29. • ҰԠChatͰฉ͍͚ͨͲ

    ΍ͬͺΓͦ͏ͬΆ͍
    Open source plan͸৹͕ࠪඞཁ
    

    View Slide

30. • ໌ه͞Εͯͳ͍͕

    ͜Ε΋ChatͰฉ͍ͯΈͨ
    • গͳ͘ͱ΋Browser͸

    ChromeͷΈͱͷ͜ͱ
    Open source plan͸
    starter planѻ͍ʁ
    

    View Slide

31. ೔ຊޠϑΥϯτ͕…
    ͜Ε͕
    ͜͏ͳͬͨ
    

    View Slide

32. • .storybook/preview-head.htmlͰ

    web fontಡΈࠐ·ͤͯΈ͚ͨͲͩΊͰͨ͠
    ೔ຊޠϑΥϯτ͕…
    

    View Slide

33. • ։ൃνʔϜʹ

    ϑΟʔυόοΫ͢Δɺ

    ͱ͸ݴͬͯͨ
    ೔ຊޠϑΥϯτ͕…
    

    View Slide

34. • StorybookΛར༻͍ͯ͠ΔϓϩδΣΫτʹ͸

    ͔ͳΓ͓खܰʹಋೖͰ͖Δ
    • diff͸एׯݟͮΒ͍ʢओ؍ʣ͚Ͳػೳ͸े෼
    • ଞπʔϧͱൺֱͨ͠Θ͚Ͱ͸ͳ͍Ͱ͕͢
    • OSSͳΒແྉʢͨͩ͠৹ࠪ͋Γʣ
    ·ͱΊ
    

    View Slide