Amplexor - Drupal Camp Romania 2015 - Front-end testing
Download as PPTX, PDF0 likes820 views
The document discusses various tools for front-end testing including Wraith for visual testing, CasperJS and PhantomJS for scripted testing of page interactions and structures, Behat and Mink for integrating backend testing with PhantomJS, and grunt plugins for PageSpeed insights, page load times, and setting performance budgets. It provides details on installing and using Wraith in both standard and Casper modes to capture screenshots of websites from different environments or times and produce visual diffs of the changes.
Amplexor - Drupal Camp Romania 2015 - Front-end testing
- 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
- 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
- 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