Inspecting elements of websites on desktop environment is fairly straightforward with built-in Inspector Mode on most web browsers like Chrome, Firefox, Safari. How about inspecting elements of web/apps on mobile devices? Conventionally, developers and testers have resorted to Appium Inspector. However, Appium Inspector requires physical mobile devices, which might be demanding to teams with limited resources. Kobiton offers the ability to run Appium Inspector on Kobiton hosted devices, but it requires installation of Appium Inspector on user's local machines. Therefore we introduce Kobiton’s Device Inspector, wielding the power of Appium Inspector minus the devices and installation hurdles. Device Inspector allows you to inspect elements on Kobiton devices real-time within a Manual Session, or in Session Details modal after the session ends.
The Basics
Device Inspector is a new built-in feature that is an extension of Kobiton’s built-in Appium server. This tool enables mobile testers to easily identify objects in web/apps on mobile devices, which is the first step of writing automation test scripts. Device Inspector makes object identification easy by providing the necessary attributes required to write Appium test scripts, such as ID name, text, location, etc., through a simple mouse click on the object.
Device Inspector works with the following:
-
iOS: Native and Hybrid Apps, Webs on Safari browser
-
Android: Native and Hybrid Apps, Webs on Chrome browser
How to use Device Inspector
Method 1: Within Manual sessions
- Click Inspector on the upper right to open Inspector modal.
- Click on Inspect Element icon within the upper right to enter Inspect Mode. When you move your pointer on the device's screen, there's a dashed line border around the element. Click that element would exit the inspect mode and return a value on the Hierarchy panel.
- You can capture the current inventory of the app/ web view by clicking on the Refresh button.
- Hovering elements in the Hierarchy Panel would highlight the corresponding elements in the device's screen. Click on one element, then choose Show attributes to see its attributes.
- Copy the attributes' xPath and paste to the Search bar, the hierarchy will be filtered accordingly as you search.
Method 2: Within Session Details:
-
After ending a Manual session, navigate to Session List via https://portal.kobiton.com/sessions, then click the session within the list to open Session Details. Within the Session Details choose Appium Inspector in the dropdown list.
-
Perform actions similar to those mentioned in method #1 above with Inspect & Refresh buttons.
-
To download, click on Download button to get a ZIP file with a specific step screenshot & xml file.
Full reference of all functionalities within Device Inspector
The Inspector Panel comprises four parts:
-
Label: Native App or WebView App, you can choose from the dropdown list.
-
Next to Label on the right hand side is Search bar: Search for elements by Label, xPath or xPath Attribute.
-
Actions:
Three buttons on the right hand side of the screenshot below, includes:-
Refresh Inventory: Capture the current inventory of the app/ website.
-
Inspect Element: Enter Inspector Mode, inspect a specific element.
-
Download: Download the current Hierarchy.
-
-
Hierarchy: The XML tree of the Native App /Webview App.
-
Attribute & value (expandable & collapsible)
-