Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Visual css-regression-testing-with-phantom css

1,971 views

Published on

Have you ever spent hours poring over a web application when making changes to the theme, looking for the consequences of CSS style rules that are too broad? Ever made changes to a client's website, only to find out the theming for the newly designed front page totally screwed up the formatting on the product pricing page -- after you deployed the changes?

You are not alone.

Manual testing of user interfaces for visual and style components is a tedious and time consuming process, and by very nature introduces the human error aspect to web application QA review. While tools such as Behat have made testing certain aspects of the user interface less tedious, and have removed some of the "human error" aspect from the process, Behat doesn't provide the capability of testing the "layout" of site changes for those unintended consequences of misapplied HTML, CSS or Javascript.

Enter PhantomCSS -- a framework for conducting automated visual regression testing for websites. In this session we'll cover:

What is PhantomCSS?
System Requirements for PhantomCSS
Skillset Requirements to write test suites for PhantomCSS
How can I use PhantomCSS to improve my QA process?
Live demonstration of a PhantomCSS test suite, including a review of the output of test results

Published in: Technology
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/ulQmb ◀ ◀ ◀ ◀
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Visual css-regression-testing-with-phantom css

  1. 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. 2. Who am I? • Lisa Ridley • Solutions Architect, Promet Source • lisa@prometsource.com • drupal: lhridley • twitter: lhridley • blog: codementality.com
  3. 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. 4. –Wikipedia What is Regression Testing?
  5. 5. How do you regression test the visual components of a user interface?
  6. 6. What if you could take a “before” and “after” picture? And could easily compare those pictures to each other?
  7. 7. Enter PhantomCSS
  8. 8. How does it work?
  9. 9. What does that look like? Baseline Image Comparison Image PhantomCSS Diff Image
  10. 10. PhantomCSS Dependencies + PhantomJS (v1.9.7) CasperJS (1.1.beta-3) SlimerJS (v0.9.4)
  11. 11. Other Dependencies for Testing Servers (Linux) • FontConfig • FreeType • ttf-dejavu • ttf-mscorefonts-installer • xvfb (SlimerJS)
  12. 12. Skillsets Needed to Write Tests for PhantomCSS Javascript
  13. 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. 14. Javascript Object Instances Available to Test Scripts • phantom • casper • phantomcss
  15. 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. 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. 17. Let’s look at a test site
  18. 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. 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. 20. Let’s switch to the actual site and run a demo
  21. 21. Questions?
  22. 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. 23. • Lisa Ridley • Solutions Architect, Promet Source • lisa@prometsource.com • drupal: lhridley • twitter: lhridley • blog: codementality.com Who am I?
  24. 24. Thanks for coming!

×