Selenium WebDriver: clicking on elements within an SVG using XPath

how to click on svg element in selenium python
how to write xpath for svg tag in selenium
svg xpath query
protractor svg element
how to write xpath for g tag in selenium
how to automate highcharts using selenium
element is not getting clicked in selenium
xpath for path tag

I have an SVG object with a few circle and rectangle elements. Using webdriver, I can click on the main svg object, but not any of the elements within it. The problem only seems to be with clicking (or any mouse interaction), as I can use getAttribute() to return the value(s) of width, ID, x/y, text, etc, for anything under it.

Here is an example of the HTML:

    <div id="canvas">
        <svg height="840" version="1.1" width="757" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;">
            <image x="0" y="0" width="757" height="840" preserveAspectRatio="none">
            <circle cx="272.34" cy="132.14">
            <rect x="241.47" y="139.23">
            <text style="text-anchor: middle; x="272.47" y="144.11">
        </svg>
    </div>

And an example of WebDriver trying to right click a rectangle element (and failing):

    WebElement mapObject = driver.findElement(By.xpath("//*[name()='svg']/*[name()='rect']"));
    Actions builder = new Actions(driver);
    builder.contextClick(mapObject).perform();

But this works and returns a value:

    driver.findElement(By.xpath("//*[name()='svg']/*[name()='rect']")).getAttribute("x");    

When WebDriver errors, it's usually this:

    org.openqa.selenium.WebDriverException: '[JavaScript Error: "a.scrollIntoView is not a function" {file: "file:///var/folders/sm/jngvd6s97ldb916b7h25d57r0000gn/T/anonymous490577185394048506webdriver-profile/extensions/fxdriver@googlecode.com/components/synthetic_mouse.js" line: 8544}]' when calling method: [wdIMouse::move]

I've spent some time researching this and it seems to be a somewhat common issue with Selenium and SVGs, however I'm wondering if there is a workaround. The only solutions I've found are interacting with the SVG itself, which I can already do.

I'm using Selenium 2.28 (and tried 2.29) w/ Java + Firefox 17.

Any ideas greatly appreciated.

For anyone interested, I solved this in the following ways:

1) I was originally testing this on OSX with Firefox 17 and Selenium 2.28/29, but figured out it only works (at least for me) on Windows with Firefox 18 and Selenium 2.29

2) interacting with SVGs with the standard:

driver.findElement(By.xpath(YOUR XPATH)).click();

doesn't work. You need to use Actions.

3) to interact with SVG objects, the following XPath works:

"/*[name()='svg']/*[name()='SVG OBJECT']";

The SVG object being anything under the SVG element (e.g. circle, rect, text, etc).

An example of clicking an SVG object:

WebElement svgObject = driver.findElement(By.xpath(YOUR XPATH));
Actions builder = new Actions(driver);
builder.click(svgObject).build().perform();

Note: you need to call the path inside the click() function; using:

moveToElement(YOUR XPATH).click().build().perform();

doesn't work.

java Selenium WebDriver: clicking on elements within an SVG using , Using webdriver, I can click on the main svg object, but not any of the elements within it. The problem only seems to be with clicking (or any  Using webdriver, I can click on the main SVG object, but not any of the elements within it. The problem only seems to be with clicking (or any mouse interaction), as I can use getAttribute() to return the value(s) of width, ID, x/y, text, etc, for anything under it.

Try this workaround :

WebElement mapObject = driver.findElement(By.xpath("//*[name()='svg']/*[name()='rect']"));
((JavascriptExecutor) driver).executeScript("arguments[0].click();", mapObject);

Whenever I have too many problems with some elements while trying to click them, I use this workaround.

Handle SVG elements using selenium webdriver, java Selenium WebDriver: clicking on elements within an SVG using XPath? WebElement mapObject = driver. findElement(By. xpath("//*[name()='svg']/*[name()='rect']")); ((JavascriptExecutor) driver). Selenium WebDriver: clicking on elements within an SVG using XPath. asked Jul 11, 2019 in Devops and Agile by Han Zhyang (25k points) java; firefox; xpath; selenium

We were able to avoid the odd xpath select by doing these two things

WebElement mapObject = (WebElement) driver.executeScript('return document.querySelector(arguments[0])', "svg rect")

((JavascriptExecutor) driver).executeScript("arguments[0].dispatchEvent(new MouseEvent('click', {view: window, bubbles:true, cancelable: true}))", mapObject);

This worked on osx and phantomjs but I think it should be ok in any modern browser.

(We used the js driver so feel free to fix any compile errors)

Interacting with svg-objects in Selenium Java, is it possible to select SVG element using selenium and click on it /selenium-​webdriver-clicking-on-elements-within-an-svg-using-xpath. Now follow all the important steps to find element by XPath in Chrome Browser. 1. Open URL in the Chrome browser. 2. Right-click on the element on which you are trying to find element by XPath and then go to option “inspect”. 3. Now, the Elements panel will be opened right-hand side on the screen. It will show in blue color. 4.

Here you go:

driver.findElement(By.cssSelector("#canvas > svg > rect")).getAttribute("x") 
driver.findElement(By.cssSelector("#canvas > svg > rect")).getAttribute("y") 

This way you can do it.

Automating SVG elements with selenium - Sajitha Pathirana, Create a test using Selenium (Java) that interacts with SVG-object embedded to the Also before each of tests is executed we need to re-create webdriver object in of the model using the xPath //*[name()='circle' and contains(@id, '-light')] . html elements namespace) we cannot just use the construction like //circle . Selenium WebDriver: clicking on elements within an SVG using XPath (4) I have an SVG object with a few circle and rectangle elements. Using webdriver, I can click on the main svg object, but not any of the elements within it.

I have different high charts in my project and my aim was to double click on a section of a chart to drill down for further information and I've managed to do it using following lines of code. XPath didn't work for me but CssSelector worked just fine.

var elementToClick= Browser.Driver.FindElementEx(By.CssSelector("#highcharts-0 > svg > g.highcharts-series-group > g.highcharts-series.highcharts-tracker > path:nth-child(1)"), 10);
Actions action = new Actions(Browser.Driver);
action.Click(elementToClick).Build().Perform();
action.DoubleClick(elementToClick).Build().Perform();

How To Create Dynamic XPath For SVG Elements In Selenium , Usually SVG elements are not captured by the selenium IDE. Most of the scenarios that I have come across in testing SVG related elements, the data or values are read from the UI. For an example in a graph the Writing the xpath relative to the svg element A button that says 'Download on the App Store', and if clicked it. You can also click on that element by using cssSelector instead of xpath as below: driver.findElement(By.cssSelector("input:contains(^Add Dexter$)")).click(); Note: CssPath/CssSelector is faster than xpath.

Unable to access svg path tags using webdriver on Firefox and IE , How to create dynamic XPath for SVG elements in Selenium? Avinash Mishra December 28, 2019 Selenium WebDriver 1 Comment. We have discussed a lot  XPath in Selenium WebDriver is used to find an element on the web page. There are two types of XPath: 1) Absolute & 2) Relative. we will learn Xpath methods Contains(), Using OR & AND, Start-with function, Text(), XPath axes, Following, Ancestor, Child, Preceding, Following-sibling, Parent, Self, Descendant.

Element not visible when clicking on SVG element · Issue #289 , I was able to click on the svg elements that contains svg circles, but i was not able to Hello, Can any help me to access the svg elements using selenium webdriver. IDE couldn't find the child element of svg (included) from a xpath locator. There are a number of reasons one might to need to click at a specific location, rather than on an element. In my case I have an SVG bar chart with an overlay element that catches all the clicks. I want to simulate a click over one of the bars, but since the overlay is there Selenium can't click on the element itself.

org.openqa.selenium.interactions.Actions.click java code examples , Meta - ElementNotVisibleException when try click on element OS: When i use Selenium Version 2.53.1 and firefox 45, selenium click successfully. { $element = $webDriver->findElement($by); $element->click(); break 1; } catch @​AutomatedTester In test selenium starts firefox browser(Firefox 49.0.1). How can I check the checkboxes using id/xpath. Is there any method similar to select by visibletext for dropdown. Going through the examples given for all other related questions I could not find a proper solution that works in a concise way that by few line or method I can check a checkbox or radio button.

Comments
  • Maybe unrelated, but why not to use driver.findElement(By.xpath("//svg/rect")).getAttribute("x");?
  • Because in order to interact with an SVG via XPath in Selenium, you have to call the name() or local-name() methods. I don't know why, but, without that, it doesn't work.
  • The XPath check using name() is necessary because SVG DOM nodes are in a different namespace.
  • Also, I could get this to work in FF17.0.1, but I did need to use Actions, a straight WebElement.click() failed.
  • You don't need xpath necessarily, at least for the JS driver. It works with any element, even if you find them by CSS or Id or however.
  • I get 'Element is not clickable at point (231.1666717529297, 312.04998779296875). Other element would receive the click:' exception when I try to click on a circle in my svg. Any idea bout this?
  • I'd need a little more context to understand why that doesn't work. Code, environment, etc.
  • So, there's progress here. First, using JavascriptExecutor no longer throws the error I was getting in WebDriver when interacting with an SVG object. However, when I run the test, it says it clicks/hovers/etc successfully, but I don't see the interaction happen on screen. In theory, if the test successfully clicks on a rect or circle, I should see a menu pop up for the element being clicked.. but that doesn't happen, even though WebDriver says it did so. Also worth mentioning, "arguments[0].click();" didn't work for me, but .click and .click; does. P.S. Thanks for the reply.
  • @jgode did you find a solution? I have the same problem where it executes without an error but I don't see the webpage navigate to the new page.
  • @FebianShah, yes.. see my above post where I describe how I got it working in Firefox: stackoverflow.com/a/14761832/2023074 Also, it's worth noting that in IE it's possible to target SVG elements by their RaphaelID, which makes it easier. Although in my case, because I have to test SVG pages in multiple browsers, I ended up using coordinates, which I hate for automation, but it was the most stable way.
  • This dispatchEvent with the specified parameters is the only solution that worked for me on a deeply nested SVG <text> element.
  • simple and effective on ChromeDriver, in Ubuntu... thanks a lot! :)
  • There is no context to this answer and, even if it answers the original question, it leaves only a new question of why this then works. Can you give some reasoning of what the answer is telling us and why it works?