Finding XPath in LG webOS TV Apps (End-to-End Guide)

Introduction When working on LG webOS TV automation, one of the biggest challenges is: “How do I inspect elements and find XPath like we do in browsers?”

Unlike web applications, Smart TV apps don’t provide direct access to DevTools by default. This makes DOM inspection confusing for many testers.

In this article, I’ll show you how to inspect the DOM of an LG webOS TV app and create stable XPath for automation.

— -

Why DOM Inspection is Different in LG TV Smart TV apps are usually built using web technologies (HTML, CSS, JavaScript), but: — They run inside a restricted environment — No direct browser access like Chrome — UI is controlled via remote navigation — Elements are often dynamically rendered (React / virtual DOM)

So we need a different approach to inspect elements.

— -

Prerequisites Before starting, ensure: — LG webOS TV is in Developer Mode — Your system and TV are on the same network — You have webOS CLI installed (ares tools)

— -

Step 1: Enable Developer Mode — Install Developer Mode App on LG TV — Turn ON: — Developer Mode — Key Server — Restart the TV

Note your TV IP (Example: 172.16.x.x)

— -

Step 2: Connect TV Using CLI

ares-setup-device

Add your TV: name: LGTV ip: 192.16.6.89 port: 9922 username: root

Verify connection: ares-device-info

— -

Step 3: Launch App Inspector

ares-inspect -d LGTV <APP_ID>

Example: ares-inspect -d LGTV com.your.app.id

This will open a Chrome DevTools window.

— -

What You Get (DevTools on TV) Inside DevTools, you can: — Inspect HTML structure — View classes and attributes — Track focused elements — Debug JavaScript — Monitor network calls

This works similar to Chrome DevTools but for TV apps.

— -

Step 4: Identify Focused Element Look for attributes like:

data-focused=”true”

Example XPath: //*[@data-focused=’true’]

— -

Step 5: Create Stable XPath

Avoid: — Full class names (dynamic in React)

Use:

1. Text-based XPath //div[text()=’Continue Watching’]

2. Parent-child structure //h2[text()=’Continue Watching’]/ancestor::section//div[@data-focused=’true’]

3. Contains (Flexible) //div[contains(text(),’Play’)]

— -

Conclusion Using ares-inspect, you can inspect DOM and create stable XPath for LG webOS TV automation effectively.