Chromaticで手軽にVisual Regression Testを導入する / Visual Regression Testing with Chromatic
by
Shingo Yamazaki
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
ChromaticͰ खܰʹ Visual Regression TestΛ ಋೖ͢Δ 2019/06/28 We Are JavaScripters! @33rd
Slide 2
Slide 2 text
࠷ۙௐ͍ͯͨ πʔϧͷΛ͠·͢
Slide 3
Slide 3 text
• Shingo Yamazaki • αΠϘζגࣜձࣾ (2018/12~) • kintone ։ൃνʔϜɹ݉ ϑϩϯτΤϯυΤΩεύʔτνʔϜ • #WeJS ॳࢀՃͰ͢ About me zaki-yama zaki___yama
Slide 4
Slide 4 text
• ͱ͋ΔUIίϯϙʔωϯτϥΠϒϥϦ։ൃͷ ͓ख͍Λ͍ͯ͠Δ • JS -> TypeScript Ҡߦ͕ϝΠϯ • ʮUI ίϯϙʔωϯτ͕σάϨͯ͠ͳ͍͜ͱΛ୲อ͢Δ ͘͠Έʗπʔϧ͕΄͍͠Ͷʯͱ͍͏͕͋ͬͨ • ݱࡏ Storybook + Storyshots Λར༻த Intro
Slide 5
Slide 5 text
• UIίϯϙʔωϯτͷ։ൃ & ϒϥδϯάڥΛఏڙ ͢ΔOSS • ίϯϙʔωϯτΛΞϓϦ έʔγϣϯͱಠཱͨ͠ڥ Ͱ։ൃͰ͖Δ • ಈ࡞͢Δίϯϙʔωϯτ͕ ҰཡͰݟΒΕΔ Storybook?
Slide 6
Slide 6 text
• StorybookͷΞυΦϯ • JestͷSnapshot TestingΛར༻ • ίϯϙʔωϯτͷSnapshotΛऔ ಘ͠ɺอଘͯ͋͠Δͷͱൺֱ • DOMͷൺֱͳͷͰɺελΠϧͷ ่Εͱ͔ݕͰ͖ͣ Storyshots? IUUQTTUPSZCPPLKTPSHEPDTUFTUJOHTUSVDUVSBMUFTUJOH
Slide 7
Slide 7 text
https://twitter.com/domyen/status/1138861429669412864?s=20
Slide 8
Slide 8 text
https://twitter.com/domyen/status/1138861429669412864?s=20 %FTJHOTZTUFN͓͖ͯ͞ ͜ͷπʔϧؾʹͳΔ
Slide 9
Slide 9 text
Chromatic
Slide 10
Slide 10 text
Chromatic
Slide 11
Slide 11 text
• Visual Testing Λͬͯ͘ΕΔαʔϏε • “Made for Storybook by Storybook maintainers” • OSSແྉ Chromatic
Slide 12
Slide 12 text
DEMO
Slide 13
Slide 13 text
͍ํ
Slide 14
Slide 14 text
• Storybook ಋೖࡁΈͷGitHubϦϙδτϦΛ༻ҙ • https://www.chromaticqa.com/ ʹΞΫηε • GitHubΞΧϯτͰSign in • Add project ͰϦϙδτϦΛબ ΞΧϯτొ #JUCVDLFU (JU-BC ʹରԠ
Slide 15
Slide 15 text
ϦϙδτϦଆͰඞཁͳͷ3 Step $ISPNBUJDΛ Πϯετʔϧ TUPSZCPPLDPOpHKTʹ ߦՃ εΫϦϓτ࣮ߦ project͝ͱʹϢχʔΫͳapp code
Slide 16
Slide 16 text
͜ͷ63-ʹΞΫηε
Slide 17
Slide 17 text
• ͋ͱchromatic testͷͨͼʹbuild & diffൺֱ ॳճͷbuildޭ
Slide 18
Slide 18 text
package.json CIͷઃఆ(CircleCIͷ߹) .circleci/config.yml
Slide 19
Slide 19 text
• \ • CIͷઃఆ(CircleCIͷ߹) BQQDPEFͰ͍ͯͨ͠
Slide 20
Slide 20 text
Ͱ͖ͨ
Slide 21
Slide 21 text
EJ⒎Λ֬ೝ͠ɺ"DDFQU%FOZ શ෦νΣοΫ͢Δͱ(JU)VCଆͷεςʔλ εߋ৽͞ΕΔ %0.ʹมߋ͋Ε͜͜ʹදࣔ͞ΕΔ
Slide 22
Slide 22 text
ศརͳػೳ
Slide 23
Slide 23 text
ίϯϙʔωϯτΛදࣔ͠ͳ͕ΒɺҟͳΔϒϥϯ νաڈͷϏϧυ݁ՌʹΓସ͑ΒΕΔ Library
Slide 24
Slide 24 text
※Standard/Pro ϓϥϯͷΈ Multi Browser Support
Slide 25
Slide 25 text
ࢦఆͨ͠ViewportͰෳͷSnapshotΛࡱͬͯ͘ ΕΔ Viewports
Slide 26
Slide 26 text
Tips
Slide 27
Slide 27 text
• ͕ࠩ͋ͬͯϏϧυࣗମPassʹ͢Δ • ͚ͭͳ͍ͱʮશ෦Accept͚ͨ͠ͲCircleCIͷ εςʔλεFailedͰϚʔδͰ͖ͳ͍ʯͱͳΔ CI༻ͷεΫϦϓτʹ --exit-zero-on-changesΛ͚ͭΔ
Slide 28
Slide 28 text
Open source plan৹͕ࠪඞཁ 4JHOJOͨ͠Βී௨ʹ͑ͨͷͰ 1VCMJD3FQPTJUPSZͳΒͳΜͰ0,ͳͷ͔ͱࢥͬͯ·ͨ͠
Slide 29
Slide 29 text
• ҰԠChatͰฉ͍͚ͨͲ ͬͺΓͦ͏ͬΆ͍ Open source plan৹͕ࠪඞཁ
Slide 30
Slide 30 text
• ໌ه͞Εͯͳ͍͕ ͜ΕChatͰฉ͍ͯΈͨ • গͳ͘ͱBrowser ChromeͷΈͱͷ͜ͱ Open source plan starter planѻ͍ʁ
Slide 31
Slide 31 text
ຊޠϑΥϯτ͕… ͜Ε͕ ͜͏ͳͬͨ
Slide 32
Slide 32 text
• .storybook/preview-head.htmlͰ web fontಡΈࠐ·ͤͯΈ͚ͨͲͩΊͰͨ͠ ຊޠϑΥϯτ͕…
Slide 33
Slide 33 text
• ։ൃνʔϜʹ ϑΟʔυόοΫ͢Δɺ ͱݴͬͯͨ ຊޠϑΥϯτ͕…
Slide 34
Slide 34 text
• StorybookΛར༻͍ͯ͠ΔϓϩδΣΫτʹ ͔ͳΓ͓खܰʹಋೖͰ͖Δ • diffएׯݟͮΒ͍ʢओ؍ʣ͚Ͳػೳे • ଞπʔϧͱൺֱͨ͠Θ͚Ͱͳ͍Ͱ͕͢ • OSSͳΒແྉʢͨͩ͠৹ࠪ͋Γʣ ·ͱΊ