This talk explains some basics on PhantomJS + how to use PhantomShot to automatically take screenshots of changed products.

1. Using PhantomJS to keep product
screenshots up to date
@mburtscher

2. Agenda
1. PhantomJS
What is it? / Use cases / Usage / Features
2. PhantomShot
Problem / Solution / Demo

3. PhantomJS
“PhantomJS is a headless WebKit scriptable with a
JavaScript API.”
Use it for ...
● Testing
● Automation
● Screen capturing

4. Usage
1. Create your script (e.g. render-google.js)
var page = require('webpage').create();
page.open('http://www.google.at', function() {
page.render('google.png');
phantom.exit();
});
2. Run PhantomJS
phantomjs render-google.js

5. Features
● Based on QT5 WebKit
● DOM
● JSON
● CSS
● CANVAS
● SVG
● Webfonts

6. Version 1.9

7. Version 1.9 custom build

8. Version 2.0

9. PhantomShot
Wants to help you solve problems with outdated
screenshots ...
● on your product website or
● your documentation.
If you’re already good at this it may reduce your efforts.

10. Workflow
● Huge effort to re-create a lot of screenshots
● Very problematic with agile development workflows

11. Workflow
● People don’t see the best of your product (website)
● Users may contact support because documentation is not clear enough

12. Workflow
● Provide a tool for marketing to update a lot of screenshot automatically
● Only check screenshots on website if they are still correct

13. Demo
...

14. Let your machine do the work and relax ...
...

15. Resources
PhantomJS
http://www.phantomjs.org
https://github.com/ariya/phantomjs
PhantomShot
https://github.com/fusonic/phantomshot
Matthias Burtscher
http://about.me/mburtscher
@mburtscher