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
Visual regression testing - move fast and try not to break things
Search
Daniel Furze
September 27, 2016
Technology
0
660
Visual regression testing - move fast and try not to break things
My slides on automating visual regression testing, from Front End North 2016.
Daniel Furze
September 27, 2016
Tweet
Share
More Decks by Daniel Furze
See All by Daniel Furze
My First Progressive Webapp
furzeface
0
51
ES-What?!
furzeface
0
210
CSS - with speaker notes
furzeface
1
110
CSS
furzeface
1
200
The Lean Studio
furzeface
1
35
Don't be scared of open source!
furzeface
1
29
Other Decks in Technology
See All in Technology
Autify Company Deck
autifyhq
1
30k
大規模データとの戦い方
knih
1
460
プッシュ型子育てサービスを、先行プロジェクト実施自治体において開始します
govtechtokyo
0
240
TCA入門したてなので、自分が馴染みのある実装と比較しながらキャッチアップしてみる
fumiyasac0921
1
370
データマネジメントを支える武器としてのメタデータ管理
10xinc
1
340
これまでのキャリアとこれからMLエンジニアとしてどう動くか
masatakashiwagi
0
290
CI/CDがあたりまえの今の時代にAPIテスティングツールに求められていること / CI/CD Test Night #7
k1low
12
2.9k
ビジネスロジックを「型」で表現するOOPのための関数型DDD / Functional And Type-Safe DDD for OOP
yuitosato
29
12k
複数の LLM モデルを扱う上で直面した辛みまとめ
kazuyaseki
1
230
Getting started with controlling LEGO using Swift
hcrane
0
130
大規模なアジャイル開発の現場と技術負債 / Technical Debt
yoshiitaka
20
4k
技育祭2024春 LT Finatextホールディングス
kevinrobot34
1
160
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
355
22k
GraphQLとの向き合い方2022年版
quramy
28
12k
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
Become a Pro
speakerdeck
PRO
8
4.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
Fantastic passwords and where to find them - at NoRuKo
philnash
35
2.4k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.6k
A Tale of Four Properties
chriscoyier
150
22k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
219
21k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.3k
Scaling GitHub
holman
456
140k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.4k
Transcript
Move fast and try not to break things Visual Regression
Testing @furzeface bit.ly/df-vrt-slides
@furzeface bit.ly/df-vrt-slides Move fast and try not to break things
Visual Regression Testing
@furzeface bit.ly/df-vrt-slides "Regression testing is a method of software testing
that checks functionality that already exists against new changes that have been made to a codebase, to catch regressions." (Thanks, Wikipedia!) What?!
@furzeface bit.ly/df-vrt-slides Why?
@furzeface bit.ly/df-vrt-slides CSS is hard
@furzeface bit.ly/df-vrt-slides Testing is boring (sorry)
@furzeface bit.ly/df-vrt-slides When?
@furzeface bit.ly/df-vrt-slides Where? Test ALL the things???
@furzeface bit.ly/df-vrt-slides How? Sounds like hard work…
@furzeface bit.ly/df-vrt-slides How? Pick some software BackstopJS PhantomCSS OcularJS CSS
Critic Galen
@furzeface bit.ly/df-vrt-slides How? Install npm install phantomjs casperjs -g npm
install --save-dev backstopjs (requires Python)
@furzeface bit.ly/df-vrt-slides How? Generate a config npm explore backstopjs --
npm run genConfig
@furzeface bit.ly/df-vrt-slides How? Generate a config "scenarios": [ { "label":
"Styleguide", "url": "http://localhost:3000/styleguide", "selectors": [ "body", ".site-header", ".article", ".site-footer" ] } ] backstop.json
@furzeface bit.ly/df-vrt-slides How? Generate reference screenshots npm explore backstopjs --
npm run reference
@furzeface bit.ly/df-vrt-slides How? Generate reference screenshots
@furzeface bit.ly/df-vrt-slides Break your CSS How?
@furzeface bit.ly/df-vrt-slides
@furzeface bit.ly/df-vrt-slides How? Test npm explore backstopjs -- npm run
test
@furzeface bit.ly/df-vrt-slides
@furzeface bit.ly/df-vrt-slides
@furzeface bit.ly/df-vrt-slides
@furzeface bit.ly/df-vrt-slides How? Fix and re-test
@furzeface bit.ly/df-vrt-slides How? Bonus automation "scripts": { "bless": "npm explore
backstopjs -- npm run bless", "openReport": "npm explore backstopjs -- npm run openReport", "reference": "npm explore backstopjs -- npm run reference", "test": "npm explore backstopjs -- npm run test" } package.json
@furzeface bit.ly/df-vrt-slides Who? Everyone! Front-end developer Back-end developer Designer QA
engineer
@furzeface bit.ly/df-vrt-slides Summary Hurry up! Straightforward set up Peace of
mind Works for many people Improve confidence
@furzeface bit.ly/df-vrt-slides Thanks! You rock.
@furzeface bit.ly/df-vrt-slides Blog post bit.ly/df-vrt GitHub demo bit.ly/df-vrt-demo Slides/Transcript bit.ly/df-vrt-slides
Feedback bit.ly/df-vrt-feedback Further reading