How to automate WebView2 elements with Katalon Studio?

Web Testing
,
1

Hello,

I am working on automating Word Add-ins testing using Katalon Studio. My test case scenario involves two key components:

  1. Automating Ribbon Buttons: These are standard Windows elements, which I am able to automate successfully using Katalon’s Windows automation features.
  2. Automating WebView2 Elements in the Task Pane: The task pane of the add-in contains a WebView2 browser with web elements that I need to interact with.

Challenges:

  1. Element Capture Delay: Capturing WebView2 elements using the Spy Web or Recorder takes a significant amount of time.
  2. Element Identification Issues:
    * Some WebView2 elements lack the Name property and instead rely on the Title
    property.
    * These elements do not get captured correctly or dynamically identified, even when
    using locators like XPath with @title (e.g. //*[contains(@title, ‘value’)]).
  3. Interaction Failures: Methods like WebUI.click() or WebUI.verifyElementPresent() fail to interact with the WebView2 elements, despite dynamic locators.

Questions:

  1. How can I reliably locate and interact with WebView2 elements using the Title property?
  2. Are there specific settings or capabilities I need to enable in Katalon Studio for better WebView2 support?
  3. Is there a way to switch context between Windows automation and WebView2 elements?

Any guidance for handling this combination of Windows and WebView2 elements would be highly appreciated.
Thank you.

2

Hi there, and thanks for posting in the Katalon community! :hugs:

To help you faster, please review our guide on Spy Web Utitliy here: Spy Web utility in Katalon Studio | Katalon Docs. Double-checking the steps and configurations might resolve the issue.

If the doc doesn’t help, feel free to provide more details, and a community member will assist you soon.

Thanks for being a part of our community!
Best,
Vu Le

3

Hi em Elly @Elly_Tran,

Could you take a look at this thread?

Thanks em,
Albert

5

Hi @shubh.ambokar279,

You’re dealing with a challenging mix of Windows automation and WebView2 automation in Katalon Studio. I would like to suggest that:

1. Locating WebView2 Elements Using the Title Property
Since WebView2 elements lack the Name property, but have a Title, try these techniques:

a. Use XPath with Partial Title Matching
You mentioned //*[contains(@title, ‘value’)] is not working. Try making sure:

  • The title attribute is present in the DOM when you inspect the element.
  • The XPath expression is correctly formatted:
    //*[contains(@title, 'ExpectedTitle')]
  • If title is dynamically updated, try adding a wait before interaction:
    WebUI.delay(3)
WebUI.click(findTestObject('ObjectPath'))

b. Use JavaScript Execution for Element Interaction
If Katalon’s WebUI methods fail, try injecting JavaScript:

WebUI.executeJavaScript("document.querySelector('[title=\"ExpectedTitle\"]').click();", null)

or:

WebUI.executeJavaScript("document.querySelector('[title*=Expected]').click();", null)

2. Enabling WebView2 Support in Katalon
a. Ensure Katalon Recognizes WebView2
By default, Katalon’s Web Recorder captures Chrome-based elements, but WebView2 is slightly different. Try launching the WebView2-based Task Pane with debugging enabled:

  1. Enable WebView2 debugging: Launch your Word Add-in with the flag:
    --remote-debugging-port=9222
  2. Connect Katalon to WebView2:
    • Open Chrome DevTools in Katalon and manually attach to the WebView2 session.
    • Try capturing elements again.

b. Use Edge Chromium Driver
If your WebView2 is Edge-based, configure Katalon to use the latest Edge Chromium driver:

  1. Go to Project → Settings → Desired Capabilities → WebUI → Edge.
  2. Add:
    {
  "ms:edgeOptions": {
    "debuggerAddress": "localhost:9222"
  }
}
  3. Restart Katalon and try element detection again.

3. Switching Context Between Windows & WebView2
Since Katalon’s Windows automation (WinAppDriver) and Web automation use different engines, you need to switch between the two.

a. Identify WebView2’s Window Handle

Set<String> allWindows = WebUI.getWindowHandles();
for (String window : allWindows) {
    WebUI.switchToWindowHandle(window);
    if (WebUI.getTitle().contains("Your WebView2 Title")) {
        break;
    }
}

b. Explicitly Switch Between Windows & WebView2
If your test case involves both Ribbon buttons (Windows) and Task Pane (WebView2), structure your code like this:

// Step 1: Automate Ribbon Button
Windows.click(findWindowsObject('Your Ribbon Button Object'))

// Step 2: Switch to WebView2 Context
Set<String> allWindows = WebUI.getWindowHandles();
for (String window : allWindows) {
    WebUI.switchToWindowHandle(window);
    if (WebUI.getTitle().contains("Your Add-in Title")) {
        break;
    }
}

// Step 3: Interact with WebView2 Elements
WebUI.waitForElementPresent(findTestObject('WebView2 Element'), 10)
WebUI.click(findTestObject('WebView2 Element'))

Please take a look and see if it helps