TESTING STYLES

ARPIT MAHESHWARIhttp://arpitmaheshwari.com

BROAD LEVEL WORKFLOWJOURNEY OF A STORY

Test locally• Preferred

Editor• Preferred

Browser

Broader testing• Targeted

Browser• Targeted

Devices

Testing on environments• Dev

Environment

• Production Environment

• 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 STARTSSTART SMALL, END USEFUL

• 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 TESTINGBRANDED AS : WEB CONSISTENCY TESTING

CROSS BROWSER TESTING

CROSS BROWSER TESTING

• 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 TESTINGTOOLS AVAILABLE

• 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 TESTINGRECOMMENDED WAY :

• 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

• 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 TESTINGAPPLES VS ORANGES

• 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 ,

CAROUSEL , ADVERTISEMENTS ETC.

IMAGE DIFF TESTINGPROS & CONS

• 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 TESTINGTOOLS / FRAMEWORK AVAILABLE

• 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 TESTINGCODE SNIPPET

• 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

FROZEN DOMVISUALIZATION

• 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 DOMPROS & CONS

• 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 DOMTOOLS / FRAMEWORK AVAILABLE