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
Search
Yosuke Kurami
November 25, 2017
Programming
1
3.2k
Introduction to Visual Regression Testing
For nodefest 17.
How introduce Visual Regression Testing into out products.
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
Revisiting the Hotwire Landscape after Turbo 8 @ RailsConf 2024, Detroit
marcoroth
3
610
TypeScriptコードの漸進的改善 / Progressive Improvement of TypeScript Code
medley
1
450
otelcol receiver 自作RTA / Pepabo Tech Conference #22 春のSREまつり
arthur1
0
1.1k
『WordPressコミュニティで学ぶ』OSS貢献の多様性
ippey
0
280
勉強会4_アップデートされたAssistantsAPIを試す
milky04
0
110
WebGLで始める コンピュータグラフィックス入門
heller77
0
390
教えて!スクラムコーチ品質とスピードのバランスはどうすりゃいいの?
pinboro
0
150
Using "modern" Ruby to build a better, faster Homebrew
mikemcquaid
2
290
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
74k
Documentation testsの恩恵 / Documentation testing benefits
ssssota
1
570
GitHub Actionsの痒いところを埋めるサードパーティーランナー
dora1998
2
280
Escolhendo (ou não) o melhor ORM para o seu projeto
andreiacsilva
1
160
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
9
1.3k
Embracing the Ebb and Flow
colly
80
4.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
67
14k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Side Projects
sachag
451
41k
Become a Pro
speakerdeck
PRO
13
4.6k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Debugging Ruby Performance
tmm1
70
11k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.5k
Done Done
chrislema
178
15k
Transcript
Introduction to Visual Regression Testing #nodefest ‘17
5PEBZ`TUIFNF
)PXXFJOUSPEVDF l7JTVBM3FHSFTTJPO5FTUz UPPVSQSPEVDU 41"
8IZ7JTVBM3FHSFTTJPO
1. How assert components ? w *Gtype: B XIBULJOEQSPQFSUZEPZPVBTTFSU
nodeName or 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. How assert DOM ? w 0WFSBTTFSUJPO-PXNBJOUBJOBCJMJUZʜ 'FXBTTFSUJPO6OFBTJOFTTʜ w 4P
l4OBQTIPUUFTUJOHz ƭ The latest snapshot (DOM String) ƭ The actual snapshot (DOM String) Update if snapshot is accepted Assertion
2. We want to test Styles w 0VSVTFSTBSFOPUJOUFSFTUFEJO$44DMBTTOBNF .hoge {
padding: 15px; color: #808080; border: 1px solid currentColor; } <div class="hoge"> ABCDEF </div> JOUFSFTUFE OPUJOUFSFTUFE
That is question: To create or not to create w
*OJUJBMMZXFUSJFETPNFTFSWJDFTPSUPPMT )PXFWFSUIFSFXBTOPUXIBUXFXBOU w 8FEFDJEFEUPEFWFMPQPVSl7JTVBM3FHSFTTJPO 5FTUJOHzTZTUFN
Divide into smaller problems w $BQUVSFTOBQTIPUT TDSFFOTIPUJNBHFT w DPOTJEFSJOHJOUPl)PXJNQMFNFOUBOEUFTUz
w $PNQBSFTOBQTIPUT TDSFFOTIPUJNBHFT w DPOTJEFSJOHJOUPl%FWFMPQNFOUXPSLqPXz
$BQUVSFTOBQTIPUT
Which tools do we use?
(e.g.) Stack of our product 'PSFYBNQMF "QQ'SBNFXPSL "OHVMBS 5FTU'SBNFXPSL +BTNJOF
5FTU3VOOFS IBOENBEFUPPM #SPXTFS .BOJQVMBUPS 1VQQFUFFS $POUJOVPVT*OUFHSBUJPO 0SBDMF8FSDLFS$*
5IFSFBSFWBSJPVTXBZT 8FEPOPUJOUSPEVDFNFUIPETJOTQFDJpDMJCSBSJFT
5JQTGPSBVUPNBUFEDBQUVSF JOEFQFOEFOUPGUPPMT
1. Web browsers in your CI env 1MFBTFSFGFSXIFOZPVDSFBUF%PDLFS*NBHFT w
*GZPVXBOUVTFlSFBMzXFCCSPXTFST w :PVOFFEYWGC 9XJOEPX7JSUVBM'SBNF#V⒎FS w *GZPVXBOUUPVTF$ISPNFXJUIlIFBEMFTT w :PVOFFEYDC 9QSPUPDPM$MBOH#JOEJOHT
2. □□□□□□□□□ ˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘ $*˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘ ˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘ ˘˘˘˘˘˘˘˘.JH.JY˘˘˘˘˘˘˘˘˘
2. ϑΥϯτೖΕ͓ͯ͘ ϚϧνόΠτݍΛλʔήοτʹ։ൃ͍ͯ͠ΔͷͰ͋Ε $*ʹϑΥϯτΛೖΕ͓͖ͯ·͠ΐ͏ɻ ં֯ͷΩϟϓνϟը૾͕౾ͩΒ͚ʹͳΓ·͢ɻ ͏ͪͷνʔϜͰ.JH.JYϑΥϯτΛ͍ͬͯ·͢ɻ
3. Avoid “false positive” 5PHVBSBOUFFl4BNFTPVSDF TBNFJNBHFz w 4VQQSFTT$44"OJNBUJPO w &YFDVUFDBQUVSJOHBTMBUFBTQPTTJCMF
* { transition: none !important; animation: none !important; } requestIdleCallback(() => screenshot(), { timeout: 30000 });
$PNQBSFTOBQTIPUT
We’ve released a tool https://reg-viz.github.io/reg-suit/
reg-suit features SFHTVJUJOUFHSBUFTUIFGPMMPXJOHUBTLT w %FUFDUEJ⒎FSFODF w )FMQUPWJFXEJ⒎FSFODF w 6QEBUFTOBQTIPUT
Difference is not necessarily failure SFHTVJUQSPWJEFTUIJTqPX
%FNP
Demo 1. Push ~ Detection
Demo 2. Notify to reviewers
Demo 3. Review the difference
Integration with GitHub flow
(almost all) Built with JavaScript w $-* /PEFKT w
$PNQBSFJNBHFTQOHKT QJYFMNBUDI w 4UPSFJNBHFT"844%, w (JU)VC"QQ "84-BNCEB w "QPMMP(SBQI2-$MJFOU w $PNQBSJTPO3FQPSU 8FC#SPXTFS w 'SPOUFOE7VFKT w %J⒎FSFODFNBSLFST0QFO$7 8FC"TTFNCMZ
4VNNBSZ
Summary w "EWBOUBHFPGWJTVBMUFTUJOH w &OIBODFUIFNPUJWBUJPOUPXSJUFUFTUDPEFT w 3FEVDFUIFMPBEPGSFWJFXFST w SFHTVJUJTTUJMMJODPNQMFUFʜ w
8F`SFXFMDPNFZPVSGFFECBDLBOE13T
Thank you ! by @Quramy