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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
59
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
44
Don't be scared of open source!
Avatar for Daniel Furze furzeface
1
37

Other Decks in Technology

See All in Technology
配列に見る bash と zsh の違い
Avatar for kazzpapa3 kazzpapa3
3
160
20260204_Midosuji_Tech
Avatar for Takuya Yonezawa takuyay0ne
1
160
レガシー共有バッチ基盤への挑戦 - SREドリブンなリアーキテクチャリングの取り組み
Avatar for Konishi tatsuhiro tatsukoni
0
220
Agile Leadership Summit Keynote 2026
Avatar for seki at druby.org m_seki
1
650
22nd ACRi Webinar - NTT Kawahara-san's slide
Avatar for Nao Sumikawa nao_sumikawa
0
100
Context Engineeringの取り組み
Avatar for nutslove nutslove
0
370
プロポーザルに込める段取り八分
Avatar for ShoheiMitani shoheimitani
1
540
[CV勉強会@関東 World Model 読み会] Orbis: Overcoming Challenges of Long-Horizon Prediction in Driving World Models (Mousakhan+, NeurIPS 2025)
Avatar for abemii_ abemii
0
140
【Ubie】AIを活用した広告アセット「爆速」生成事例 | AI_Ops_Community_Vol.2
Avatar for Yoshiki yoshiki_0316
1
110
SREが向き合う大規模リアーキテクチャ 〜信頼性とアジリティの両立〜
Avatar for Kuniaki Moriya zepprix
0
470
AIと新時代を切り拓く。これからのSREとメルカリIBISの挑戦
Avatar for ktykogm 0gm
2
2.9k
CDKで始めるTypeScript開発のススメ
Avatar for つくぼし tsukuboshi
1
500

Featured

See All Featured
Between Models and Reality
Avatar for mayunak mayunak
1
190
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
110
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
160
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
260
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
660
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
200
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
420
KATA
Avatar for Megan Lloyd mclloyd
PRO
34
15k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
180
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
200
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
410

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