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.6k
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.7k
ログラスCREのこれまでとこれから(2023年)
zakiyama
0
490
カスタマーサポートを立ち上げてからやったこと
zakiyama
0
370
組織一丸となってカスタマーサクセスを実現するための取り組みと悩み
zakiyama
0
2.2k
プロダクトと顧客をつなぐログラスのCREの取り組み
zakiyama
2
5.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Chromium版EdgeのTracking Prevention機能 / Tracking Prevention in Chromium-based Microsoft Edge
zakiyama
0
1.7k
LWCのローカル開発機能(ベータ)を試す / LWC Local Development
zakiyama
0
570
kintone開発チームのモブプロ事情 / Mob programming in kintone dev team
zakiyama
0
5.6k
Other Decks in Technology
See All in Technology
「どこにある?」の解決。生成AI(RAG)で効率化するガバメントクラウド運用
toru_kubota
2
420
技術職じゃない私がVibe Codingで感じた、AGIが身近になる未来
blueb
0
130
TODAY 看世界(?) 是我們在看扣啦!
line_developers_tw
PRO
0
170
「実体」で築く共通認識: 開発現場のコミュニケーション最適化 / Let's Get on the Same Page with Concrete Artifacts: Optimization of Communication in dev teams
kazizi55
0
140
SFTPコンテナからファイルをダウンロードする
dip
0
290
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.6k
RubyOnRailsOnDevin+α / DevinMeetupJapan#2
ginkouno
0
420
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
45
27k
Copilot Agentを普段使いしてわかった、バックエンド開発で使えるTips
ykagano
1
1.2k
Snowflake Intelligenceで実現できるノーコードAI活用
takumimukaiyama
1
230
kotlin-lsp を Emacs で使えるようにしてみた / use kotlin-lsp in Emacs
nabeo
0
150
型システムを知りたい人のための型検査器作成入門
mame
15
3.8k
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Unsuck your backbone
ammeep
671
58k
Music & Morning Musume
bryan
46
6.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
Documentation Writing (for coders)
carmenintech
71
4.9k
Embracing the Ebb and Flow
colly
86
4.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
The Cult of Friendly URLs
andyhume
79
6.4k
How GitHub (no longer) Works
holman
314
140k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
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ͳΒແྉʢͨͩ͠৹ࠪ͋Γʣ ·ͱΊ