Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Visual regression testing - move fast and try n...

Avatar for Daniel Furze Daniel Furze
September 27, 2016
Technology
0
670

Visual regression testing - move fast and try not to break things

My slides on automating visual regression testing, from Front End North 2016.
Avatar for Daniel Furze

Daniel Furze

September 27, 2016
Tweet

More Decks by Daniel Furze

See All by Daniel Furze
My First Progressive Webapp
Avatar for Daniel Furze furzeface
0
56
ES-What?!
Avatar for Daniel Furze furzeface
0
220
CSS - with speaker notes
Avatar for Daniel Furze furzeface
1
120
CSS
Avatar for Daniel Furze furzeface
1
210
The Lean Studio
Avatar for Daniel Furze furzeface
1
41
Don't be scared of open source!
Avatar for Daniel Furze furzeface
1
33

Other Decks in Technology

See All in Technology
Agentic Workflowという選択肢を考える
Avatar for takuya kikuchi tkikuchi1002
1
490
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
Avatar for Shun Yoshie syoshie
2
1k
Witchcraft for Memory
Avatar for pocke pocke
1
260
生成AIでwebアプリケーションを作ってみた
Avatar for tajimon tajimon
2
140
ひとり情シスなCTOがLLMと始めるオペレーション最適化 / CTO's LLM-Powered Ops
Avatar for Mitsuki Ogasahara yamitzky
0
420
製造業からパッケージ製品まで、あらゆる領域をカバー！生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
130
SalesforceArchitectGroupOsaka#20_CNX'25_Report
Avatar for atomica7sei atomica7sei
0
150
～宇宙最速～ 2025年AWS Summit レポート
Avatar for sleepingsato satodesu
1
1.8k
ハノーバーメッセ2025座談会.pdf
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
160
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
26k
Navigation3でViewModelにデータを渡す方法
Avatar for mikan mikanichinose
0
220
Wasm元年
Avatar for asuka askua
0
140

Featured

See All Featured
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
346
40k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
524
40k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
228
22k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
46
9.6k
Faster Mobile Websites
Avatar for Dean Hume deanohume
307
31k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
36
2.8k

Transcript

  1. Move fast and try not to break things Visual Regression

    Testing @furzeface bit.ly/df-vrt-slides

  2. @furzeface bit.ly/df-vrt-slides Move fast and try not to break things

    Visual Regression Testing

  3. @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?!

  4. @furzeface bit.ly/df-vrt-slides Why?

  5. @furzeface bit.ly/df-vrt-slides CSS is hard

  6. @furzeface bit.ly/df-vrt-slides Testing is boring (sorry)

  7. @furzeface bit.ly/df-vrt-slides When?

  8. @furzeface bit.ly/df-vrt-slides Where? Test ALL the things???

  9. @furzeface bit.ly/df-vrt-slides How? Sounds like hard work…

  10. @furzeface bit.ly/df-vrt-slides How? Pick some software BackstopJS PhantomCSS OcularJS CSS

    Critic Galen

  11. @furzeface bit.ly/df-vrt-slides How? Install npm install phantomjs casperjs -g npm

    install --save-dev backstopjs (requires Python)

  12. @furzeface bit.ly/df-vrt-slides How? Generate a config npm explore backstopjs --

    npm run genConfig

  13. @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

  14. @furzeface bit.ly/df-vrt-slides How? Generate reference screenshots npm explore backstopjs --

    npm run reference

  15. @furzeface bit.ly/df-vrt-slides How? Generate reference screenshots

  16. @furzeface bit.ly/df-vrt-slides Break your CSS How?

  17. @furzeface bit.ly/df-vrt-slides

  18. @furzeface bit.ly/df-vrt-slides How? Test npm explore backstopjs -- npm run

    test

  19. @furzeface bit.ly/df-vrt-slides

  20. @furzeface bit.ly/df-vrt-slides

  21. @furzeface bit.ly/df-vrt-slides

  22. @furzeface bit.ly/df-vrt-slides How? Fix and re-test

  23. @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

  24. @furzeface bit.ly/df-vrt-slides Who? Everyone! Front-end developer Back-end developer Designer QA

    engineer

  25. @furzeface bit.ly/df-vrt-slides Summary Hurry up! Straightforward set up Peace of

    mind Works for many people Improve confidence

  26. @furzeface bit.ly/df-vrt-slides Thanks! You rock.

  27. @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