Nowadays Appium is being prominently used for identifying Xpath or locators in both Android and iOS apps. But when it comes to iOS, we would have to spend a lot of time configuring the real device using Xcode for Building the WebDriverAgent. If in case we don’t have the latest iOS Version, iPhone Version, and Xcode version, then we will be facing configuration issues. This is where a cloud testing platform like BrowserStack comes into the picture as an easy solution and alternative to such problems. So if you were looking for the steps to use BrowserStack for inspecting a mobile app’s locators, then you’re in the right place. As a leading automation testing company, we have been using BrowserStack for a long time. So in this BrowserStack Tutorial, we will be showing you how to use BrowserStack as a UI inspector for both Android and iOS apps.
App Live
Make sure to install BrowserStack and keep it ready to do the following steps. If you are still on the fence about purchasing an account, you can still use their trial period to check out how well it fits your needs. So now let’s see how we can test our mobile apps and view the developer logs via DevTools and also identify the mobile elements using the ‘Inspect’ option in DevTools.
Navigate to App Live as shown in the image below,
Let’s a look at the 7 easy steps that have to be followed in this BrowserStack Tutorial now,
i. Click on ‘Test with a Sample app’ as shown in the image.
ii. Upload your App using the given option. If it’s an Android app then upload your apk file here, if it’s iOS, upload your ipa file here.
iii. Select the device you want to test the app in.
iv. Once you have chosen the Real Device that you want to test in, the App will launch.
v. You will get a split-screen view as you see in the below image.
vi. So you will see a pane on the right side that will show the following three options, LOGCAT, INSPECT (BETA), and NETWORK
vii. Now, click on the ‘Inspect’ option, and then click on the ‘Play Button’ that appears to enable Inspector mode.
Inspector Mode
Once we have turned the Inspector mode on by clicking on the Play icon, we will easily be able to identify the locators and objects. All you have to do is hover the mouse over the element that you want to inspect on the mobile screen, and click on it. Once you have clicked, the XML snippet and the element we have selected will be highlighted as shown in the image below.
Right below the code snippers, we will be able to see the ‘Properties Table’ as well.
Highlighted XML code snippet:
>android.widget.ViewGroup
>android.widget.TextView
Properties Table:
The table will show attributes, keys, and values like the Resource-Id, Class name, Package Name, Index, Visible Text, etc…
Example:
Text: Login
Resource-Id: org.package:id/headerLabel
Class: android.widget.TextView
Package: org.package.alpha
Conclusion:
So using BrowserStack as a UI inspector is a very easy process that every tester must know. BrowserStack’s UI inspector has come in handy whenever there was any locator or object issue in the automation suite. We were able to come up with quick fixes and provide the best automation testing services to our clients as we were able to easily identify the locators and objects using BrowserStack. That is why specifically chose to cover that in this BrowserStack Tutorial. If you are looking to learn more about BrowserStack, kindly read our End-to-End guide on it.
Comments(0)