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

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

50fc0fdc2327ecbe7350645812de52e3?s=47 Shingo Yamazaki
June 28, 2019
Technology
2
860

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

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

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

50fc0fdc2327ecbe7350645812de52e3?s=128

Shingo Yamazaki

June 28, 2019
Tweet

More Decks by Shingo Yamazaki

See All by Shingo Yamazaki
StorybookのUI Testing Handbookを読んだ
50fc0fdc2327ecbe7350645812de52e3?s=48 zakiyama
4
2k
Chromium版EdgeのTracking Prevention機能 / Tracking Prevention in Chromium-based Microsoft Edge
50fc0fdc2327ecbe7350645812de52e3?s=48 zakiyama
0
1.1k
LWCのローカル開発機能(ベータ)を試す / LWC Local Development
50fc0fdc2327ecbe7350645812de52e3?s=48 zakiyama
0
150
kintone開発チームのモブプロ事情 / Mob programming in kintone dev team
50fc0fdc2327ecbe7350645812de52e3?s=48 zakiyama
0
630
Apex Replay Debuggerを試してみた
50fc0fdc2327ecbe7350645812de52e3?s=48 zakiyama
0
3.8k
Node.jsではじめてのCLI
50fc0fdc2327ecbe7350645812de52e3?s=48 zakiyama
1
880
React Storybook を触ってみる
50fc0fdc2327ecbe7350645812de52e3?s=48 zakiyama
5
3k
2016/04/26 Trailhead もくもく会
50fc0fdc2327ecbe7350645812de52e3?s=48 zakiyama
0
160
Tokyo Salesforce Developer Group Meetup #11
50fc0fdc2327ecbe7350645812de52e3?s=48 zakiyama
0
130

Other Decks in Technology

See All in Technology
ドキュメントの翻訳に必要なこと
0d0586f83b68c623c4f04c752c4b515b?s=48 mayukosawai
0
160
CADDi HCMC Technology Center
E55fbffb4afd0a84d36c945ed68d8c19?s=48 caddi_eng
0
250
CTOのためのQAのつくりかた #scrumniigata / SigSQA How to create QA for CTOs and VPoEs
63d1e567c2c7b1dbf340f7bea9a92876?s=48 caori_t
0
170
toilを解消した話
632368cb0b90fa711cec36a082a7e24e?s=48 asumaywy
0
190
Scrum Fest Niigata 2022 開発エンジニアに聞いてみよう！
478bd912a17b65fa0ab8c1d81912b9b1?s=48 moritamasami
1
110
testing journey / Increase sensitivity to minor changes
055e63a40190884fdc17b918c6f6aa7e?s=48 aki_moon
1
240
完全に理解した　incremetal　〜そして、何もわからないへ〜
F40e385e485eafaed67850df08b122d0?s=48 mashiike
0
220
Nutanix_Meetup_20220511
0fca98ba59a23fc0a4a2a53701a2bae1?s=48 keigotomomatsu
0
150
Devに力を授けたいSREのあゆみ / SRE that wants to empower developers
E12b5afe5b4e6552019c09d6ac4128c3?s=48 tocyuki
3
480
JAWS-UG 朝会 #33 登壇資料
08dd0b93e011904f40d60d5a1b54c671?s=48 takakuni
0
390
ソフトウェアテストで参考にしている67のモノ #scrumniigata / 67 things for software testing
405fe9ab689473f267e2cfbd95f78c75?s=48 kyonmm
PRO
1
380
プルリク作ったらデプロイされる仕組み on ECS / SRE NEXT 2022
2537ce662eb08182e617ec7944981437?s=48 carta_engineering
1
190

Featured

See All Featured
Gamification - CAS2011
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
75
3.9k
Testing 201, or: Great Expectations
A9704266587836f7e784235e5073b93e?s=48 jmmastey
21
5.4k
The World Runs on Bad Software
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
56
5.2k
How To Stay Up To Date on Web Technology
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
780
250k
Making the Leap to Tech Lead
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
113
6.9k
Rails Girls Zürich Keynote
24fc194843a71f10949be18d5a692682?s=48 gr2m
86
12k
Reflections from 52 weeks, 52 projects
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
337
17k
JavaScript: Past, Present, and Future - NDC Porto 2020
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
37
3.2k
Support Driven Design
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
86
8.4k
Making Projects Easy
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
98
4.3k
CSS Pre-Processors: Stylus, Less & Sass
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
349
27k
Building Your Own Lightsaber
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
94
4.6k

Transcript

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

    @33rd

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

  3. • Shingo Yamazaki • αΠϘ΢ζגࣜձࣾ (2018/12~) • kintone ։ൃνʔϜɹ݉
 ϑϩϯτΤϯυΤΩεύʔτνʔϜ

    • #WeJS ॳࢀՃͰ͢ About me zaki-yama zaki___yama

  4. • ͱ͋ΔUIίϯϙʔωϯτϥΠϒϥϦ։ൃͷ
 ͓ख఻͍Λ͍ͯ͠Δ • JS -> TypeScript Ҡߦ͕ϝΠϯ • ʮUI

    ίϯϙʔωϯτ͕σάϨͯ͠ͳ͍͜ͱΛ୲อ͢Δ ͘͠Έʗπʔϧ͕΄͍͠Ͷʯͱ͍͏࿩͕͋ͬͨ • ݱࡏ͸ Storybook + Storyshots Λར༻த Intro

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

    ಈ࡞͢Δίϯϙʔωϯτ͕ ҰཡͰݟΒΕΔ Storybook?

  6. • StorybookͷΞυΦϯ • JestͷSnapshot TestingΛར༻ • ίϯϙʔωϯτͷSnapshotΛऔ ಘ͠ɺอଘͯ͋͠Δ΋ͷͱൺֱ • DOMͷൺֱͳͷͰɺελΠϧͷ

    ่Εͱ͔͸ݕ஌Ͱ͖ͣ Storyshots? IUUQTTUPSZCPPLKTPSHEPDTUFTUJOHTUSVDUVSBMUFTUJOH

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

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

  9. Chromatic

  10. Chromatic 

  11. • Visual Testing Λ΍ͬͯ͘ΕΔαʔϏε • “Made for Storybook by Storybook

    maintainers” • OSS͸ແྉ Chromatic

  12. DEMO

  13. ࢖͍ํ

  14. • Storybook ಋೖࡁΈͷGitHubϦϙδτϦΛ༻ҙ • https://www.chromaticqa.com/ ʹΞΫηε • GitHubΞΧ΢ϯτͰSign in •

    Add project ͰϦϙδτϦΛબ୒ ΞΧ΢ϯτొ࿥ #JUCVDLFU (JU-BC ʹ΋ରԠ

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

  16. ͜ͷ63-ʹΞΫηε

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

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

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

  20. Ͱ͖ͨ

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

  22. ศརͳػೳ

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

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

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

  26. Tips

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

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

  29. • ҰԠChatͰฉ͍͚ͨͲ
 ΍ͬͺΓͦ͏ͬΆ͍ Open source plan͸৹͕ࠪඞཁ

  30. • ໌ه͞Εͯͳ͍͕
 ͜Ε΋ChatͰฉ͍ͯΈͨ • গͳ͘ͱ΋Browser͸
 ChromeͷΈͱͷ͜ͱ Open source plan͸ starter

    planѻ͍ʁ

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

  32. • .storybook/preview-head.htmlͰ
 web fontಡΈࠐ·ͤͯΈ͚ͨͲͩΊͰͨ͠ ೔ຊޠϑΥϯτ͕…

  33. • ։ൃνʔϜʹ
 ϑΟʔυόοΫ͢Δɺ
 ͱ͸ݴͬͯͨ ೔ຊޠϑΥϯτ͕…

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