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
FoodGram
iseruuuuu
0
230
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
yasaichi
7
1.2k
Using "modern" Ruby to build a better, faster Homebrew
mikemcquaid
2
300
mb_trim関数を作りました
youkidearitai
PRO
1
250
Powerfully Typed TypeScript
euxn23
4
1.8k
Productivity is Messing Around and Having Fun
hollycummins
1
190
otelcol receiver 自作RTA / Pepabo Tech Conference #22 春のSREまつり
arthur1
0
1.1k
スタックトレース始めてみた
kuro_kurorrr
5
1.2k
The World is a Network (and We Are Just Nodes)
whatyouhide
0
100
Timeline エディター拡張入門
yucchiy
0
460
Namespace, What and Why
tagomoris
4
1.6k
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
520
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
9
1.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
15
1.6k
Docker and Python
trallard
35
2.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Atom: Resistance is Futile
akmur
260
25k
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
Six Lessons from altMBA
skipperchong
22
3k
What's in a price? How to price your products and services
michaelherold
238
11k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
67
14k
The Cost Of JavaScript in 2023
addyosmani
21
4k
Code Reviewing Like a Champion
maltzj
516
39k
Infographics Made Easy
chrislema
238
18k
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