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
830
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
Next.js App Router
quramy
14
2.3k
Fragment Composition of GraphQL
quramy
14
1.7k
reg-viz VRT tools
quramy
4
900
NoInfer
quramy
0
120
Precondition with schema directives
quramy
0
1.1k
T3 Stack and TypeScript ecosystem
quramy
4
1.7k
apollo client / react / esm
quramy
1
210
Apollo Client useFragment
quramy
1
630
About Type Syntax Proposal
quramy
1
1.9k
Other Decks in Programming
See All in Programming
An adventure of Happy Eyeballs
coe401_
1
260
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
6
2k
mb_trim関数を作りました
youkidearitai
PRO
1
240
Amazon Aurora Serverless v2が意外と高かった話と、AWS Database Migration Serviceの話
satoshi256kbyte
1
110
欠陥を早期に発見するための Software Engineer in Test とその重要性 / What is Software Engineer in Test and How they works
orgachem
PRO
18
2.5k
Revisiting the Hotwire Landscape after Turbo 8 @ RailsConf 2024, Detroit
marcoroth
3
610
WinActorの勉強を継続する方法
tamai_63
0
130
Adding Security to Microcontroller Ruby
sylph01
1
160
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
74k
PHPコードの実行モデルを理解する / Understanding-the-PHP-Execution-Model
shin1x1
0
1.1k
JS RPCを理解する
yusukebe
5
290
Ruby on Fails - effective error handling with Rails conventions
talyssonoc
0
300
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
Web development in the modern age
philhawksworth
203
10k
Navigating Team Friction
lara
179
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Testing 201, or: Great Expectations
jmmastey
30
6.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
34
6.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
22
1.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Web Components: a chance to create the future
zenorocha
306
41k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
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