Talks about how to automate CSS testing.

1. TESTING STYLES
ARPIT MAHESHWARI
http://arpitmaheshwari.com
FRONT END OPS

2. BROAD LEVEL WORKFLOW
JOURNEY OF A STORY
Test locally
•Preferred Editor
•Preferred Browser
Broader
testing
•Targeted Browser
•Targeted Devices
Testing on
environments
•Dev Environment
•Production
Environment

3. • CODE IN PREFERRED EDITOR
• TEST IN PREFERRED BROWSER
• IMPROVE & RE-TEST ( TILL YOU ARE SATISFIED )
• TESTING IS GENERALLY MANUAL USING WEB INSPECTORS (SUPPLIED
WITH BROWSERS )
• CAN USE SOME TOOLS LIKE
• LIVERELOAD (BROWSER PLUGIN )
• CSSLINT (HTTP://CSSLINT.NET/ )
• FIREBUG ( FIREFOX PLUGIN)
WHEN A DEV STARTS
START SMALL, END USEFUL

4. • TESTING YOUR CODE ACROSS THE TARGETED SPECTRUM OF
BROWSERS & DEVICES .
• DISTINGUISHING BUGS FROM BROWSER BEHAVIOR.
• CONSIDERING PRINCIPLES OF PROGRESSIVE ENHANCEMENT OR
GRACEFUL DEGRADATION. (RECOMMENDED )
• WITH GROWTH OF MOBILE DEVICES AND RAPID LAUNCH CYCLES
OF BROWSERS , MANUAL TESTING IS BECOMING INCREASINGLY
DIFFICULT.
• RESPONSIVE WEB DESIGN ALLOWED THE SAME CODEBASE TO BE
RENDERED ACROSS PLATFORMS THEREBY INCREASING THE
EFFORTS REQUIRED FOR TESTING.
CROSS BROWSER TESTING
BRANDED AS : WEB CONSISTENCY TESTING

5. CROSS BROWSER TESTING

6. CROSS BROWSER TESTING

7. • BROWSER STACK
• HTTP://WWW.BROWSERSTACK.COM/
• XAMARIN
• HTTP://XAMARIN.COM/
• SAUCELABS
• HTTPS://SAUCELABS.COM/
• BROWSERA
• HTTP://WWW.BROWSERA.COM/
• MOGOTEST ( NOT MAINTAINED )
• HTTPS://BITBUCKET.ORG/MOGOTEST/
CROSS BROWSER TESTING
TOOLS AVAILABLE

8. • FOR QAS : DEFINITELY AUTOMATION
• ABILITY TO COMPARE DIFFERENT /EVALUATE DIFFERENT BROWSER RENDERINGS
ON A COMMON PLATFORM GIVES BETTER/BROADER PERSPECTIVE .
• SAVES TIME& EFFORTS.
• SOME TOOLS ALSO PROVIDE FEATURE TO REGISTER BUG , TAKE SNAPSHOTS
ALONG WITH ENVIRONMENT DETAILS ETC .
• FOR DEVS : CREATE YOU OWN HOUSE RULES (MANUAL OR TOOL
BASED )
• IN CASE YOU OPT FOR AUTOMATED TOOLS , BE PREPARED TO WAIT FOR A FEW
MINUTES TO TEST EVERY CHANGE YOU MAKE.
CROSS BROWSER TESTING
RECOMMENDED WAY :

9. • TRADITIONALLY DONE MANUALLY . BUT YES , IT CAN BE
AUTOMATED .
• THERE ARE TWO POPULAR APPROACHES TO AUTOMATE CSS
REGRESSION TESTING :
• IMAGE DIFF
• FROZEN DOM
HMMM REGRESSION…
CAN’T DETECT 1 – 2 PIXELS CHANGES WITH EYES 

10. • WHEN YOUR PAGE IS DONE, TAKE A SCREENSHOT OF HOW IT
LOOKS.
• AFTER CHANGES, TAKE ANOTHER SCREENSHOT AND COMPARE
THE DIFFERENCES.
• FUNCTION ( REFERENCE_SNAPSHOT , COMPARISON_SNAPSHOT ){
RETURN RENDERING_ISSUES;
}
IMAGE DIFF TESTING
APPLES VS ORANGES

11. • BENEFITS
• VISUAL: IT’S DOING WHAT YOU'D DO
• PREDICTABLE: IT'S EASY TO AUTOMATE
• BROWSER AGNOSTIC : ALGORITHM NEEDN’T BE BROWSER SPECIFIC
• LOW DOCUMENTATION : SNAPSHOTS ARE IN THEMSELVES “STATUS LOGS” .
• HELPFUL IN PIXEL PERFECTION.
• INTERNATIONALIZATION : HANDY IN COMPARING PAGES RENDERED IN DIFFERENT
LOCAL.
• PROBLEMS
• NOT SO SMART : A SMALL CHANGE CAN TRIGGER SERIES OF BUGS. IMAGE DIFF
TESTING DOESN’T PIN POINTS TO ROOT CAUSE OF ERROR .
• GETS DIFFICULT FOR MULTIPLE PAGE WEBSITES.
• DOM-UNAWARE: HAS NO REFERENCE TO THE ORIGINAL PAGE STRUCTURE. LACKS
SEMANTIC MEANING.
• EASILY CONFUSED BY ANIMATIONS/MOVING CONTENT. EG. SLIDE-SHOW ,
IMAGE DIFF TESTING
PROS & CONS

12. • PHANTOM CSS
• HTTP://TLDR.HUDDLE.COM/BLOG/CSS-TESTING/
• NEEDLE
• HTTPS://GITHUB.COM/BFIRSH/NEEDLE
• CSS CRITIC
• HTTPS://GITHUB.COM/CBURGMER/CSSCRITIC
• SCREENSHOT AS A SERVICE
• HTTPS://GITHUB.COM/FZANINOTTO/SCREENSHOT-AS-A-SERVICE
• FACEBOOK’S HUXLEY
• HTTPS://GITHUB.COM/FACEBOOKARCHIVE/HUXLEY
IMAGE DIFF TESTING
TOOLS / FRAMEWORK AVAILABLE

13. • PHANTOMCSS ( USES CASPER.JS TO TAKE SNAPSHOT & RESEMBLE.JS
TO COMPARE )
• CASPER.START("HTTP://<TESTURL>")
.THEN( FUNCTION (){
CSS.SCREENSHOT('BODY');
})
.THEN( FUNCTION (){
CASPER.PAGE.SENDEVENT('CLICK', 10, 10);
})
.THEN( FUNCTION (){
CSS.SCREENSHOT('BODY');
})
IMAGE DIFF TESTING
CODE SNIPPET

14. • WHEN YOUR PAGE IS DONE, TAKE A COPY OF THE DOM AND
MEASURE THE STYLES APPLIED. THAT BECOMES YOUR TEST SUITE.
• RUN THE TEST BY USING THE SAME DOM AND YOUR NEW
STYLESHEET. IF THE STYLES NOW ARE THE SAME AS THEY WERE,
IT'S A PASS.
• FUNCTION ( REFERENCE_PAGE , COMPARISON_PAGE ){
RETURN RENDERING_ISSUES;
}
FROZEN DOM

15. FROZEN DOM
VISUALIZATION

16. • BENEFITS
• RICH SEMANTIC MEANING. CAN IDENTIFY ROOT CAUSE OF ERROR.
• BETTER HANDLING OF MULTIPLE PAGES. INDIFFERENT TO ANIMATIONS.
• BETTER SUPPORT FOR CONDITIONING .
• PROBLEMS
• BEING DOM AWARE , ITS SUSCEPTIBLE TO BROWSER QUIRKS. ( IE 7,8 ,
• DOESN’T AUTOMATICALLY IGNORE HIDDEN ELEMENTS .
• NO VISUAL REPRESENTATION OF BUGS. SORRY PIXEL PERFECTION.
• LOCALE AGNOSTIC.
FROZEN DOM
PROS & CONS

17. • CSSUNIT (NOT MAINTAINED)
• HTTPS://GITHUB.COM/GAGARINE/CSSUNIT
• CSS-TEST (NOT MAINTAINED)
• HTTPS://GITHUB.COM/GARETHR/CSS-TEST/
• CSSERT
• HTTP://THINGSINJARS.GITHUB.IO/CSSERT/
• HARDY
• HTTP://HARDY.IO/
• CACTUS
• HTTPS://GITHUB.COM/WINSTON/CACTUS
FROZEN DOM
TOOLS / FRAMEWORK AVAILABLE