Testing CSS - Front end ops by Arpit Maheshwari
Download as PPTX, PDF0 likes72 views
This document discusses different styles of testing web pages, including testing locally using a preferred editor and browser, broader testing across targeted browsers and devices, and testing on development and production environments. It also describes cross-browser testing, including manually testing across browsers, and automation tools for cross-browser testing using approaches like image diff testing and frozen DOM testing.
Testing CSS - Front end ops by Arpit Maheshwari
- 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
- 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
- 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