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

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

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
SRE Enabling戦記 - 急成長する組織にSREを浸透させる戦いの歴史
Avatar for Masaki Ishigaki markie1009
0
140
こんなところでも（地味に）活躍するImage Modeさんを知ってるかい？- Image Mode for OpenShift -
Avatar for Masataka Tsukamoto tsukaman
1
160
生成AIを活用した音声文字起こしシステムの2つの構築パターンについて
Avatar for Kazuki Miura miu_crescent
PRO
3
210
We Built for Predictability; The Workloads Didn’t Care
Avatar for Michael Stahnke stahnma
0
140
AIと新時代を切り拓く。これからのSREとメルカリIBISの挑戦
Avatar for ktykogm 0gm
2
3k
会社紹介資料 / Sansan Company Profile
Avatar for Sansan, Inc. sansan33
PRO
15
400k
学生・新卒・ジュニアから目指すSRE
Avatar for Hiroya Onoe hiroyaonoe
2
700
Ruby版 JSXのRuxが気になる
Avatar for SansanTech sansantech
PRO
0
160
FinTech SREのAWSサービス活用/Leveraging AWS Services in FinTech SRE
Avatar for maaaato maaaato
0
130
Agile Leadership Summit Keynote 2026
Avatar for seki at druby.org m_seki
1
650
マーケットプレイス版Oracle WebCenter Content For OCI
Avatar for oracle4engineer oracle4engineer
PRO
5
1.6k
Context Engineeringの取り組み
Avatar for nutslove nutslove
0
370

Featured

See All Featured
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
0
1.1k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
4
1.4k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.4k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.1k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
240
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
740
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.6k
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
4.9k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.6k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Scaling GitHub
Avatar for Zach Holman holman
464
140k

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