Let’s look at how to configure and run Wraith to capture page screenshots. We won’t be doing any style editing yet. We want to validate that we can get Wraith running first.
- In your responsive starter kit folder, initialize Wraith by running
wraith setupfrom a terminal window.
- Open ‘configs/config.yaml’ in your editor of choice.
- Update the
domainssection to point to your local server and the live site: http://mpgilbertusa.github.io/Responsive-Starter-Kit-Pro. (See spoilers section for hints).
- Update the
pathssection to include each page. (Again, see the spoilers section below for all the paths).
- Run Wraith via
wraith capture config.
- View gallery output by running
open shots/gallery.html(or open via your browser of choice).
- Find any differences between the two sites. There should only be one.
If you don’t want to see pages that didn’t have any differences, you can change the
diff mode via your config file.
Try this by adding
mode: diffs_only to the bottom of your config.yaml file and running Wraith again. Your gallery should be much simpler now.
Wraith’s biggest strength is its ease of setup and configuration for quick validation of changes. As you should have noticed, it caught one regression between the local and live site (the image on the style guide is randomized on our local setup).
In the next exercise, we’ll try making some changes to our styles and see how well Wraith works out.
If you’re stuck trying to get the code working, here are some solutions:
domains: local: "http://localhost:8080" production: "http://mpgilbertusa.github.io/Responsive-Starter-Kit-Pro"
paths: home: / sidebar_left: /layout-sidebar-left.html sidebar_right: /layout-sidebar-right.html three_col: /layout-two-sidebars.html full_width: /layout-full-width.html audio_video: /layout-transcript.html sample_form: /layout-form.html styleguide: /style-guide.html addons: /add-ons.html