SlideShare a Scribd company logo

Testing html5 meetup slideshare

•
•
Mario Noble
Mario Noble

Overview of testing guidelines. Slidedeck from HTML5 LA developers meetup event on August 13, 2013. Some things references are from the live demo.

1 of 27
Testing, testing, 123.. Website and web app device testing note: some images have been removed because of copyright
Who the heck are you? ● web designer ● front end developer "integrator" ● over ten years of experience ● freelance/ company / small and enterprise ● principal at Context Multimedia and Mario Noble Design ● organizer SCWDD Mario Noble
Overview ● Why you should test mobile ● General Guidelines ● Some tools and techniques ● A demo of a few of Adobe Inspect ● Edge Code and Reflow if time permits ● Tips and Tricks
Testing. It helps.
To test or not to test, that is the question...
Why test for mobile? the mobile market is only getting larger
More Importantly Money...! I could show a fancy graph but I think we all know it’s true now.
Also Find problems early Testing is an integral part of creating a quality product. Provide as good of a user experience as possible. Keep that money! Don’t get sued!
Bad Experience = Less Visitors, Less Money...
Two main approaches Responsive Design User Agent Adaptive
Native app testing? hybrid applications that can be tested in the browser first can be helpful.
Goals Find out what’s going on. Fix it if necessary.
Some general guidelines Stick to standards when possible. Develop a solid framework and go with it. Beware of plugin promiscuity Unit test - break things up into manageable pieces where possible Measure your analytics to figure what should get priority There is no such thing as perfect testing
So how do we test? Some useful tools and techniques
Emulators vs Hardware testing Which should I use?
Use both Each of them has pros and cons
Emulator Pros and Cons Pros Easy testing Desktop based You have to do it anyway Cheaper Fast Cons Doesn’t use a device’s browser Inaccurate results Performance is not accurate Bandwidth not representative
Actual Device Pros and Cons Pros If it works, it works Accurate performance Accurate bandwidth Real touch events Real testing Cons Expensive Can’t cover all devices Needs to be kept up to date May not model real world performance and bandwidth
A few Emulators Ripple emulator extension Firefox web developer toolbar Addon http://beta.screenqueri.es/ http://responsinator.com/
Desktop/ Device based options Other options - chrome for android and firefox plus Apple’s safari and Win Phone: https://developers.google.com/chrome-developer-tools/docs/remote-debugging http://lucasr.org/2012/03/28/remote-debugging-in-firefox-mobile/ https://developer.apple. com/library/safari/documentation/AppleApplications/Reference/SafariWebConte nt/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff402572(v=vs. 105).aspx http://martinkool.com/post/13629963755/firebug-on-ipad-and-iphone
Some thoughts on owning devices try to get the major devices
Adobe’s Inspect Tool Weinre based http://people.apache.org/~pmuellr/weinre/ Rundown: http://html.adobe.com/edge/inspect/ Installation http://www.adobe.com/devnet/edge- inspect/articles/browser-testing-across-devices- with-adobe-edge-inspect.html
Some Hybrid remote options I don’t endorse these by the way. Just examples. http://www.deviceanywhere.com/ Browsershots (http://browsershots.org/) http://info.perfectomobile.com/automate-mobile-app-testing. html? utm_source=Google&utm_medium=CPC&utm_campaign= Search_Mobile_Testing_US_Canada&utm_term=Remote& gclid=CKnk1a2N-bgCFYN_QgodZ30AWg http://mobilelabsinc.com/deviceconnect/ Check with the hardware manufacturues too
Weinre is Firebug for devices (sorta) Not quite as powerful but Super Convenient
Let’s check it out! hands on demo starts here
Some other tips “Mobile First” Pushing the envelope means extra testing Clear local and server cache before testing Kindle Silk issues If at first you don’t succeed, Refresh... Inspect might also help with Accessibility debugging.
Go forth and test yourself !

More Related Content

Testing html5 meetup slideshare

  • 1. Testing, testing, 123.. Website and web app device testing note: some images have been removed because of copyright
  • 2. Who the heck are you? ● web designer ● front end developer "integrator" ● over ten years of experience ● freelance/ company / small and enterprise ● principal at Context Multimedia and Mario Noble Design ● organizer SCWDD Mario Noble
  • 3. Overview ● Why you should test mobile ● General Guidelines ● Some tools and techniques ● A demo of a few of Adobe Inspect ● Edge Code and Reflow if time permits ● Tips and Tricks
  • 5. To test or not to test, that is the question...
  • 6. Why test for mobile? the mobile market is only getting larger
  • 7. More Importantly Money...! I could show a fancy graph but I think we all know it’s true now.
  • 8. Also Find problems early Testing is an integral part of creating a quality product. Provide as good of a user experience as possible. Keep that money! Don’t get sued!
  • 9. Bad Experience = Less Visitors, Less Money...
  • 10. Two main approaches Responsive Design User Agent Adaptive
  • 11. Native app testing? hybrid applications that can be tested in the browser first can be helpful.
  • 12. Goals Find out what’s going on. Fix it if necessary.
  • 13. Some general guidelines Stick to standards when possible. Develop a solid framework and go with it. Beware of plugin promiscuity Unit test - break things up into manageable pieces where possible Measure your analytics to figure what should get priority There is no such thing as perfect testing
  • 14. So how do we test? Some useful tools and techniques
  • 16. Use both Each of them has pros and cons
  • 17. Emulator Pros and Cons Pros Easy testing Desktop based You have to do it anyway Cheaper Fast Cons Doesn’t use a device’s browser Inaccurate results Performance is not accurate Bandwidth not representative
  • 18. Actual Device Pros and Cons Pros If it works, it works Accurate performance Accurate bandwidth Real touch events Real testing Cons Expensive Can’t cover all devices Needs to be kept up to date May not model real world performance and bandwidth
  • 19. A few Emulators Ripple emulator extension Firefox web developer toolbar Addon http://beta.screenqueri.es/ http://responsinator.com/
  • 20. Desktop/ Device based options Other options - chrome for android and firefox plus Apple’s safari and Win Phone: https://developers.google.com/chrome-developer-tools/docs/remote-debugging http://lucasr.org/2012/03/28/remote-debugging-in-firefox-mobile/ https://developer.apple. com/library/safari/documentation/AppleApplications/Reference/SafariWebConte nt/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff402572(v=vs. 105).aspx http://martinkool.com/post/13629963755/firebug-on-ipad-and-iphone
  • 21. Some thoughts on owning devices try to get the major devices
  • 22. Adobe’s Inspect Tool Weinre based http://people.apache.org/~pmuellr/weinre/ Rundown: http://html.adobe.com/edge/inspect/ Installation http://www.adobe.com/devnet/edge- inspect/articles/browser-testing-across-devices- with-adobe-edge-inspect.html
  • 23. Some Hybrid remote options I don’t endorse these by the way. Just examples. http://www.deviceanywhere.com/ Browsershots (http://browsershots.org/) http://info.perfectomobile.com/automate-mobile-app-testing. html? utm_source=Google&utm_medium=CPC&utm_campaign= Search_Mobile_Testing_US_Canada&utm_term=Remote& gclid=CKnk1a2N-bgCFYN_QgodZ30AWg http://mobilelabsinc.com/deviceconnect/ Check with the hardware manufacturues too
  • 24. Weinre is Firebug for devices (sorta) Not quite as powerful but Super Convenient
  • 25. Let’s check it out! hands on demo starts here
  • 26. Some other tips “Mobile First” Pushing the envelope means extra testing Clear local and server cache before testing Kindle Silk issues If at first you don’t succeed, Refresh... Inspect might also help with Accessibility debugging.
  • 27. Go forth and test yourself !