[🚀 Feature]: Unable to Detect draw.io Elements in Chromium using Chrome DevTools and Selenium.

[sgewali]

Feature and motivation

We are facing an issue automating a third-party application, draw.io, embedded in our product. The issue arises when trying to detect and interact with elements inside the draw.io canvas using Selenium and Chrome DevTools.

Usage example

Problem Details:
The draw.io application is embedded within our web product.

While the DOM entry is present, Chrome DevTools does not detect the elements, making it impossible to inspect them.

As a result, Selenium cannot interact with the elements through conventional locators (ID, XPath, CSS selectors, etc.).

Steps to Reproduce:
Open a web page that embeds the draw.io editor.

Try inspecting elements within the draw.io canvas using Chrome DevTools (F12).

Observe that the elements are not detected, despite the presence of a DOM entry.

Attempt to automate actions (such as selecting a shape) using Selenium WebDriver.

Observe that the element interactions fail.

Expected Behavior:
Chrome DevTools should be able to detect and inspect the draw.io elements.

Selenium should be able to interact with draw.io elements using conventional DOM-based selectors.

Actual Behavior:
Chrome DevTools does not highlight or detect elements inside the draw.io canvas.

Selenium fails to interact with elements, despite their apparent presence in the DOM.

[github-actions]

@sgewali, thank you for creating this issue. We will troubleshoot it as soon as we can.

---

Info for maintainers

Triage this issue by using labels.

If information is missing, add a helpful comment and then I-issue-template label.

If the issue is a question, add the I-question label.

If the issue is valid but there is no time to troubleshoot it, consider adding the help wanted label.

If the issue requires changes or fixes from an external project (e.g., ChromeDriver, GeckoDriver, MSEdgeDriver, W3C), add the applicable G-* label, and it will provide the correct link and auto-close the issue.

After troubleshooting the issue, please add the R-awaiting answer label.

Thank you!

[davidjgraph]

draw.io uses the SVG DOM.

[NirooRuby]

@sgewali since you mentioned the draw.io embedded in your web application, check whether the model use any frame to incorporate to your DOM (like Iframes), if that is the case you need to get the ID or Iframe locator first to switch and then u can use the selenium to click. secondly you can use the JavascriptExecutor to click your element in Java or Python
eg in Java
// Locate the element you want to click (e.g., by ID)
By elementLocator = By.id("elementID");

    // Use JavascriptExecutor to execute the click event
    JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
    jsExecutor.executeScript("arguments[0].click();", driver.findElement(elementLocator));

[github-actions]

Hi, @sgewali.
Please follow the issue template; we need more information to reproduce the issue.

Either a complete code snippet and URL/HTML (if more than one file is needed, provide a GitHub repo and instructions to run the code), the specific versions used, or a more detailed description to help us understand the issue.

Note: If you cannot share your code and URL/HTML, any complete code snippet and URL/HTML that reproduces the issue is good enough.

Reply to this issue when all information is provided. Thank you.

[github-actions]

This issue was closed because we did not receive any additional information after 14 days.

[github-actions]

This issue has been automatically locked since there has not been any recent activity since it was closed. Please open a new issue for related bugs.