Mobile Elements are Mobile web elements and native elements, like WebElements, referred for the objects present on desktop UI. It’s very much important to have proper strategies to identify elements, whether it is Mobile Elements or Web Elements. If we talk about mobile testing with Appium & Selenium then there come two points in the picture, The first one is getting mobile elements for native apps and the second one is capturing mobile web elements, which simply means fetching them through the mobile browser. In this tutorial, we are going to discuss getting the mobile web elements using screencasting feature in Google chrome. It’s exactly similar in finding web elements by using the inspect element in the chrome browser which we do it for the desktop web application.
Before we jump to the agenda of this tutorial, I would first suggest you some articles to go through. They will just help you brush up the basic skills (You can ignore them if you don’t require brush up). Those articles are listed below:
- Guide to install Appium & Android SDK
- Understanding the architecture of Appium for mobile testing
- Different Mobile Element locators used in Appium
- Find Mobile Elements using UiAutomatorViewer tool
- Some of the useful ADB commands for Appium testing
- Guide to create dynamic XPath in Selenium
- Advanced XPath Tutorials
- Guide to create dynamic CSSSelector in Selenium
What is Chrome DevTools?
Chrome DevTools is an inbuilt developer tool inside the Google Chrome browser, which helps in editing any web page, diagnosing the problems for faster and better website experiences.
Benefits of Chrome DevTools
Some of the benefits of Chrome DevTools for Automation engineer are as follows:
- Screencasting mobiles apps in Google Chrome
- Debugging is easier in browser
- All the properties and events of mobile apps are triggered easily
Requirements
- Android 4 or later
- Chrome v32 or later
- Chrome browser must be installed in Android devices
- USB cable
How to discover Android devices in Chrome?
Follow the steps below to discover your Android devices through screencasting.
Step# 1: Connect your device
First, connect your device through USB in your machine and run ADB command (adb devices) to check whether the device is ready or not.
Step# 2: Discover USB devices in Chrome
Open Google chrome and go to the address: chrome://inspect/
You will find the list of connected devices to your machine. You make sure that Discover USB devices option is checked.
Alternatively, you can launch this page by navigating to Chrome Menu >> More Tools >> Developer Tools. Or, by using the command: Ctrl+Shift+I
How to screencast application from Android device to your machine?
Once your device is discovered by the Chrome Developers tool; next, you need to screencast your android device to your machine. It will help you in inspecting Mobile elements.
Step# 3: Launch Chrome
Launch Google chrome in your mobile device and refresh the Developers Tools page in your machine. You will see mobile’s tab information is visible in chrome developers tool with options to open tab with url, inspect, pause, focus tab, reload, close and inspect fallback.
How to inspect and discover mobile elements with screencasting in Google chrome?
Now we can launch the application URL and can inspect mobile elements easily.
Step# 4: Launch application
Enter the URL of the application in the URL text area and click open. URL will be launched and you get the tab information. See image below:
Mobile View
Step# 5: Discovering Mobile Elements
Now click on the inspect option and a new inspector window will be opened where you see the screencast-ed version of the application. It’s pretty much similar to the desktop browser’s inspector.
Note: It’s recommended to use a higher version of desktop’s Chrome browser, as compared to the mobile’s chrome browser. If your mobile browser version is higher than desktop browser version then use inspect fallback option to inspect mobile elements.
Hope this article will help you a lot in discovering mobile elements through screencasting services offered by Google Chrome. Join our social media channels to keep yourself upgraded in the test automation industry. Join our FB group.
