Home » Blog » How to Inspect Android UI Elements with GeeLark Inspector
GeeLark Inspector illustration showing Android UI elements outlined on a mobile screen

How to Inspect Android UI Elements with GeeLark Inspector

Updated on

Summarize this article with your preferred AI

When building an automation flow with GeeLark RPA, many steps need to interact with buttons, input fields, or other UI elements inside an app.

To help the RPA find the right element when the workflow runs, you first need to inspect its attributes and use the right ones to build an element selector.

This guide shows you how to inspect Android UI elements with GeeLark Inspector, check their attributes, and use those attributes to build element selectors in GeeLark RPA.

What is GeeLark Inspector?

GeeLark Inspector is a tool for viewing and analyzing UI elements in Android apps. It shows the app’s UI hierarchy and lets you check element attributes such as resource ID, text, class, and content description.

With GeeLark Inspector, you can quickly find the key attributes of the element you need and use them to set up an element selector. T

GeeLark Inspector showing Android UI nodes and attributes for a Like button

How to inspect Android UI elements with GeeLark Inspector

I’ll use TikTok as an example to show how to inspect Android UI elements with GeeLark Inspector, check their attributes, and use those attributes to build element selectors in GeeLark RPA.

Open GeeLark Inspector and load UI elements

GeeLark Inspector is available in Flow Canvas, not in the regular Workflow editor.

Go to Custom tasks, if you already have a custom task, choose the task you want to work on, and click Edit flow.

GeeLark Custom tasks page with Edit flow highlighted

If you’re using the Workflow editor, switch to Flow Canvas first.

GeeLark workflow editor with the Flow Canvas switch highlighted

If you haven’t created a custom task yet, click Create flow and choose Create new flow.

GeeLark Custom tasks page with Create new flow selected

Once you’re in Flow Canvas:

1. Click Layout Viewer in the top-right corner.

2. Choose a cloud phone that has the app you want to automate.

3. Wait for the cloud phone to start, then open the app and go to the screen you want to work with.

4. In GeeLark Inspector, click Refresh UI nodes to load the UI elements on the current screen.

5. Click Layout scope analysis. The UI elements on the current screen will be outlined with blue boxes.

Once the blue boxes match the UI elements on the screen, you can start inspecting the elements you need. If the boxes are missing or don’t line up with the current UI, click Refresh UI nodes and run Layout scope analysis again.

GeeLark Inspector Layout Viewer with UI nodes outlined on a TikTok screen

Here’s a quick demo of how to open GeeLark Inspector.

Example 1: Inspect an element by text

Many UI elements on TikTok have visible text. For example:

  • Text: For You, Shop, Following
  • Icons with text or numbers: Home, Friends, 1.2M, 1,875
TikTok For You tab highlighted in GeeLark Inspector

When an element has visible text, searching for that text is often the fastest way to find it in GeeLark Inspector.

For example, one step in the RPA workflow might need to click For You.

1. In GeeLark Inspector, enter For You in the search bar. Use the same spelling and capitalization shown on the screen.

2. Find the matching UI node in the UI tree. If you don’t see it right away, scroll down, the matching node is often near the bottom of the tree. Select the node and check the cloud phone screen.

3. The highlighted box should line up with the For You element.

4. Check the Attribute section below. The element has: content-desc: For You

GeeLark Inspector search results for the For You element

This gives you a clear attribute to use for the element. In GeeLark Inspector, content-desc corresponds to desc in the RPA Element selector.

So in the Click step, set the selector to: desc → Equal → For You.

RPA Click action selector using desc equal For You

Example 2: Inspect an icon-only button

Apps also have plenty of UI elements that don’t show any text, such as:

  • Search icons
  • Profile pictures
  • Like buttons
  • Comment buttons
  • Save buttons
  • Post buttons

For this example, I’ll use the Like button on this cat video. The cat is just too cute!!! 😺

TikTok cat video showing icon-only controls

Because icon-only buttons don’t have visible text, use Layout scope analysis to inspect the element:

1. Click Layout scope analysis. The UI elements on the app screen will be outlined with blue boxes.

2. Click the Like icon. A red box will appear around it to show that it’s selected.

3. Then, the UI node for the Like icon will be highlighted in the UI tree.

4. Check the Attribute section. In this example, two useful attributes are:

  • class: android.widget.ImageView
  • content-desc: Like

Tip: If you scroll, open another screen, or move to a different page in the app, click Refresh UI nodes first. This makes sure GeeLark Inspector is reading the UI elements from the current screen.

GeeLark Inspector attributes for a Like button showing class and content description

5. You can click an attribute value to copy it to your clipboard.

GeeLark Inspector attribute value copied to the clipboard

Next, go back to the RPA editor and add the two attributes you just found to the Element selector in the Click action:

  • class → Equal → android.widget.ImageView
  • desc → Equal → Like

Then use And to combine the two conditions. This tells the RPA to identify the Like button by both its element type and description, instead of relying on just one attribute.

RPA Click selector combining class and description conditions

Example 3: Find a more reliable node

Sometimes, the first node you select isn’t the best one to use for locating an element.

TikTok’s Comments button is a good example.

TikTok Comments button highlighted in a cat video

First, click Layout scope analysis. Then:

1. Click the Comments icon, a red box will appear around it.

2. The UI node for the Comments icon will be highlighted in the UI tree.

3. Check its attributes. The node has:

  • resource-id: com.zhiliaoapp.musically:id/eb6
  • class: android.widget.ImageView

These attributes can identify the element for now, but they may not be very reliable. Many UI elements can share the same android.widget.ImageView class, and the resource-id may change after an app update.

GeeLark Inspector showing the resource ID and class for the Comments icon

So don’t stop at the first node.

4. Move up the UI tree and check the parent nodes to see if there’s a better node for locating the element.

In this example, there’s a Button node with attributes that are more suitable for the selector. Then click the Button node

5. Now check the Comments button on the left. You’ll see a red outline around the entire button area, which shows that this Button node matches the full Comments button.

6. Its attributes include:

  • class: android.widget.Button
  • content-desc: Read or add comments. 4,182 comments
GeeLark Inspector showing the parent Button node for the Comments control

This node is a better choice. Its attributes are more distinctive, making it easier to build a reliable element selector.

In the Element selector, add these two conditions:

  • class → Equal → android.widget.Button
  • desc → Contains → Read or add comments.

Then use And to combine them.

The comment count changes from video to video, but Read or add comments stays the same. That’s why Contains works better here, it matches the fixed part and still lets the selector find the Comments button.

GeeLark Inspector attributes for the Comments button