Having trouble interacting with an SVG path element in Selenium WebDriver

Currently, I am working on the automation of chart data and here is how the data is displayed.

<g style="cursor:pointer;" clip-path="url(#highcharts-2)" transform="translate(62,10) scale(1 1)" class="highcharts-markers highcharts-series-0 highcharts-tracker">
<path d="M 811 367.23566666666665 L 816 372.23566666666665 811 377.23566666666665 806 372.23566666666665 Z" fill="#18abc9"></path>
<path d="M 731 400.91344444444445 L 736 405.91344444444445 731 410.91344444444445 726 405.91344444444445 Z" fill="#18abc9"></path>
<path d="M 651 386.432 L 656 391.432 651 396.432 646 391.432 Z" fill="#18abc9"></path>
<path d="M 570 390.61766666666665 L 575 395.61766666666665 570 400.61766666666665 565 395.61766666666665 Z" fill="#18abc9"></path>
<path d="M 490 381.09166666666664 L 495 386.09166666666664 490 391.09166666666664 485 386.09166666666664 Z" fill="#18abc9">
</path><path d="M 410 334.905 L 415 339.905 410 344.905 405 339.905 Z" fill="#18abc9"></path></g>

I have written Selenium code for clicking on the first path element shown above.

List<WebElement> a = driver.findElements(By.xpath("(//*[name()='svg']//*[name()='path' and contains(@fill, '#090')])[1]"));
Actions actionBuilder = new Actions(driver);
actionBuilder.click(a.get(0)).build().perform();

The list a only contains one web element. However, an error occurs when attempting to click it.

org.openqa.selenium.WebDriverException: Element is not clickable at point (904, 556.86669921875). Other element would receive the click: 

<path d="M 801 341.00352 L 806 346.00352 801 351.00352 796 346.00352 Z" fill="#090"></path>

The mentioned path in the error message does not match exactly with the provided DOM structure.

javascriptseleniumxpathselenium-webdriverui-automation

Answer №1

The issue arises from an overlapping path element interfering with the intended click. It seems that Selenium is attempting to click the middle of a uniquely shaped path, inadvertently hitting the other path instead. To address this, you may want to experiment with using moveToElement() within Actions and adjusting the offsets until achieving the desired outcome.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modifying JavaScript object values using the Object() constructor

My background is in Groovy, which has similar syntax to JavaScript. In Groovy, I can easily copy values from one map to another like this: def myMap1 = {}; def myMap2 = {}; myMap1["key1"] = "value1"; myMap1["key2"] = "value2"; myMap1["key3"] = "value3"; ...

javascriptarraysecmascript-6javascript-objects

Guide on switching the AppiumDriver focus to a dropdown menu that is displayed on a separate layer in iOS

While utilizing Appium, I have encountered an issue specific to iOS, not Android. The React Native app includes dropdown sections that reveal options when tapped, obscuring the rest of the app with a shadow effect. This functionality can be illustrated by ...

iosiphoneseleniumappium

What is the process for recording information using a static method in TypeScript within a class?

For my school project, I'm struggling to retrieve the names from a class using a method. One class creates monsters and another extends it. abstract class genMonster { constructor( public id: string, public name: string, public weaknesse ...

javascripttypescriptconstructorabstract-classstatic-methods

Returning code in PHP Unit console

I'm looking to customize PHPUnit's console output to display specific messages depending on success or error. Here is the current setup I have: require_once 'PHPUnit/Extensions/SeleniumTestCase.php'; class Example extends PHPUnit_Exten ...

seleniumphpunitconsole-application

AngularJS remove a row from a table disrupts the formatting

Hello! I am attempting to delete rows from a table in Angular. I want the first two rows to have a red background and the rest to have a white background. If I try to delete the last row, it gets deleted but the color remains for the first row only (it sh ...

javascriptjqueryangularjshtmlcss

To address a Selenium problem, let's specify a date for troubleshooting

Instead of using the YUI date picker, I am looking for a way to enter the date by sending keys such as 050576 or 05/05/76. getDriver().findElement(By.xpath(birthDatePath)).sendKeys(efdob); When using Chrome, I discovered that pasting as plain text with ...

seleniumjunit

When trying to extend classes, an error is thrown indicating that the property 'prototype' is undefined

Encountering an issue with extending items, resulting in: Uncaught TypeError: Cannot read property 'prototype' of undefined After researching, it seems that items must be defined in a specific order. I have organized them accordingly but stil ...

javascripttypescript

Implementing the automation of pressing the right arrow key in JAVA with Selenium

I am having trouble extracting data from various pages and am curious about how to navigate by pressing the right arrow key on the keyboard. For instance, when I visit this page (), pressing the right arrow key should display the next bet. However, using ...

javaselenium-webdriversendkeys

Updating scope within an iteration in AngularJS

I am currently facing an issue with updating subquestions for each question in the code below. Despite my efforts, the subquestions do not update properly and I end up with the same subquestion list for all questions. How can I display each question along ...

javascriptangularjsangularjs-scopeangularjs-digest

Are there any effective methods for assigning data to a MapObject?

Is there a way to refactor and organize an array using the "reduce" method instead of "forEach" or "map"? Using beeProps.valueInfos.reduce(reduce()) would be very helpful. [Date, Object] ---> [Number, Object] --- I want to group objects with the same " ...

javascriptreactjstypescriptalgorithm

Retrieve the file name of the webpage from the URL bar

Is there a way to retrieve the page name from the address bar using jquery or javascript instead of PHP? I am working on an HTML website and would prefer not to use PHP for this specific task. For example, if the address is www.mywebsite.com/hello.htm, ho ...

javascriptjqueryhtml

Retrieve the direction of panning when the panning stops with hammer.js and limit the possible

I have integrated the hammer.js library along with its jQuery plugin. I followed the documentation and used the following code to initialize it on .game-card-mobile divs: /* Creating a Hammer object for swipeable game cards */ var $gameCard = $('.gam ...

javascriptjqueryhammer.js

What are the consequences of incorporating JavaScript in PHP code for changing locations?

There is a recurring question on Stack Overflow about redirecting users in PHP after input or values have been changed, and the common suggestion is to use headers for this task. However, it's important to note that headers in PHP need to be modified ...

javascriptphphttp-redirect

Using the DRY principle in JavaScript to handle dynamic fields

Recently delving into Javascript, I encountered a dynamic field script that allows for adding and subtracting fields with the click of a button. The functionality is effective and serves its purpose well. $(document).ready(function() { var max_fields ...

javascriptjqueryhtml

Persistent hover state remains on buttons following a click event

In my current project, I am dealing with a form that has two distinct states: editing and visible. When the user clicks on an icon to edit the form, two buttons appear at the bottom - one for saving changes and one for canceling. Upon clicking either of th ...

javascriptangularjscsstwitter-bootstrap-3hover

How can one store web elements with varying attributes in a single variable?

Increase code efficiency by simplifying it and potentially improving speed. With Selenium, I aim to execute identical actions on web elements in a class where clicking on an element changes its class dynamically to indicate it as the "active" element. I ...

pythonseleniumselenium-chromedriver

Supporting multiple types for matching object structures is a feature in Jest

I'm currently working on a test using jest to verify if an object key is either a string or a number. It seems like a basic task, but surprisingly there isn't much guidance in the documentation. Test Example: test('Checking asset structure ...

javascriptjestjs

Preserve the data from various select boxes using their respective ids

I am facing an issue with handling select boxes within an ng-repeat loop in my AngularJS application. Each object has one or more select boxes, and the user needs to select 3 priorities from these boxes and save them by clicking a button. In the save funct ...

javascriptangularjs

Transforming a DataUrl containing an image into an actual image

I am working on a Java web application where I need to capture pictures using the webcam. To achieve this, I have implemented Photobooth.js, which allows me to take images in web applications. My current challenge is that after capturing an image by click ...

javajavascriptjqueryajax

Issue with React.js button functionality not functioning as expected

import React, { Component } from 'react'; import './App.css'; class App extends Component { constructor(props) { super(props); this.state = { items: [] } } addItem(e) { var itemArray = this.state.items; ...

javascriptreactjs