Amplexor - Drupal Camp Romania 2015 - Front-end testing Presentation by Mircea Fernea

1. Front-end Testing
Visual testing with Wraith

2. 2.
About me
Mircea Fernea
Drupal Consultant at Amplexor Romania
mircea.fernea@amplexor.com
drupal.org/u/mfernea

3. 3.
Front-end testing
Test pages the html structure & interactions
Checking PageSpeed Insights
Testing page load times & render speeds
Check visual changes

4. 4.
CasperJS
Allows for scripted actions to be tested with PhantomJS.
It’s easy to setup for front-end developers.
Test complex features or components within the page.
Automate complex user actions.
Test workflows like content creation.
Check http responses on sensitive pages.
HTML structure & Interactions

5. 5.
Behat & Mink & PhantomJS
Behat can be integrated with PhantomJS through Mink
and Selenium2
Storing credentials, creating scenarios that include
backend interaction are easier to setup in Behat.
You can even run tests for multiple screen sizes.
HTML structure & Interactions

6. 6.
grunt-pagespeed
https://www.npmjs.com/package/grunt-pagespeed
You get all the information from
https://developers.google.com/speed/pagespeed/insights/
?url=http%3A%2F%2Fwww.smashingmagazine.com%2F
&tab=mobile
PageSpeed Insights

7. 7.
grunt-phantomas
https://www.npmjs.com/package/grunt-phantomas
A PhantomJS-based web performance metrics tool
http://stefanjudis.github.io/grunt-phantomas/gruntjs/
Page load times & render speeds

8. 8.
grunt-phantomas
Page load times & render speeds

9. 9.
grunt-perfbudget
https://github.com/tkadlec/grunt-perfbudget
It’s based on WebPageTest API
http://www.webpagetest.org/
It can leverage multiple browsers, geographic locations
and network speeds.
You can have budget for number of requests, load time
etc. See the budget as threshold value.
Performance budgets

10. 10.
Wraith
https://github.com/BBC-News/wraith
Developed by the guys at BBC News
Wraith uses either PhantomJS or SlimerJS to create
screen-shots of webpages on different environments and
then creates a diff of the two images.
Imagemagick and PhantomJS or SlimmerJS are required
to use Wraith. CasperJS can be used to target specific
selectors.
Visual testing

11. 11.
Wraith - Install
$ brew install phantomjs
$ brew install imagemagick
$ gem install wraith
Visual testing

12. 12.
Wraith modes
Standard: take screenshots of two environments,
producing a visual diff of the two screenshots
Casper: take screenshots of an element from two
environments using selectors, producing a visual diff of the
two screenshots
History: rather than capture two environments, capture the
same environment at two different moments in time to
compare them if anything changed
Visual testing

13. 13.
Standard mode
Take screenshots of two environments, producing a visual
diff of the two screenshots
$ wraith setup - creates configs/config.yaml and
javascript/snap.js
Adjust config.yaml to setup config and the two
environments (e.g. resolutions, pages)
$ wraith capture config
$ Open gallery.html from output dir to view results
$ wraith reset_shots config
Visual testing

14. 14.
Visual testing

15. 15.
Visual testing

16. 16.
Casper mode
Casper: take screenshots of an element from two
environments using selectors, producing a visual diff of the
two screenshots
$ wraith setup_casper - creates configs/component.yaml
and javascripts/casper.js
Adjust component.yaml
$ wraith capture component
If multiple matches found, only the first one is captured
Don’t start your selector with “#”. Add “div” in front
Open gallery.html to see results
Visual testing

17. 17.
History mode
Rather than capture two environments, capture the same
environment at two different moments in time to compare
them if anything changed
$ wraith setup
Adjust config.yaml and rename it (e.g. local-history)
$ wraith history local-history
$ wraith latest local-history
Open gallery.html and see results
Don’t run history command twice
Visual testing

18. 18.
Tweaks
Add cookies
Add HTTP Authentication
Get debug information
Adjust PhantomJS parameters
Visual testing

19. 19.
“Don’t believe me on anything. Try this out for yourself.”
Visual testing

20. 20.
Questions?
Q & A

21. 21.
Other sources & references
http://fourword.fourkitchens.com/article/testing-drupal-
casperjs
http://danmatthews.me/2014/05/09/behat-phantomjs.html
http://jaffamonkey.com/using-phantomjs-with-behat/
http://mink.behat.org/en/latest/index.html
https://amsterdam2014.drupal.org/session/automated-
frontend-testing