upgrading mobile tester's weapons with advanced debugging

#ATAGTR201716th 17th March

Upgrading Mobile Tester’s Weapons with Advanced DebuggingAbhijeet Vaikar

Agile Testing Alliance Global Testing Retreat 2017

Abhijeet Vaikar

@AbhijeetVaikarhttps://in.linkedin.com/in/abhijeetvaikar

What are we here for?

An open mindset towards technical testing

An approach to Debug Mobile Web/ Mobile

Native/ Mobile Hybrid Apps

Mobile testers in the world are evolving. Are you too?

Why should you evolve?

Agile Testing Alliance Global Testing Retreat 2017https://scroll.in/latest/829780/65-of-it-employees-not-trainable-in-new-technologies-likely-to-lose-jobs-says-capgemini-ceo

Rise of the Technical Tester

Testing

Current Testing Trends

29%Testers use real devices to test websites/native

46%Confirmed of more issues with mobile environments than

desktop

92%Testing teams perform mobile cross-browser

testing.

Mobile Testing will remain on

Agile demands high

collaborationDebugging skills are in demand

State of Sherlock, The Mobile Tester

Conventional Black-Box

Tester

Poor Coverage of

Stuck with producing

orthodox defect artefacts

Ends up with Technical

Testing Debt

Is this enough?

Applications on the mobile

Web Hybrid

Native

Android WebView

iOS UIWebView

Pure Native SDK

Components

Upgrading Sherlock with Advanced Debugging Tools

Network Proxy ToolsBrowser Developer Tools

Device Log Monitoring Tools

Browser Developer Tools

Debug mobile websites on your device by connecting to Desktop browser developer tools

Debug information exposed by Browser Dev Tools

Complete DOM structure of the web page.CSS styles applied to the DOMRequest and Response information to find network issuesPage Resources (Html, CSS, JS, Images)Runtime performance of different events that take place on loading web pageMemory profiling to find memory leak problems.JavaScript errors and warnings.Non-binary data sent over WebSockets (Non-HTTP Real-time communication)Cached contentCookie informationData stored in Local Storage, Session Storage, IndexedDB, Web SQL

Additional testability features

Live-edit HTML elements (add, update, delete elements and their attributes), CSS values.Switch context to debug iframes embedded inside pages.Edit and Re-send request from Network Panel (Supported by Firefox Dev Tools)Enable/Disable CacheEdit/Delete cookiesEdit/Delete local and session storage data

Manipulate JavaScript data

Browser Developer Tools – Simulated Debugging

Open desktop browser and start developer tools

Install user agent spoofer on browser

Open mobile web site on the browser

Activate User Agent Spoofer

Mobile website runs entirely on the desktop and can be debugged in a simulated environment using Developer tools

Browser Developer Tools – Real Device Debugging

Open desktop browser and start developer tools Open web site on the

browser on device

Mobile website runs entirely on device and can be debugged using desktop browser dev tools!

Enable device for USB Debugging and connect device to desktop

Select device in dev tools to debug

Google Chrome Mozilla Firefox Apple Safari (iOS)

Requirements

Chrome on any desktop OS

Android/iOS phone with Chrome installed

USB Cable

Firefox on any desktop OS

Android/iOS phone with Firefox installed (Also need to enable remote debugging inside the app)

USB Cable

Safari installed on MacOSx

Apple iPhone with Safari installed on it

USB Cable

Additional Features

Debugging over Wi-Fi possible (Complicated to setup)

You can screencast your website from device to Dev Tools

Can also debug WebViews embedded in native Android apps

Can also debug Safari and iOS Webviews using iOS-webkit-debug-proxy

Debugging over Wi-Fi (Easier to setup)

Multi-browser debugging support using Valence

Can also debug WebViews embedded in native iOS apps.

• Can also debug WebViews embedded in native iOS apps.

Valence

A cross browser debugging tool

Valence Add-On

Firefox WebIDE

Debugging Webviews in Hybrid Apps

Android WebView

iOS UIWebView

AndroidYou need to configure the web views in your native Android app so that they can be debugged within developer tools.if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { WebView.setWebContentsDebuggingEnabled(true);}

iOSYou need to have development provisioning profile installed on your target device and you can debug only if you build and run the app from Xcode.

Other options?

Weinre (WEb INspector REmote)

Ghostlab – Licensed tool to test and inspect any website on various browsers and mobile devices simultaneously

Network Proxy Tools

Debug network calls made from your app by introducing a proxy between app and the internet

GET all posts by Dave

Here are all posts by Dave

Log of all network traffic that can be inspected, and acted upon.

InternetMobile

Device

Debug information exposed by Network Proxy Tools

Monitor network request and response information at a granular levelCommunication protocolRequest end-pointRequest headersRequest payloadResponse headersResponse body

Additional testability features

Dynamic Rewrite Request / ResponseBlacklist Request / ResponseSimulate Networking SpeedsMock Request / Response

Charles Web Debugging Tool

Fiddler Web Debugging Proxy

Other options?Burp – Security vulnerability scanner which can also be used as a network proxy.

Debug native apps by monitoring device console logs.

Debug information exposed by Device Log Monitoring Tools

Device log (which includes app logs) messages:Explicit debug messagesWarningsErrors

Monitoring device logs from command line using Android Debug Bridge (adb) utility

View device logs by connecting iOS device to XCode

Use Apple Configurator2 to view iOS device logs

Use an app like iOSConsole (Requires OS X 10.9.2 or higher)

Gray Box Tester

Can cover more tests

Produces better defect

artefacts

Technical Testing Debt is no more

Upgraded Sherlock!

Which tools can you use when?

Hybrid

Android WebView

iOS UIWebView

Network Proxy Tools

Native

Pure Native SDK

Components

Network Proxy ToolsDevice Log

Monitoring Tools

How can you get started?

Understand the application architecture. Ask your developers questions!Understand the technology behind the app.

Raise bugs with all the information gathered from debugging tools. This will save your dev’s time to fix the bug.

Use multiple tools in tandem. One tool is not a solution for everything.

Document the debugging approaches you use for others to benefit from.

Resources• https://developers.google.com/web/tools/chrome-devtools/remote-debugging/• https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/

Debugging_Firefox_for_Android_with_WebIDE• https://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-

safari--webdesign-8787• http://stackoverflow.com/questions/3712883/logcat-standalone-client• https://play.google.com/store/apps/details?id=org.jtb.alogcat&hl=en• http://

apple.stackexchange.com/questions/155552/is-there-any-way-to-access-the-console-logs-on-an-ios-8-device-without-installin

• https://www.utest.com/articles/how-to-get-console-and-crash-logs-from-ios-on-a-mac-using-xcode

• http://codewithchris.com/tutorial-using-charles-proxy-with-your-ios-development-and-http-debugging/

• https://www.moncefbelyamani.com/how-to-capture-iphone-and-ipad-network-traffic-with-charles/

• https://jaanus.com/debugging-http-on-an-android-phone-or-tablet-with-charles-proxy-for-fun-and-profit/

• http://docs.telerik.com/fiddler/Configure-Fiddler/Tasks/ConfigureForAndroid• http://www-01.ibm.com/support/docview.wss?uid=swg21968525• http://www.gallop.net/blog/rise-of-the-software-development-engineer-in-test-sdet/• http://qablog.practitest.com/stop-being-a-non-technical-tester/

Thank You. Questions?

upgrading mobile tester's weapons with advanced debugging

Software

tester's better enforcement for sexual assault free...

tester's nest act

tester's rest act

tester's claims processing improvement act

the tester's role in agile planning

tester's handbook - lung association of saskatchewan

tester's bipartisan public land renewable energy development...

the evil tester's guide to web testing

tester's strong start for america's children act

tester's jason simcakoski memorial opioid safety act

multicore application debugging multicore debugging

tester's rural postal act

running and debugging perlrunning and debugging perl ......

tester's guide

ukk walk test tester's guide

tester's restoring veterans trust act

paul gerrard - the tester's pocketbook

tester's public online information act

the evil tester's guide to http proxies tutorial

tester's bipartisan helium stewardship act