Skip to content

Instantly share code, notes, and snippets.

@twolfson
Last active December 20, 2015 05:28
Show Gist options
  • Save twolfson/6077989 to your computer and use it in GitHub Desktop.
Save twolfson/6077989 to your computer and use it in GitHub Desktop.
Thoughts about perceptual diffs

Thoughts on dpxdt

https://github.com/bslatkin/dpxdt is great but it is too monolithic (as a repository) and not easily identifiable/reusable about its parts.

It does not have documentation on handling single page applications or any dynamic JS functionality which worries me.

However, it does have a site crawler which is great but that doesn't do one thing well and can probably be improved/better tested if it was its standalone module.

Personal ideas

I would really love a Selenium or similar based solution which can run locally and test locally. Perceptual diffs for one browser are good but perceptual diffs for every browser would be amazing.

Since that can get complicated locally, I am trying to reason about how to achieve it. Vagrant seems like the best solution. We have iectrl which allows for controlling of IE VMs down to IE6. We can re-purpose these machines to also run the 4 latest versions of other browser (e.g. Firefox, Chrome).

For responsive testing, I will defer to phantomjs + viewport sizing

https://github.com/xdissent/iectrl

To start with the lowest hanging fruit, we should get a flat file based test framework up that runs phantomjs on the pages specified.

It navigates to a URL, runs JS if present, and captures a screenshot. The framework then creates a perceptual diff and tells us whether it is blank or not.

This introduces another edge case for enterprise sites which may use multiple subdomains for their websites.

The flat file should be a YAML file so we get multiple lines for free with the markup choice. However, we can accept JSON/JS as well to be nice via node (and gain inheritance) =3

The framework might be a bunch of single files or one massive file. It is hard to tell yet.

url: http://localhost:8080/
last_updated: Thu Jul 25 01:58AM PST

# Theoretical options
# phantomjs/selenium will wait for __page_loaded to be true if there is JS defined
js: setTimeout(function () {
      window.__page_loaded = true;
    }, 1000);
timeout: 10000 # unit: ms, default: 2000
viewport_width: 400 # default: 800, unit: pixels
viewport_height: 300 # default: 600, unit: pixels
browsers: # default: array of all available browsers
  - chrome/latest
  - firefox/latest
save_diff: true # default: save diff to a file or not

The ideal framework would also be modularized enough to allow for integration into existing Selenium test suites.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment