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
1k
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
1.1k
フロントエンドテストの育て方
quramy
12
3.5k
App Router 悲喜交々
quramy
8
640
上手に付き合うコンポーネントテスト
quramy
6
2.2k
Patched fetch did not work
quramy
6
710
GraphQL あるいは React における自律的なデータ取得について
quramy
18
5.4k
Next.js App Router
quramy
15
3.7k
Fragment Composition of GraphQL
quramy
16
4.2k
reg-viz VRT tools
quramy
4
1.5k
Other Decks in Programming
See All in Programming
はじめてのMaterial3 Expressive
ym223
2
880
OSS開発者という働き方
andpad
5
1.7k
アセットのコンパイルについて
ojun9
0
130
為你自己學 Python - 冷知識篇
eddie
1
350
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
330
速いWebフレームワークを作る
yusukebe
5
1.7k
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.5k
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
560
Rancher と Terraform
fufuhu
2
550
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
250
1から理解するWeb Push
dora1998
7
1.9k
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Facilitating Awesome Meetings
lara
55
6.5k
RailsConf 2023
tenderlove
30
1.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Making Projects Easy
brettharned
117
6.4k
Visualization
eitanlees
148
16k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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