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.5k
ログラスCREのこれまでとこれから(2023年)
zakiyama
0
470
カスタマーサポートを立ち上げてからやったこと
zakiyama
0
360
組織一丸となってカスタマーサクセスを実現するための取り組みと悩み
zakiyama
0
2.1k
プロダクトと顧客をつなぐログラスのCREの取り組み
zakiyama
2
5.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
29
5.7k
Chromium版EdgeのTracking Prevention機能 / Tracking Prevention in Chromium-based Microsoft Edge
zakiyama
0
1.7k
LWCのローカル開発機能(ベータ)を試す / LWC Local Development
zakiyama
0
560
kintone開発チームのモブプロ事情 / Mob programming in kintone dev team
zakiyama
0
5.4k
Other Decks in Technology
See All in Technology
QA/SDETの現在と、これからの挑戦
imtnd
0
200
CodePipelineのアクション統合から学ぶAWS CDKの抽象化技術 / codepipeline-actions-cdk-abstraction
gotok365
5
340
日経電子版 for Android の技術的課題と取り組み(令和最新版)/android-20250423
nikkei_engineer_recruiting
1
600
Microsoft の SSE の現在地
skmkzyk
0
270
【Λ(らむだ)】最近のアプデ情報 / RPALT20250422
lambda
0
170
Azure Maps Visual in PowerBIで分析しよう
nakasho
0
180
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
2
440
Notion x ポストモーテムで広げる組織の学び / Notion x Postmortem
isaoshimizu
1
140
C++26アップデート 2025-03
faithandbrave
0
1.2k
OpsJAWS34_CloudTrailLake_for_Organizations
hiashisan
0
240
10ヶ月かけてstyled-components v4からv5にアップデートした話
uhyo
5
450
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
6
63k
Featured
See All Featured
The Invisible Side of Design
smashingmag
299
50k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.2k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Designing for humans not robots
tammielis
253
25k
Statistics for Hackers
jakevdp
798
220k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.5k
Navigating Team Friction
lara
185
15k
Site-Speed That Sticks
csswizardry
6
520
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
119
51k
For a Future-Friendly Web
brad_frost
177
9.7k
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ͳΒແྉʢͨͩ͠৹ࠪ͋Γʣ ·ͱΊ