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
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
45
Don't be scared of open source!
Avatar for Daniel Furze furzeface
1
38

Other Decks in Technology

See All in Technology
ナレッジワーク IT情報系キャリア研究セッション資料（情報処理学会 第88回全国大会 ）
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
0
160
[E2]CCoEはAI指揮官へ。Bedrock×MCPで構築するコスト・セキュリティ自律運用基盤
Avatar for ishii-takuya taku1418
0
130
EMからVPoEを経てCTOへ：マネジメントキャリアパスにおける葛藤と成長
Avatar for KAKEHASHI kakehashi
PRO
9
1.7k
JAWS FESTA 2025でリリースしたほぼリアルタイム文字起こし/翻訳機能の構成について
Avatar for 木村直紀 naoki8408
1
310
製造業ドメインにおける LLMプロダクト構築： 複雑な文脈へのアプローチ
Avatar for recruiting@caddi.jp caddi_eng
1
550
[JAWSDAYS2026][D8]その起票、愛が足りてますか？AWSサポートを味方につける、技術的「ラブレター」の書き方
Avatar for hirosys hirosys_
3
120
8万デプロイ
Avatar for iwamot iwamot
PRO
2
230
OCI技術資料 : コンピュート・サービス 概要
Avatar for Oracle Cloud Infrastructure ソリューション・エンジニア ocise
4
54k
AIエージェント、 社内展開の前に知っておきたいこと
Avatar for oracle4engineer oracle4engineer
PRO
2
100
OpenClawで回す組織運営
Avatar for Kazuto Kusama jacopen
3
690
Claude Codeが爆速進化してプラグイン追従がつらいので半自動化した話 ver.2
Avatar for ryu rfdnxbro
0
500
プロジェクトマネジメントをチームに宿す -ゼロからはじめるチームプロジェクトマネジメントは活動1年未満のチームの教科書です- / 20260304 Shigeki Morizane
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
250

Featured

See All Featured
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
5.5k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
17k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
1.8k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.5k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
0
390
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
140
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
150
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
1.9k

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