Using ui-diff

To use ui-diff you only need to run a command from your terminal when you're inside of the root of your project. There are a couple of options to this command, but start out with running this command.

yarn screenshot

This will:

  1. Spin up a headless browser
  2. Go to each page you specified in ui-diff-pages.js
  3. Take a screenshot on every environment specified in ui-diff-config.js
  4. Publish to the project at ui-diff.com

Running with headful browser

Sometimes you want to see what is actually happening when ui-diff is taking screenshots of your website. This is especially useful when debugging. To have a headful browser start up instead of a headless one, simply run this command instead.

yarn screenshot --headless=false

Using different sizes

If you would like to test your website on a different device than a regular computer screen (which is default) there is a parameter for this as well. Here you can choose between a couple of different screen types.

yarn screenshot --size=(mobile|tablet|desktop)