Introduction

Web application development trends have shifted towards designing apps that are also accessible to mobile devices. Due to responsive design, it becomes easy for app developers to develop a website to run on various devices.

The tester’s job then becomes critical, because the application needs to be tested on all of the supported devices, or the tester cannot guarantee that application will run well on any particular device. This is more time consuming when an application supporting various mobile device platforms has different browsers and versions. Automation relieves the stress of this problem if implemented with a good automation tool, such as Selenium with a robust framework.

With the automation process, it is more challenging when the automation tester needs information about the web elements that are going to be used in automation scripts. Unlike on desktop browsers, web browsers on mobile devices do not provide any in-built facility to inspect an element. However, there are a few tools available can make the job easier.

  1. Google chrome on desktop provides an option to remotely access DOM of the web application running on Android using Developer-tools. User can monitor it live on his machine.
  2. Weinre is an open source tool which can debug web pages on android, iOS, Firefox OS and windows.
  3. Safari version 6+ also provides a feature to remotely debug web applications on iOS for Macs. I am not going to cover this option now, as it is similar to debugging Google chrome on Android.

[See Also: Appium: iOS UI Software Test Automation]

Remote Debugging Using Chrome Developer Tools

Requirements

  1. Chrome 32 and later needs to be installed

  2. Android 4.0 + and Chrome on device
  3. Android 4.4+ for app debugging and webview configured

Note: The version of Chrome on your desktop needs to be higher than the version on Android
Steps

    1. Enable USB debugging on the device by clicking Settings > Developer Options > USB debugging (device only).
    2. Connect the phone to a machine using a USB cable or start an emulator locally.
    3. After setting up your device, open chrome://inspect/ on your desktop Chrome.
    4. Check Discover USB devices. If confirmation popups appear, just click OK. If the device is properly connected, the device will be shown as found, as below.

Zymr - Checking discover USB devices

    1. Open Chrome on your device/emulator.
    2. You can now see Chrome with version and provision to open a URL on devices.
    3. Provide an application URL.  You can now see application URL and inspect link below.

Zymr - inspect link

Note: You can open multiple tabs in a browser; all will be listed in your desktop Chrome. You can also focus the required tab, reload or close tab remotely from your machine.

    1. Now it is time to debug the code, so click on inspect link to open the developer tools window.

Zymr - Debugging the application

    1. Hover or click on the element you want; it will be highlighted in the device.

It also provides to feature to find an element on the page. Click on the icon and click on the desired element, in case you are using emulator.

[See Also: 4 Steps for Assessing Mobile App Development Strategy]

Remote Debugging Using Weinre

Weinre is an open source debugging tool, used to debug web applications running on Android OS, FireFox OS, iOS or Windows. It supports Chrome, Safari or any WebKit–based browsers.

Weinre Components

      1. Debug server: HTTP server used by Debug client and Debug target.
      2. Debug client: web inspector for the application similar to developer-tools.
      3. Debug target: web application running on your mobile device.

Setting Up Server

(It can be on your local machine)

      1. Weinre is based on node.js, download node.js and install it on your server machine.
      2. Install weinre as npm package using the command:sudo npm –g install weinre That is all; your server is ready! Start it using the command weinre. Itwill start on default 8080 port; you can change it using weinre

        –httpPort <port number>. Check more options using weinre

        –help.

      3. The server home page is accessible using http://<IP address of the server>:<port>/
      4. Open debug client using the http://<IP of the server> : <port>/client/#anonymous on your machine. This link is available on home page.
      5. Connect your device or emulator using Wi-Fi to network so that server can access it. Try accessing server home page URL on device browser. If it opens, then your device is connected to server.
      6. In order to allow the debug server to communicate to the target, a JavaScript code is required to be added in the page source.
        <script src=”http:// <IP address of the server>:
        <port>/target/target-script-min.js”></script>
      7. Open your script injected web page in the device browser. It will be shown in the Remote tab of the debug client on your machine.
      8. Now you can debug your web page using the Elements tab of the client.

Zymr - Debugging using weinre

Everything you need to know about outsourcing technology development
Access a special Introduction Package with everything you want to know about outsourcing your technology development. How should you evaluate a partner? What components of your solution that are suitable to be handed off to a partner? These answers and more below.

Introduction Package

 

Source: zymr

This article was authored by Milind Gholap, who is a Technical Manager at Zymr

0 comments

Leave a Reply

© 2019, Zymr, Inc. All Rights Reserved.| LEGAL DISCLAIMER | PRIVACY POLICY | COOKIE POLICY