Category Page

Author: Nilesh Tarale

Nilesh is the vice-president at pCloudy and has around 16 years of experience in Product development and Testing. He has worked primarily in the mobile application testing and mobile device testing domain with companies like Sasken, Motorola, Nokia, and Accenture.

Nilesh Tarale | Posted on | 2 min Read

Mobile Responsive Testing and Debugging on Real Devices

Emulators vs Real Devices

 

Mobile Responsive Test across range of Mobile Devices and platforms is extremely important for superior User Experience. However, Mobile Responsive Test and debugging can get knotty, especially when there are issues like obfuscated HTML/CSS/javascript code, improperly implemented HTTPS, browser inconsistencies, page load performance and so on. So how do you overcome these issues? Using a Web Developer Tools or debugging extensions make debugging your web application easier. Here we’ll talk about the most popular one – Google Chrome Developer Tools.

 

The Google Chrome Developer Tools is a consolidated environment built into Google Chrome Browser. It is used for web authoring, debugging, monitoring, optimizing, and understanding web applications or websites. (Sourced from Google Chrome DevTools)

 

A responsive testing simulator provides a virtual environment where you can test the functionalities just like in a real device. You can also test websites on mobile devices online and test websites on different screen sizes. It is easy to perform responsive design testing across devices on a simulator.

 

Want to test your Mobile App?

Join pCloudy Platform!

Signup for Free

Here are some of the key Chrome DevTools features

 

  • Inspect and edit the DOM and CSS of your website in real-time
  • Run code snippets from any page
  • Debug Obfuscated code
  • Set advanced breakpoints and debug JavaScript using graphical debugger
  • Troubleshoot Security issues
  • Analyze run-time and page performance to improve the speed of your app
  • Trace reflows and repaints as your app loads

 

The Chrome DevTools provides almost all the gears required to inspect, debug and monitor the performance of a Web App/mobile web. It also provides additional capabilities to simulate Mobile Devices to test and build mobile-first, responsive web sites. You can even debug web content on a real Android Device from a development machine. But, is it enough to perform Mobile responsive test on one or two devices?

 

Remote debugging using Chrome DevTools in integration with pCloudy’s Mobile Device Lab

Device fragmentation is a very real problem when testing Web apps on real devices, particularly for UI and functional tests. The number of devices with unique specifications and proprietary build variations has increased. At an advanced level, to perform Mobile Responsive Testing and to check performance of the Web App on real devices, you will need to experiment your site on various platforms, across a number of device form factors. pCloudy’s Mobile Device Lab offers complete integration with Chrome DevTools to test your apps on real devices. This integration allows you to test Web Apps on a myriad of android devices with different sizes and configurations.

 

Here’s how most App developers test their Web Apps

 

Inspect and live edit your site’s design and content

 

Test and edit your site in live mode by inspecting all the HTML and CSS in your page. In the Elements Panel, you can live-edit a DOM node by simply double-clicking a selected element and making changes.

 

mobile responsive test

 

You can even live-edit style property names and values in the Styles pane. Examine and edit box model parameters.

 

Live-Edit_Styles

 

It is also possible to edit the current element’s box model parameters by making changes to top, bottom, left, right values for the current element’s padding, border, and margin properties using the Computed pane.

 

Box_Parameters

 

Remote Debugging on real devices to fix errors in the code

 

Debugging Obfuscated Code: Make your code readable and easy to debug even after you’ve combined, minified or compiled it. You can easily change the formatting of your minimized code by clicking on { }.

 

Debug-Obfuscated

 

Test and optimize the performance of the Web App

 

The Network Panel allows you to see how your page renders, and time taken to render from start to end. To do this click into the “Network” panel, click on the camera icon and refresh the page on the device.

 

Network

 

The Timeline panel helps you to record and analyze all the activities in your application as it runs. It’s the best place to start investigating perceived performance issues in your application.

 

To make a recording of a page load, open the Timeline panel, open the page that you want to record, and then reload the page. The Timeline panel automatically records the page reload. You can also record page interactions on the page and view the performance details through the recorded timeline.

 

Here are some more details you can view using the Record Timeline

 

  • Record the Timeline to analyze every event that occurred after a page load or a user interaction
  • View FPS, CPU, and network requests in the Overview pane
  • Click on an event within the Flame Chart to view details about it
  • Zoom in on a section of a recording to make analysis easier

 

Timeline

 

There are some things to be kept in mind while performing responsive testing:
 
Device selection
It is better to ask your business analyst or your manager which devices we need to perform the testing. Creating a device matrix is a tedious job due to device fragmentation with frequent browser and OS updates. Even if you spend a lot of time on making a strategy for the combination of devices, that may not get approved by the product manager or scrum master.
 
Automation testing and Manual testing
It’s better to use both automated and manual approach to perform testing. Based on the type of testing you can share the effort like 70% automated and 30% manual. It is obvious that sometimes automated testing will miss something that a human eye can see. A tool clicking on a link or zooming in and out is different from doing it manually.
 
Emulators, simulators and real devices
If you wish to test your app on many verities of devices then you can also opt for emulators and simulators. It won’t be possible for you to set up a device lab as it will cost a lot. So you can use a real device that is popular in the market and emulators for the devices that are not that popular.
 
Prioritize
Mobile app testing including mobile responsive testing needs to be perfectly prioritized as testing is a time-consuming process. Responsive testing priority should be discussed with the BA and the product manager well in advance and take some suggestions from them. The issue is that there are a plethora of devices and while prioritizing, the most popular devices will be used first for testing.
 

Conclusion

“Using the right tools for the right job” is an old aphorism that applies to all domains including Software Development. As we’ve seen, Chrome DevTools has several features that help you develop better, debug faster, and measure efficiently the performance of your website or application. An ideal choice for you for Mobile Responsive Testing.

 

The features discussed in this blog are some of the most common ones used by developers, designers, and testers to write, debug, monitor and optimize Websites and Web Apps. Using these features in integration with Mobile Device Lab like pCloudy can transform the entire process of creating, testing and launching Websites and Web Apps.

 

Want to test your Mobile App?

Join pCloudy Platform!

Signup for Free

For more information check out this video:

 
Related Articles:

  • Beginners Guide to Mobile Web Debugging on Real Devices Using Chrome DevTools
  • Mobile Testing Infrastructure – Emulators vs Real Devices
  • Problems With Online Android Emulators and How to Solve it?
  • Tips to Consider While Creating a World Class Mobile Testing Lab
  • Functional Testing Vs Non-Functional Testing

    • Nilesh Tarale | Posted on | 2 min Read

    Tips to Consider While Creating a World Class Mobile Testing Lab

    How to create a world class Mobile Testing Lab?

     

    It can be a big challenge to build a large scale Mobile Testing Lab from scratch. Look around you and you will see that with every single day, companies in adding mobile apps in their business strategy and with it the mobile app dev and testing market is becoming increasingly competitive, dynamic and fast paced. Older testing methods are becoming obsolete and the utter multiplicity of mobile platforms, devices and networks have made it important for any company to choose the right solution (Mobile Testing Lab) in order to strengthen themselves in the market.

    While creating a testing program for these mobile applications can seem like a relentless chore and a massive undertaking, it doesn’t really have to be. Here are a few considerations to choose the right lab strategy for testing your mobile apps.

     

    Key Considerations:

     

    • Compatibility of Device OS, Screens and OEMs: The sheer number of different device variants, OS versions and screen resolutions form a large set of factors even though each of them are significant in their own rights. In 2012 there were about 4,000 Android device models on sale. 2015 saw about 24,093 distinct Android devices. Question is, can the lab I choose, cover maximum number of devices and come close to 100 percent of my end users’ device base?

     

    mobile labs

     

    • Device Control Infrastructure: After you select your target devices, it is also key to look at the other parts of a reliable architecture of your hardware. Regardless of the technology to be used in building the device lab, one needs servers to control and take care of managing devices and execute tests. Moreover, it is crucial for these servers to collect, process and store results of the tests seamlessly and without interruption.

     

    mobile testing lab

     

    A snapshot of Infrastructure needed to create a Mobile Device Lab

     

    mobile testing lab

     

    Facebook Device Lab Infrastructure

     

    Click Here to know about pCloudy Device Cloud Infrastructure

     

    • Wi-Fi Infrastructure: This is another very crucial area that is often ignored when creating large-scale test lab. As the number of device in a WiFi network adds up, so do problems when all these devices transferring data at the same time. Most WiFi access points are not designed for this kind of bandwidth and you are bound to see different types of timeouts on server responses.

     

    • Importance of Automated Testing: The very obvious benefit of automation of testing of mobile devices on the cloud is that through this one can carry out tests on a wider range of OS and devices in a much shorter time and with lesser life-cycle management investment. This not only significantly reduce QA spending, it also expands coverage and speeds up the resolution of issues. You can use a single script and apply the same on different devices and operating systems.

     

    Integration with CI/CD pipeline:

     

    Today, almost all organizations have mobile apps and for some, the mobile app is their only way of interacting with customers. With this increasing emphasis on mobile, the pressure to routinely update mobile apps means embracing Continuous Integration (CI) and Continuous Delivery (CD) methodologies. Any Mobile Labs has to support the CI/CD process.

     

    5 Tips to build a successful lab:

     

    1. Using Real Devices
    2. Tackling Multiple Devices
    3. Using a Secure Mobile Device Testing Cloud
    4. Automation Strategy
    5. Increase Lab efficiency by integrating with your existing tool ecosystem

     

    1. Using Real Devices: Some Devs/testers are using emulation technology for compatibility testing. However, it has been proven beyond doubt that testing on emulators is often not reliable. Real devices help you and your team to find real bugs in your App before customers do. It is only way to have a confident App release and increase the chances of success of your test lab.

     

    2. Tackling Multiple Devices: With thousands of different devices, it can be a bit overwhelming when building a mobile testing lab that encompasses the coverage of testing in all of them. Luckily, the major mobile operating systems use logical screen sizes which are mapped to physical screen, hence, the representative devices will get the necessary coverage. The test strategy is not to test absolutely everything, but to test the crucial elements that are most represented in the popular devices in the market, and add or subtract devices as they come in and out.

     

    3. Using a Secure Mobile Device Testing Cloud: Using a secure cloud is vital to enterprises, especially if they aren’t located under the same roof. Testing real devices for everything can become really costly and time consuming. Using a testing cloud keeps your budget in check, reduced project cost and thus helps achieve high return on investment. Be it public cloud for small businesses, or large enterprise projects that demand a private cloud infrastructure, high performance and security are essentials to have complete control over the cloud.

     

    4. Automation Strategy: Creating Regression Automation suites once Application is ready is a passé. Agile methodology and CI/CD process demands automation creation in parallel to development. Automation strategy should be built keeping above aspect in mind.

     

    Here is a depiction of what the automation process should look like.

     

    Mobile Labs

     

    As part of Automation Strategy, Mobile Testing Lab should provide the capability to allow automation run on multiple devices in parallel.

     

    5. Increase Lab efficiency by integrating with your existing tool ecosystem: A lab is as good as how well can it be integrated within existing ecosystem. Can it integrate with your Test Management system or can it log bugs automatically after a failure? Can it integrate with your build management tool for CI process? Here is a depiction of how “Test Tools” fit in the larger ecosystem.

     

    Mobile Testing Lab

     

    Conclusion: A well thought strategy for setting up of Mobile Testing Lab is a necessity for every organization undertaking Mobility projects. In current times, organizations have plethora of choice related to setting up of Mobile Testing Lab. They can choose to setup an In-house lab or use a private-hosted service or use a cost effective Public Cloud lab.

     

    Would you like to know more about Lab options with pCloudy? Click Here

    Nilesh Tarale | Posted on | 2 min Read

    Mobile App Developers Key Results 2016

    Mobile Platforms Developers Use

     
    This is a summary of Mobile App Developers – Key Results from April to June 2016, Which reached 16,500+ Developers across 150+ countries.

    A. Mobile Platforms – Which Mobile Platforms do Developers Use?

    mobile app developers

    B. Mobile App Categories – Which Mobile App Categories Are Developers Targeting?

    mobile-app-categories

    C. Mobile Target Audiences – Which Audiences Are Primarily Targeted by Mobile Developers?

    mobile-target-audiences

    D. Mobile Business Models – How do Mobile Developers Make Money?

    mobile-business-models

    Source from Developer Economics

    Nilesh Tarale | Posted on | 2 min Read

    Mobile App Testing Tips for IOS 9.x: Do you know – How Does “Low power mode” Impact Your App?

    Mobile App Testing Tips for IOS 9.x

     

    iOS 9 and later provide users with the ability to enter power-saving modes.

     

    As per Apple IOS 9.0 update ( source : https://developer.apple.com/library/ios/documentation/Performance/Conceptual/EnergyGuide-iOS/LowPowerMode.html)

     

    “Users who wish to prolong their iPhone’s battery life can enable Low Power Mode under Settings > Battery.

    Low Power Mode

     

    Once enabled, Low Power Mode changes the battery indicator in the top right corner to yellow, reminding users that their device is running in a more efficient state.

     

    Low Power Mode

     

    In Low Power Mode, iOS conserves battery life by enacting certain energy-saving measures. For example, the system may:

     

    • Reduce CPU and GPU performance
    • Pause discretionary and background activities, including networking
    • Reduce screen brightness
    • Reduce the timeout for auto-locking the device
    • Disable Mail fetch
    • Disable motion effects
    • Disable animated wallpapers

     

    The mode automatically disables when the battery level rises to a sufficient level again.

     

    Impact on Apps

     

    Your app should take additional steps to help the system save energy when Low Power Mode is active. For example, your app could reduce the use of animations, lower frame rates, stop location updates, disable syncs and backups, and so on.

     

    What if your App is resource intensive, and user is trying to use the App when iPhone is in the low power mode? You App might crash. Regardless of the scenario, You need to make sure your app works and the best way to do that is to conduct mobile app testing on real devices. You need to put your App through rigorous testing on low power scenario on real devices.

    Nilesh Tarale | Posted on | 2 min Read

    Internet of Things – Connecting Physical World to the Internet?

    Internet of Things

     

    Have you heard the term “Internet of Things” or “IOT” lately? The answer might be yes for most of you. Have you wondered what’s the buzz all about? What do we call “things” here? And, what is it to do with Internet? We will try to understand the phenomenon in this article.

     

    Firstly we need to understand what are “things” here?

    We are talking about physical things. It could be anything objects, appliances, vehicles, buildings, Animals, people, anything on planet.

     

    Secondly, these things have to be transformed into smartThing. So, what are SmartThings?

     

    As you can see in the depiction below, physical objects become smart objects when they get associated with sensors and an IP.

     

    iot-1

     

    Lastly, how these smart objects communicate over Internet?

     

    Once physical objects have sensors and an associated IP, these objects get the ability to send and receive data. This data can be transferred using internet and can also be stored on cloud. Moreover, this data can be consumed by various Applications, mostly Mobile Applications.

     

    iot_2

     

    This means Your App on Mobile device can communicate to a physical object like your freeze or your keys or your light switch in your house. It can receive information and send commands to perform actions.

     

    This whole ecosystem is termed as Internet of Things.

     

    So, how does it impact our life? In fact, this can impact our lives beyond our imagination.

     

    In future, Google will not only remain a search engines for web content but you will also be able to perform operations like this.

    iot-3

     

    Or

     

    Your fridge will send you an alert on your Mobile phone to bring milk packets as soon as you reach a super market.

    iot-4

     

    By now, you would have observed that IOT is about connecting our physical world to Internet. It’s predicted that by 2020 there will be 50 Billion smart Objects. And, every human being will be surrounded by 3000 to 5000 smart Objects.

     

    iot-5

     

    Does it trigger any thought, how are you going to test applications built for Internet of Things? We will soon be discussing that in our upcoming post.