Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Chromaticで手軽にVisual Regression Testを導入する / Visu...
Search
Shingo Yamazaki
June 28, 2019
Technology
2
1.5k
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
Share
More Decks by Shingo Yamazaki
See All by Shingo Yamazaki
顧客価値に向き合うためのCREのススメ
zakiyama
4
1.2k
ログラスCREのこれまでとこれから(2023年)
zakiyama
0
400
カスタマーサポートを立ち上げてからやったこと
zakiyama
0
330
組織一丸となってカスタマーサクセスを実現するための取り組みと悩み
zakiyama
0
2.1k
プロダクトと顧客をつなぐログラスのCREの取り組み
zakiyama
2
5k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.4k
Chromium版EdgeのTracking Prevention機能 / Tracking Prevention in Chromium-based Microsoft Edge
zakiyama
0
1.6k
LWCのローカル開発機能(ベータ)を試す / LWC Local Development
zakiyama
0
530
kintone開発チームのモブプロ事情 / Mob programming in kintone dev team
zakiyama
0
4.9k
Other Decks in Technology
See All in Technology
The future we create with our own MVV
matsukurou
0
1.8k
Fabric 移行時の躓きポイントと対応策
ohata_ds
1
140
Bring Your Own Container: When Containers Turn the Key to EDR Bypass/byoc-avtokyo2024
tkmru
0
790
効率的な技術組織が作れる!書籍『チームトポロジー』要点まとめ
iwamot
2
200
JAWS-UG20250116_iOSアプリエンジニアがAWSreInventに行ってきた(真面目編)
totokit4
0
120
ネットワーク可視化の世界
likr
7
5.7k
AIエージェントに脈アリかどうかを分析させてみた
sonoda_mj
2
140
Godot Engineについて調べてみた
unsoluble_sugar
0
280
ソフトウェア開発における「パーフェクトな意思決定」/Perfect Decision-Making in Software Development
yayoi_dd
2
2.8k
AWSの生成AIサービス Amazon Bedrock入門!(2025年1月版)
minorun365
PRO
7
430
I could be Wrong!! - Learning from Agile Experts
kawaguti
PRO
8
3k
プロダクト組織で取り組むアドベントカレンダー/Advent Calendar in Product Teams
mixplace
0
690
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
YesSQL, Process and Tooling at Scale
rocio
170
14k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Adopting Sorbet at Scale
ufuk
74
9.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
500
The Language of Interfaces
destraynor
155
24k
Transcript
ChromaticͰ खܰʹ Visual Regression TestΛ ಋೖ͢Δ 2019/06/28 We Are JavaScripters!
@33rd
࠷ۙௐ͍ͯͨ πʔϧͷΛ͠·͢
• Shingo Yamazaki • αΠϘζגࣜձࣾ (2018/12~) • kintone ։ൃνʔϜɹ݉ ϑϩϯτΤϯυΤΩεύʔτνʔϜ
• #WeJS ॳࢀՃͰ͢ About me zaki-yama zaki___yama
• ͱ͋ΔUIίϯϙʔωϯτϥΠϒϥϦ։ൃͷ ͓ख͍Λ͍ͯ͠Δ • JS -> TypeScript Ҡߦ͕ϝΠϯ • ʮUI
ίϯϙʔωϯτ͕σάϨͯ͠ͳ͍͜ͱΛ୲อ͢Δ ͘͠Έʗπʔϧ͕΄͍͠Ͷʯͱ͍͏͕͋ͬͨ • ݱࡏ Storybook + Storyshots Λར༻த Intro
• UIίϯϙʔωϯτͷ։ൃ & ϒϥδϯάڥΛఏڙ ͢ΔOSS • ίϯϙʔωϯτΛΞϓϦ έʔγϣϯͱಠཱͨ͠ڥ Ͱ։ൃͰ͖Δ •
ಈ࡞͢Δίϯϙʔωϯτ͕ ҰཡͰݟΒΕΔ Storybook?
• StorybookͷΞυΦϯ • JestͷSnapshot TestingΛར༻ • ίϯϙʔωϯτͷSnapshotΛऔ ಘ͠ɺอଘͯ͋͠Δͷͱൺֱ • DOMͷൺֱͳͷͰɺελΠϧͷ
่Εͱ͔ݕͰ͖ͣ Storyshots? IUUQTTUPSZCPPLKTPSHEPDTUFTUJOHTUSVDUVSBMUFTUJOH
https://twitter.com/domyen/status/1138861429669412864?s=20
https://twitter.com/domyen/status/1138861429669412864?s=20 %FTJHOTZTUFN͓͖ͯ͞ ͜ͷπʔϧؾʹͳΔ
Chromatic
Chromatic
• Visual Testing Λͬͯ͘ΕΔαʔϏε • “Made for Storybook by Storybook
maintainers” • OSSແྉ Chromatic
DEMO
͍ํ
• Storybook ಋೖࡁΈͷGitHubϦϙδτϦΛ༻ҙ • https://www.chromaticqa.com/ ʹΞΫηε • GitHubΞΧϯτͰSign in •
Add project ͰϦϙδτϦΛબ ΞΧϯτొ #JUCVDLFU (JU-BC ʹରԠ
ϦϙδτϦଆͰඞཁͳͷ3 Step $ISPNBUJDΛ Πϯετʔϧ TUPSZCPPLDPOpHKTʹ ߦՃ εΫϦϓτ࣮ߦ project͝ͱʹϢχʔΫͳapp code
͜ͷ63-ʹΞΫηε
• ͋ͱchromatic testͷͨͼʹbuild & diffൺֱ ॳճͷbuildޭ
package.json CIͷઃఆ(CircleCIͷ߹) .circleci/config.yml
• \ • CIͷઃఆ(CircleCIͷ߹) BQQDPEFͰ͍ͯͨ͠
Ͱ͖ͨ
EJ⒎Λ֬ೝ͠ɺ"DDFQU%FOZ શ෦νΣοΫ͢Δͱ(JU)VCଆͷεςʔλ εߋ৽͞ΕΔ %0.ʹมߋ͋Ε͜͜ʹදࣔ͞ΕΔ
ศརͳػೳ
ίϯϙʔωϯτΛදࣔ͠ͳ͕ΒɺҟͳΔϒϥϯ νաڈͷϏϧυ݁ՌʹΓସ͑ΒΕΔ Library
※Standard/Pro ϓϥϯͷΈ Multi Browser Support
ࢦఆͨ͠ViewportͰෳͷSnapshotΛࡱͬͯ͘ ΕΔ Viewports
Tips
• ͕ࠩ͋ͬͯϏϧυࣗମPassʹ͢Δ • ͚ͭͳ͍ͱʮશ෦Accept͚ͨ͠ͲCircleCIͷ εςʔλεFailedͰϚʔδͰ͖ͳ͍ʯͱͳΔ CI༻ͷεΫϦϓτʹ --exit-zero-on-changesΛ͚ͭΔ
Open source plan৹͕ࠪඞཁ 4JHOJOͨ͠Βී௨ʹ͑ͨͷͰ 1VCMJD3FQPTJUPSZͳΒͳΜͰ0,ͳͷ͔ͱࢥͬͯ·ͨ͠
• ҰԠChatͰฉ͍͚ͨͲ ͬͺΓͦ͏ͬΆ͍ Open source plan৹͕ࠪඞཁ
• ໌ه͞Εͯͳ͍͕ ͜ΕChatͰฉ͍ͯΈͨ • গͳ͘ͱBrowser ChromeͷΈͱͷ͜ͱ Open source plan starter
planѻ͍ʁ
ຊޠϑΥϯτ͕… ͜Ε͕ ͜͏ͳͬͨ
• .storybook/preview-head.htmlͰ web fontಡΈࠐ·ͤͯΈ͚ͨͲͩΊͰͨ͠ ຊޠϑΥϯτ͕…
• ։ൃνʔϜʹ ϑΟʔυόοΫ͢Δɺ ͱݴͬͯͨ ຊޠϑΥϯτ͕…
• StorybookΛར༻͍ͯ͠ΔϓϩδΣΫτʹ ͔ͳΓ͓खܰʹಋೖͰ͖Δ • diffएׯݟͮΒ͍ʢओ؍ʣ͚Ͳػೳे • ଞπʔϧͱൺֱͨ͠Θ͚Ͱͳ͍Ͱ͕͢ • OSSͳΒແྉʢͨͩ͠৹ࠪ͋Γʣ ·ͱΊ