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

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

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

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

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

Shingo Yamazaki

June 28, 2019
Tweet

More Decks by Shingo Yamazaki

Other Decks in Technology

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