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
990
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
770
フロントエンドテストの育て方
quramy
12
3.4k
App Router 悲喜交々
quramy
8
630
上手に付き合うコンポーネントテスト
quramy
6
2.1k
Patched fetch did not work
quramy
6
690
GraphQL あるいは React における自律的なデータ取得について
quramy
18
5.4k
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
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
260
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
490
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
160
Yes, You Can Work on Rails & any other Gem
kaspth
0
110
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
140
リッチエディターを安全に開発・運用するために
unachang113
1
230
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
4
1.2k
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
210
slogパッケージの深掘り
integral0515
0
120
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
180
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
690
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
730
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
How STYLIGHT went responsive
nonsquared
100
5.6k
The Invisible Side of Design
smashingmag
301
51k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Visualization
eitanlees
146
16k
A better future with KSS
kneath
238
17k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
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