1 of 34

Make web development awesome with visual diffing tools

Dan Vanderkam

danvk.org / @danvdk

http://bit.ly/pycon2015-visual-diffs

2 of 34

Who Am I?

  • Google (2006–2014)
    • Search (“sunset nyc”, “population québec”)
    • Flu Trends
    • Google Correlate�
  • Mt. Sinai (2014–)
    • Open source genome visualization

3 of 34

Agenda

  • Screenshot tests & visual diffs
  • Taking screenshots with dpxdt
  • Screenshots & Version Control
  • Problems & Advice

​

http://bit.ly/pycon2015-visual-diffs

4 of 34

Agenda

  • Screenshot tests & perceptual diffs
  • Taking screenshots with dpxdt
  • Screenshots & Version Control
  • Issues & advice for screenshot testing

​

http://bit.ly/pycon2015-visual-diffs

5 of 34

via Brett Slatkin

Velocity 2013: The Secret of Safe Continuous Deployment: Perceptual Diffs

6 of 34

Screenshot Testing

Finds Ponies

7 of 34

Screenshot Tests

  • Bring up a test server
  • Take screenshots in set configurations
    • Typically with PhantomJS
    • (or Selenium)
  • Track pixel changes over time

​

8 of 34

Visual/Perceptual Diffs

9 of 34

Before

After

10 of 34

Before

After

Perceptual Diff

11 of 34

Before

After

12 of 34

13 of 34

14 of 34

15 of 34

Before

After

16 of 34

17 of 34

Agenda

  • Screenshot tests & perceptual diffs
  • Taking screenshots with dpxdt
  • Screenshots & Version Control
  • Issues & advice for screenshot testing

​

http://bit.ly/pycon2015-visual-diffs

18 of 34

Generating Screenshots

  • CasperJS
  • Huxley (Facebook)
  • Wraith (BBC)
  • PhantomCSS (Huddle)
  • dpxdt
  • Hardy aka GhostStory
  • Needle
  • Cactus
  • CSSCritic
  • seltest

​

19 of 34

Generating Screenshots

  • CasperJS
  • Huxley (Facebook)
  • Wraith (BBC)
  • PhantomCSS (Huddle)
  • dpxdt
  • Hardy aka GhostStory
  • Needle
  • Cactus
  • CSSCritic
  • seltest

​

20 of 34

dpxdt demo: comparea.org

local demo

21 of 34

Aside: Local Servers & GUI apps

pip install webdiff

​

https://github.com/danvk/webdiff

​

22 of 34

Aside: Local Servers & GUI apps

23 of 34

Aside: Local Servers & GUI apps

Other examples:

  • IPython Notebook
  • …?

24 of 34

Agenda

  • Screenshot tests & perceptual diffs
  • Taking screenshots with dpxdt
  • Screenshots & Version Control
  • Issues & advice for screenshot testing

​

http://bit.ly/pycon2015-visual-diffs

25 of 34

Screenshots Are a Living Gallery

26 of 34

GitHub & Image Diffs

live!

27 of 34

webdiff & Image Diffs

webdiff http://github.com/.../pull/...

​

28 of 34

Agenda

  • Screenshot tests & perceptual diffs
  • Taking screenshots with dpxdt
  • Screenshots & Version Control
  • Issues & advice for screenshot testing

​

http://bit.ly/pycon2015-visual-diffs

29 of 34

Problems with Screenshot Testing

30 of 34

Problems with pdiffs

31 of 34

Screenshots for existing tools

  • Don’t want to screenshot on every change?
  • Use screenshots for QA on releases
  • dygraphs test directory
  • dygraphs-dpxdt repo

32 of 34

When to write a pdiff test?

  • Unit tests ↔ iteration in the console
  • Screenshot tests ↔ reloading in browser

33 of 34

Conclustions

  • Screenshot tests let you track changes to web pages visually.
  • Visual diff tools help you spot these changes.
  • Putting screenshots in source control has many benefits.

34 of 34

Thank You!

http://bit.ly/pycon2015-visual-diffs