Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Visual regression testing - move fast and try n...
Search
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.
Daniel Furze
September 27, 2016
Tweet
Share
More Decks by Daniel Furze
See All by Daniel Furze
My First Progressive Webapp
furzeface
0
57
ES-What?!
furzeface
0
220
CSS - with speaker notes
furzeface
1
120
CSS
furzeface
1
210
The Lean Studio
furzeface
1
42
Don't be scared of open source!
furzeface
1
34
Other Decks in Technology
See All in Technology
S3アクセス制御の設計ポイント
tommy0124
3
210
データ分析エージェント Socrates の育て方
na0
8
2.7k
株式会社ログラス - 会社説明資料【エンジニア】/ Loglass Engineer
loglass2019
4
65k
新規プロダクトでプロトタイプから正式リリースまでNext.jsで開発したリアル
kawanoriku0
1
220
Claude Code でアプリ開発をオートパイロットにするためのTips集 Zennの場合 / Claude Code Tips in Zenn
wadayusuke
5
1.9k
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
22
12k
スクラムガイドに載っていないスクラムのはじめかた - チームでスクラムをはじめるときに知っておきたい勘所を集めてみました! - / How to start Scrum that is not written in the Scrum Guide 2nd
takaking22
2
210
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
1.2k
Apache Spark もくもく会
taka_aki
0
140
Modern Linux
oracle4engineer
PRO
0
160
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.2k
AIエージェントで90秒の広告動画を制作!台本・音声・映像・編集をつなぐAWS最新アーキテクチャの実践
nasuvitz
3
360
Featured
See All Featured
Fireside Chat
paigeccino
39
3.6k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Unsuck your backbone
ammeep
671
58k
Embracing the Ebb and Flow
colly
87
4.8k
Automating Front-end Workflow
addyosmani
1370
200k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Transcript
Move fast and try not to break things Visual Regression
Testing @furzeface bit.ly/df-vrt-slides
@furzeface bit.ly/df-vrt-slides Move fast and try not to break things
Visual Regression Testing
@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?!
@furzeface bit.ly/df-vrt-slides Why?
@furzeface bit.ly/df-vrt-slides CSS is hard
@furzeface bit.ly/df-vrt-slides Testing is boring (sorry)
@furzeface bit.ly/df-vrt-slides When?
@furzeface bit.ly/df-vrt-slides Where? Test ALL the things???
@furzeface bit.ly/df-vrt-slides How? Sounds like hard work…
@furzeface bit.ly/df-vrt-slides How? Pick some software BackstopJS PhantomCSS OcularJS CSS
Critic Galen
@furzeface bit.ly/df-vrt-slides How? Install npm install phantomjs casperjs -g npm
install --save-dev backstopjs (requires Python)
@furzeface bit.ly/df-vrt-slides How? Generate a config npm explore backstopjs --
npm run genConfig
@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
@furzeface bit.ly/df-vrt-slides How? Generate reference screenshots npm explore backstopjs --
npm run reference
@furzeface bit.ly/df-vrt-slides How? Generate reference screenshots
@furzeface bit.ly/df-vrt-slides Break your CSS How?
@furzeface bit.ly/df-vrt-slides
@furzeface bit.ly/df-vrt-slides How? Test npm explore backstopjs -- npm run
test
@furzeface bit.ly/df-vrt-slides
@furzeface bit.ly/df-vrt-slides
@furzeface bit.ly/df-vrt-slides
@furzeface bit.ly/df-vrt-slides How? Fix and re-test
@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
@furzeface bit.ly/df-vrt-slides Who? Everyone! Front-end developer Back-end developer Designer QA
engineer
@furzeface bit.ly/df-vrt-slides Summary Hurry up! Straightforward set up Peace of
mind Works for many people Improve confidence
@furzeface bit.ly/df-vrt-slides Thanks! You rock.
@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