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

by Shingo Yamazaki

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/conﬁg.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ͳΒແྉʢͨͩ͠৹ࠪ͋Γʣ ·ͱΊ