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
670
0

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

More Decks by Daniel Furze

See All by Daniel Furze
My First Progressive Webapp
Avatar for Daniel Furze furzeface
0
62
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
220
The Lean Studio
Avatar for Daniel Furze furzeface
1
45
Don't be scared of open source!
Avatar for Daniel Furze furzeface
1
40

Other Decks in Technology

See All in Technology
DGX Sparkを2台使って いろいろ動かす話
Avatar for そのだ sonoda_mj
1
130
現場に行くだけでは足りない——プロダクトエンジニアが業務の流れを捉える観点と、その鍛え方
Avatar for 匠技研工業株式会社 / Takumi Engineering, inc. takumiengineering
0
280
Hub & Spoke 環境のネットワークルーティングを分解してみる
Avatar for Tsuyataku tsuyataku
1
530
Where Is JetBrains AI Heading- — Central CLI, Air Alpha, and the Agentic Development Stack
Avatar for Daisuke Masuda x5gtrn
PRO
0
120
Tab5をRubyで動くパソコンにする
Avatar for Katsuhiko Kageyama kishima
1
180
Bet AI Day 2026丨バクラク Autopilot、業務システムの再設計
Avatar for LayerX layerx
PRO
2
1.2k
KPIだけでは評価できないプロダクトが考えるべき Evalsという第二の評価系 / Beyond KPIs: Evals as a Second Evaluation Framework for Products #PdEConf
Avatar for Aki / @LoveIdahoBurger aki_iinuma
4
3.6k
AI 駆動 Terraform 開発/SRE_BizReach_MIXI_2
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
1
420
AIで仕事のやり方を変える
Avatar for Kentaro Matsumoto matsu7874
1
530
#jawssonic2026 あの時代が悪かった ~動かなかったSageMakerと共に迎えたイベント当日~
Avatar for Kana Kitagawa ktkn1129
0
130
Sony-DroidKaigi2026
Avatar for ソニー株式会社 sony
1
320
AndroidでHDRメディアを「壊さずに」扱う
Avatar for Kazuki Chigita chigichan24
0
400

Featured

See All Featured
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
490
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
520
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.7k
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
1
520
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
330
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
210
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
67k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
9
970
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
300
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
6.1k

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