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

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
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
AIエージェントを安全で速い現場監督にする：Jev・Obsidian・メタハーネス
Avatar for Daisuke Masuda x5gtrn
PRO
0
140
20260915deck.gl-raster を使ってみた
Avatar for rena1208 rena1208
0
170
あなたの知らないAmazon VPC Route Server／Amazon VPC Route Server you don't know about
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
0
160
Making AI Agents Safe and Fast- Jev, Obsidian, and the Meta-Harness
Avatar for Daisuke Masuda x5gtrn
PRO
0
170
HolmesGPTで始めるSREエージェント入門！プラットフォームの障害調査はAIにお任せ 〜
Avatar for Tech Leverages leveragestech
PRO
0
120
KanaAI
Avatar for shreyas shinde shreyas1009
0
130
AI coding 整合正規方法
Avatar for philipz philipz
0
580
1人アドミンな私は AWSアカウント申請をSlackで完結したい！
Avatar for Yosuke Suzuki ysuzuki
0
100
行動するAIのためのオントロジー ｜ DevRev — Encraft #26.pdf
Avatar for Takanori Suzuki dvrv_tknrszk
1
610
認知負荷を吸収し、プロダクトをまたぐPR Preview基盤の設計事例
Avatar for taiki45 taiki45
2
550
PQC移行の今 -- IETF からみた現在地
Avatar for 菅野 哲 / Satoru Kanno satokan
4
690
AWS DevOps Agent スキルをつかいこなそう / Master AWS DevOps Agent Skills
Avatar for Masanori Yamaguchi kinunori
2
640

Featured

See All Featured
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
464
34k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
510
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
1
380
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
10
1.1k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.6k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
203
76k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
600
Design in an AI World
Avatar for tapps tapps
1
340

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