Transcript

• 1. Visual/CSS Regression Testing MidCamp 2015 University of Illinois at Chicago Saturday, March 21, 2015 Catching the “Unintended Consequences” of modifying your theme
• 2. Who am I? • Lisa Ridley • Solutions Architect, Promet Source • lisa@prometsource.com • drupal: lhridley • twitter: lhridley • blog: codementality.com
• 3. About Promet Source Custom Development • Drupal websites • Drupal-based web applications • Mobile apps integration • Systems integration • CMS migrations • Custom ecommerce • Prototyping and proof-of- concepts Support • 24x7 with SLA • Support for Drupal sites built by others • 24x7 monitoring • Drupal security and maintenance updates • QA for custom modules • Code-level fixes • Help desk support • Ongoing development DevOps • Automated cloud infrastructure • Drupal deployments • Configuration management for Drupal • Automated testing • Continuous integration • Performance and scaling • Open source tools (Chef, Git, Jenkins) Open Source Applications – Focus on Drupal ➢ Founded in 2003 ➢ Open source technologists ➢ Drupal platform since 2008 ➢ Mobile apps since 2009 ➢ Based in Chicago ➢ Distributed global team ➢ Agile development practices ➢ 24x7 support
• 4. –Wikipedia What is Regression Testing?
• 5. How do you regression test the visual components of a user interface?
• 6. What if you could take a “before” and “after” picture? And could easily compare those pictures to each other?
• 7. Enter PhantomCSS
• 8. How does it work?
• 9. What does that look like? Baseline Image Comparison Image PhantomCSS Diff Image
• 10. PhantomCSS Dependencies + PhantomJS (v1.9.7) CasperJS (1.1.beta-3) SlimerJS (v0.9.4)
• 11. Other Dependencies for Testing Servers (Linux) • FontConfig • FreeType • ttf-dejavu • ttf-mscorefonts-installer • xvfb (SlimerJS)
• 12. Skillsets Needed to Write Tests for PhantomCSS Javascript
• 13. casper.start( ‘url-of-web-page’ ); casper.viewport(1024, 768); casper.then(function(){ phantomcss.screenshot(‘#css-selector‘, ‘image-name’); }); casper.then( function now_check_the_screenshots(){ phantomcss.compareAll(); }); casper.then( function end_it(){ casper.test.done(); }); casper.run(function(){ phantom.exit(phantomcss.getExitStatus()); });
• 14. Javascript Object Instances Available to Test Scripts • phantom • casper • phantomcss
• 15. Author recommended Best Practices for PhantomCSS • Does not replace functional testing • Don’t use complex CSS3 selectors • Name Your Screenshots • Don’t try to test all the visuals • Full page screenshots are a bad idea
• 16. Limitations of PhantomCSS • No Support for Flash • May require non-standard font installations on your testing server • May generate false test failures due to spatial aliasing of antialiased images • Some page elements that have display: none on larger viewports but are visible on smaller viewports are seen as “not visible”
• 17. Let’s look at a test site
• 18. Fixed Header and Nav Bar Nav bar Items are Mega Menus Front Page Slider Pre Content Blocks Blocks have mouseover color change on background Two column content area Fixed Footer
• 19. Test Suite for Test Site • Homepage • Homepage with each Megamenu displayed • Each Megamenu element • Header, Nav bar, footer • Pre-content blocks • Pre-content blocks with each in “hover” state • Content areas (left and right) 20 images in all
• 20. Let’s switch to the actual site and run a demo
• 21. Questions?
• 22. Documentation • casperjs.readthedocs.org - casperjs.readthedocs.org/en/latest/selectors.html - casperjs.readthedocs.org/en/latest/modules/casper.html - casperjs.readthedocs.org/en/latest/modules/mouse.html - casperjs.readthedocs.org/en/latest/modules/utils.html • phantomjs.org/documentation/ • github.com/Huddle/PhantomCSS/blob/master/ README.md
• 23. • Lisa Ridley • Solutions Architect, Promet Source • lisa@prometsource.com • drupal: lhridley • twitter: lhridley • blog: codementality.com Who am I?
• 24. Thanks for coming!