Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Visual Testing: A Communication Problem
Search
Bas Broek
June 15, 2018
Programming
160
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Visual Testing: A Communication Problem
Bas Broek
June 15, 2018
More Decks by Bas Broek
See All by Bas Broek
Assistive Access: Reinventing Your App for a New (sort of) Generation
basthomas
0
41
Roasting Your App's Accessibility
basthomas
0
77
Building an Accessibility Culture, One Step at a Time (Leeds)
basthomas
0
180
Building an Accessibility Culture, One Step at a Time
basthomas
1
140
Building a modern subscription experience on iOS
basthomas
0
250
Not an afterthought: accessibility from start to finish
basthomas
0
210
Accessibility on Apple Platforms: Beyond VoiceOver
basthomas
0
220
No Touch(screen) Required: Voice & Keyboard Accessibility
basthomas
0
220
Dancing with Dinosaurs: Objective-C and Swift Interop
basthomas
0
220
Other Decks in Programming
See All in Programming
baseline으로 마이그레이션, 리팩토링 안전하게 맡기기
fornewid
1
960
そのデザイントークン、Flutterでも同じ見た目になりますか?
nakamizu
0
320
自作Discord音声botをLambda MicroVMsに移行した話 / Migrating My Discord Voice Bot to Lambda MicroVMs
akihisaikeda
1
300
조합이폭발하는디자인시스템이걸눈으로도테스트하라고요
giljongyu
0
740
AmebaブログはKMPから卒業します
kmars0605
0
340
SODA - FACT BOOK(EN)
sodainc
1
220
AI-Powered Domain-Driven Design
ziobrando
0
420
LLM 101
dalinaum
0
470
3回つくってわかった、 定期実行ジョブ基盤の本質情報
takai
4
3.8k
Materialが消えた日 〜真っ白なFlutterキャンバスにRenderObjectで絵を描く〜
umigishiaoi
0
150
Herb in Rails 8.2: Your ERB views, now HTML-aware @ Kaigi on Rails 2026, Tokyo, Japan
marcoroth
2
420
SODA - FACT BOOK(JP)
sodainc
1
40k
Featured
See All Featured
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
1
470
New Earth Scene 8
popppiees
4
2.8k
Optimising Largest Contentful Paint
csswizardry
37
4k
A Soul's Torment
seathinner
8
3.9k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
480
The browser strikes back
jonoalderson
0
1.9k
Google's AI Overviews - The New Search
badams
0
1.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
23k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Technical Leadership for Architectural Decision Making
baasie
3
640
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
The Cult of Friendly URLs
andyhume
79
7.1k
Transcript
VISUAL TESTING A COMMUNICATION PROBLEM 1 — @basthomas
COMMUNICATION IS HARD 2 — @basthomas
SNAPSHOT TESTING 3 — @basthomas
func testViewWithSecondaryInteraction() { let viewUnderTest = InteractionBarView() let primaryInteractions: [Interaction]
= [.recommend, .comment, .like] let secondaryInteractions: [Interaction] = [.report] viewUnderTest.setup( withInteractions: primaryInteractions, secondaryInteractions: secondaryInteractions ) validateSnapshots(forView: viewUnderTest) } 4 — @basthomas
func testViewWithSecondaryInteraction() { let viewUnderTest = InteractionBarView() let primaryInteractions: [Interaction]
= [.recommend, .comment, .like] let secondaryInteractions: [Interaction] = [.report] viewUnderTest.setup( withInteractions: primaryInteractions, secondaryInteractions: secondaryInteractions ) validateSnapshots(forView: viewUnderTest) } 5 — @basthomas
func testViewWithSecondaryInteraction() { let viewUnderTest = InteractionBarView() let primaryInteractions: [Interaction]
= [.recommend, .comment, .like] let secondaryInteractions: [Interaction] = [.report] viewUnderTest.setup( withInteractions: primaryInteractions, secondaryInteractions: secondaryInteractions ) validateSnapshots(forView: viewUnderTest) } 6 — @basthomas
func testViewWithSecondaryInteraction() { let viewUnderTest = InteractionBarView() let primaryInteractions: [Interaction]
= [.recommend, .comment, .like] let secondaryInteractions: [Interaction] = [.report] viewUnderTest.setup( withInteractions: primaryInteractions, secondaryInteractions: secondaryInteractions ) validateSnapshots(forView: viewUnderTest) } 7 — @basthomas
func testViewWithSecondaryInteraction() { let viewUnderTest = InteractionBarView() let primaryInteractions: [Interaction]
= [.recommend, .comment, .like] let secondaryInteractions: [Interaction] = [.report] viewUnderTest.setup( withInteractions: primaryInteractions, secondaryInteractions: secondaryInteractions ) validateSnapshots(forView: viewUnderTest) } 8 — @basthomas
func testViewWithSecondaryInteraction() { let viewUnderTest = InteractionBarView() let primaryInteractions: [Interaction]
= [.recommend, .comment, .like] let secondaryInteractions: [Interaction] = [.report] viewUnderTest.setup( withInteractions: primaryInteractions, secondaryInteractions: secondaryInteractions ) validateSnapshots(forView: viewUnderTest) } 9 — @basthomas
10 — @basthomas
WHAT IF THE DESIGN CHANGES? 11 — @basthomas
WHAT IF ONE OF THE PRIMARY INTERACTIONS CHANGES? 12 —
@basthomas
! 13 — @basthomas
IT IS EASY TO MAKE A MISTAKE 14 — @basthomas
NAMING IS HARD 15 — @basthomas
NAMING IS HARD > testCellWithPageControlOnPage2of3 > testCellWithLongNameAndJob > testWithShortContent >
testTwoBirthdaysUnseenElement > testStateLoadMoreFailedInsertedOnTop > testSlideupViewWithNoIconNoButton 16 — @basthomas
DO YOU HAVE ANY IDEA WHAT IT IS WE'RE TESTING
HERE? 17 — @basthomas
... MAYBE? 18 — @basthomas
DO YOU HAVE ANY IDEA WHEN THESE TESTS ARE EXPECTEDLY
FAILING? 19 — @basthomas
ME NEITHER 20 — @basthomas
A FAILING SNAPSHOT TEST 21 — @basthomas
22 — @basthomas
testCellWithPageControlOnPage2of3 SO, IT SHOULDN'T BE 23 — @basthomas
! 24 — @basthomas
REPLACEABLE BY UNIT TESTS 25 — @basthomas
SNAPSHOTS AT SCALE 26 — @basthomas
WE MADE IT HARDER ON OURSELVES FORK, WRAPPER, WRAPPER, WRAPPER
27 — @basthomas
DOCUMENT DECISIONS 28 — @basthomas
MULTIPLE SIMULATORS 29 — @basthomas
SPACE 30 — @basthomas
IDE UPDATES 31 — @basthomas
! 32 — @basthomas
!"!"!"!"! !"!"!"!"! !"!"!"!"! !"!"!"!"! !"!"!"!"! 33 — @basthomas
SNAPSHOTS ARE SUBJECTIVE 34 — @basthomas
IT IS NOT ALL BAD 35 — @basthomas
QUESTION THINGS > "but I just copied it" > "but
others are doing it" > "but I can't write a unit test here" > "but ..." 36 — @basthomas
HOW TO PREVENT THIS 37 — @basthomas
DOCUMENT 38 — @basthomas
DOCUMENT COMMUNICATE 39 — @basthomas
DOCUMENT COMMUNICATE QUESTION THINGS 40 — @basthomas
DOCUMENT COMMUNICATE QUESTION THINGS ITERATE 41 — @basthomas
THANKS! 42 — @basthomas