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
Introduction to Visual Regression Testing(JP)
Search
Yosuke Kurami
November 25, 2017
Programming
3
980
Introduction to Visual Regression Testing(JP)
nodefest 17 向け資料(日本語版)
Yosuke Kurami
November 25, 2017
Tweet
Share
More Decks by Yosuke Kurami
See All by Yosuke Kurami
TypeScript LSP の今までとこれから
quramy
1
550
フロントエンドテストの育て方
quramy
12
3.4k
App Router 悲喜交々
quramy
8
620
上手に付き合うコンポーネントテスト
quramy
6
2.1k
Patched fetch did not work
quramy
6
690
GraphQL あるいは React における自律的なデータ取得について
quramy
18
5.3k
Next.js App Router
quramy
15
3.6k
Fragment Composition of GraphQL
quramy
16
4k
reg-viz VRT tools
quramy
4
1.4k
Other Decks in Programming
See All in Programming
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
170
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
380
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
470
ニーリーにおけるプロダクトエンジニア
nealle
0
590
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
150
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
130
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.4k
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
330
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
230
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
710
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Building an army of robots
kneath
306
45k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Navigating Team Friction
lara
187
15k
GitHub's CSS Performance
jonrohan
1031
460k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Git: the NoSQL Database
bkeepers
PRO
430
65k
Faster Mobile Websites
deanohume
307
31k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Designing for humans not robots
tammielis
253
25k
Transcript
Introduction to Visual Regression Testing #nodefest ‘17
ࠓͷ͓
ࣗࣾϑϩϯτΤϯυ։ൃʹ ը૾ճؼςετΛಋೖͨ͠
ͳͥը૾ճؼςετͳͷ͔ʁ
1. Ͳ͜·ͰDOMͷassert͢Δ͔ w type: Bͷͱ͖ʹɺԿΛνΣοΫ͠·͔͢ʁ nodeName, textContent, classList શ෦֬ೝ͢Δʁ <template>
<class="greeting" div> <div v-if="type === 'A'"> Good evening, {{name}}. </div> <div class="type-b" v-else-if="type === 'B'"> Bon soir, {{name}}. </div> <div v-else>Other...</div> </div> </template>
1. Ͳ͜·ͰDOMͷassert͢Δ͔ w BTTFSUॻ͖͗͢Δͱɺϝϯςͣ͠Β͍ʜ ͰBTTFSU͕গͳ͗͢Δͷෆ҆ʜ w ͦ͏ͩɺεφοϓγϣοτςετ͠Α͏ ƭ The latest
snapshot (DOM String) ƭ The actual snapshot (DOM String) Update if snapshot is accepted Assertion
2. ݟͨςετ͍ͨ͠ w ϢʔβʔΫϥε໊λά໊ʹڵຯ͕͋Δ༁͡Όͳ͍ .hoge { padding: 15px; color: #808080;
border: 1px solid currentColor; } <div class="hoge"> ABCDEF </div> ݕূ͍ͨ͠ର ͿͬͪΌ͚Ͳ͏Ͱ͍͍
୳͢ʁͦΕͱ࡞Δʁ w ॳز͔ͭͷπʔϧαʔϏεͷར༻Λݕ౼͢Δɺ ྑ͍ͷʹग़ձ͑ͳ͔ͬͨ w ࣗͨͪͰΈΛ࡞Δ͔͠ͳ͍ʂ
Λ͚Δ w εφοϓγϣοτ Ωϟϓνϟը૾ ͷऔಘ w ϑϩϯτΤϯυͷ࣮ɾςετํ๏ͱີʹؔ࿈ w εφοϓγϣοτ Ωϟϓνϟը૾
ͷൺֱ w ։ൃϫʔΫϑϩʔͱີʹؔ࿈
εφοϓγϣοτͷऔಘ
Ͳ͏࣮ͬͯ͠·͠ΐ͏͔ʁ
(ࢀߟ): πʔϧͷ߹Θͤྫ ιϑτΣΞελοΫͷྫ "QQ'SBNFXPSL "OHVMBS 5FTU'SBNFXPSL +BTNJOF 5FTU3VOOFS ࣗ࡞ #SPXTFS
.BOJQVMBUPS 1VQQFUFFS $POUJOVPVT*OUFHSBUJPO 0SBDMF8FSDLFS$*
Έ߹ΘͤຖʹΓํ༷ʑ
ΩϟϓνϟࣗಈԽͷ ීวతͳϙΠϯτ
1. CIͰϒϥβಈ͔͢ %PDLFS*NBHF࡞Δ࣌ͷࢀߟʹ w ࣮ϒϥβ͏ύλʔϯ w YWGC 9XJOEPXԾϑϨʔϜόοϑΝ ೖΕͱ͜͏ w
$ISPNFIFBEMFTT͏ύλʔϯ w YDC 9QSPUPDPM$MBOH#JOEJOHT ೖΕͱ͜͏
2. □□□□□□□□□ ˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘ $*˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘ ˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘ ˘˘˘˘˘˘˘˘.JH.JY˘˘˘˘˘˘˘˘˘
2. ϑΥϯτೖΕ͓ͯ͘ ϚϧνόΠτݍΛλʔήοτʹ։ൃ͍ͯ͠ΔͷͰ͋Ε $*ʹϑΥϯτΛೖΕ͓͖ͯ·͠ΐ͏ɻ ં֯ͷΩϟϓνϟը૾͕౾ͩΒ͚ʹͳΓ·͢ɻ ͏ͪͷνʔϜͰ.JH.JYϑΥϯτΛ͍ͬͯ·͢ɻ
3. ِཅੑΛճආ͢Δ ʮಉ͡ιʔείʔυಉ͡ը૾ʯΛอূ͢Δ5JQT w $44Ξχϝʔγϣϯͷࢭ w Ωϟϓνϟऔಘ ͳΔ͘ ࠷ޙʹ࣮ߦ͢Δ *
{ transition: none !important; animation: none !important; } requestIdleCallback(() => screenshot(), { timeout: 30000 });
εφοϓγϣοτͷൺֱ
πʔϧΛ࡞ https://reg-viz.github.io/reg-suit/
reg-suitͷಛ ը૾εφοϓγϣοτςετʹ͓͚Δ w ࠩݕ w ൺֱ݁Ռͷදࣔ w εφοϓγϣοτͷߋ৽ Λ౷߹
ʮࠩൃੜ = ࣦഊʯͱݶΒͳ͍ ͜ͷϑϩʔΛ؆୯ʹ࣮ݱ͢ΔͨΊͷπʔϧ
αϯϓϧͰݟͯΈΑ͏
Demo 1. Push ~ ࠩݕ
Demo 2. ϨϏϡΞ௨ୡ
Demo 3. ࠩͷ֬ೝ
GitHubϑϩʔͱͷ౷߹
(΄΅) JavaScriptͰͰ͖͍ͯΔ w $-* /PEFKT w ը૾ࠩͷݕग़QOHKT QJYFMNBUDI w
ը૾ͷอଘ"844%, w (JU)VC"QQ "84-BNCEB w "QPMMP(SBQI2-$MJFOU w ൺֱϨϙʔτ 8FC#SPXTFS w ϑϩϯτΤϯυ7VFKT w ࠩใϚʔΩϯά0QFO$7 8FC"TTFNCMZ
·ͱΊ
·ͱΊ w ͬͯͯྑ͔ͬͨը૾ςετ w ςετΛॻ͘Ϟνϕʔγϣϯ্ w ϨϏϡʔෛՙͷܰݮ w SFHTVJU·ͩ·ͩվྑͷ༨͋Γʜ w
ϑΟʔυόοΫ13ͳͲ͓͓ͪͯ͠Γ·͢
Thank you ! by @Quramy