Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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
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
130
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
Incremental HTTP
Avatar for kazuho kazuho
3
640
Claude Designがめちゃくちゃ便利なので使ってほしい
Avatar for morimorikochan diggymo
0
140
顧客の成果創出とプロダクトの成長を 両立するためのFDE
Avatar for SansanTech sansantech
PRO
0
480
AI駆動開発で仕様はどこまで書くべきか？ ― 人とAIの責務境界から考える開発プロセスの実践
Avatar for matsui-dmm takahiromatsui
1
230
地方移住と都心キャリアの両立は「金・時間・人」のリソースをフル活用すれば実現できる！〜Snowflake女子会 vol.8
Avatar for SnowflakeLadiesGroup snowwmn0824
0
130
Swap and Memory Reclaim - Squeezing Out More RAM
Avatar for Kernel Recipes ennael
PRO
1
1.3k
Coil3を内部実装から読み解く～キャッシュ戦略とAVIF画像の描画〜/nikkei-tech-talk50
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
160
なぜAI任せのゲームは面白くならないのか？
Avatar for Hirohasu hirohasuyoutube
0
310
雪かき部 #7 もう怖くない！SELECT文！
Avatar for numa foursue
0
190
Azure Copilot Resiliency Agentをいろいろ試してみる
Avatar for tomokusaba tomokusaba
0
140
「今盗んで、後で解く」に備える ― AWSのポスト量子暗号入門
Avatar for Yuuki Yamashita yama3133
2
270
Harness Engineering on Rails
Avatar for Joël Quenneville joelq
0
760

Featured

See All Featured
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
250
1.3M
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
250
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
1k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
2.1k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
240
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
3
1.3k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
4k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.3k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
55
13k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
200

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