Using Selenium to Perform Drag and Drop Operations on an SVG Object

I am attempting to drag a specific Webelement and drop it inside an SVG "container" that contains four elements, which are represented by polygons. Each polygon is labeled as g[1], g[2], and so on.

Here is the HTML code of the container:

<div class="leaflet-overlay-pane"><img class="leaflet-image-layer leaflet- 
zoom-animated" src="/ik-conf/layout/Planos1544448485901.png" style="opacity: 
1; transform: translate3d(509px, 280px, 0px); width: 524px; height: 348px;">
<svg class="leaflet-zoom-animated" width="1472" height="855" viewBox="35 26 
1472 855" style="transform: translate3d(35px, 26px, 0px);">
<g><path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" 
stroke="#FF9900" stroke-opacity="0.5" stroke-width="5" fill="#FF9900" fill- 
opacity="0.2" class="leaflet-clickable" d="M714 300L709 586L529 591L533 
300z"></path></g>
<g><path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" 
stroke="#FF9900" stroke-opacity="0.5" stroke-width="5" fill="#FF9900" fill- 
opacity="0.2" class="leaflet-clickable" d="M1011 305L1009 585L802 589L797 
302z"></path></g>
<g><path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" 
stroke="#00FFD5" stroke-opacity="0.5" stroke-width="5" fill="#00FFD5" fill- 
opacity="0.2" class="leaflet-clickable" d="M690 444L688 554L544 552L544 
433z"></path></g>
<g><path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" 
stroke="#FFFFFF" stroke-opacity="0.5" stroke-width="5" fill="#FFFFFF" fill- 
opacity="0.2" class="leaflet-clickable" d="M989 321L987 444L816 435L816 
320z"></path></g>
</svg><div class="leaflet-draw-guides"></div></div>

Each of these polygons (G's) can be located by XPATH and/or CSS, however, I am encountering NoSuchElementException every time.

This is the code snippet I am executing:

public void dragAndDropPlanos(String nombre, WebElement poligono) {
    wait.until(ExpectedConditions.numberOfElementsToBe(By.xpath("//*[contains(text(),'" + nombre + "')]"), 1));
    WebElement element = driver.findElement(By.xpath("//*[contains(text(),'" + nombre + "')]"));
    js.executeScript("arguments[0].scrollIntoView(true);", element);
    try {
        Thread.sleep(1000);
    } catch (InterruptedException e) {
    }
    WebElement element1 = driver.findElement(By.xpath("//*[contains(text(),'" + nombre + "')]"));
    wait.until(ExpectedConditions.visibilityOf(element1));
//        WebElement target = poligono; 
    wait.until(ExpectedConditions.visibilityOf(poligono));
    try {
        Thread.sleep(2000);
    } catch (InterruptedException e) {
    }
    WebElement element3 = driver.findElement(By.xpath("//*[contains(text(),'" + nombre + "')]"));
    (new Actions(driver)).dragAndDrop(element3, poligono).perform();
    try {
        Thread.sleep(2000);
    } catch (InterruptedException e) {
    }
}

In the above code, I pass a string name as an argument, concatenate it with XPATH to locate the element for dragging, and also pass a webelement representing the polygon where I intend to drop the element. It seems like the SVG may exist in a different iframe, but after switching through iframes, I realized it is only within a div and accessible via xpath.

If anyone could shed some light on this issue, it would be greatly appreciated.
Thank you in advance!

javascriptseleniumselenium-webdrivercucumber

Answer №1

It is possible that you have encountered incorrect WebElements due to overly broad conditions and potentially suspicious text.

  //*[contains(text(),'" + nombre + "')]

Firstly, if you are searching for visible text, this locator may not return anything as there is no text within the SVG. Secondly, consider narrowing down your search by using tag names before resorting to searching for any element with text.

   List<WebElement> elements = driver.findElements(By.tagName("g"));

In addition, even if the g element is found, some drivers (such as PhantomJS) may encounter difficulties manipulating it, requiring you to access internal elements like (path).

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

Include the URL as a parameter in the query when utilizing Tesseract OCR

I have successfully implemented the tesseract ocr, but I am wondering if it is possible to run tesseract with a URL as a parameter. I want to achieve the following: localhost/test.html/?othersite.com/image/image2.jpg Here are some image URLs for demonst ...

javascriptphpjqueryajax

Troubleshooting a problem with jQuery: alter background color when checkbox is

I recently created a script to change the background color when a radio button is selected. While it works for checkboxes, I noticed that when another radio button is selected, the previous one still remains with the selected color. <script type="text/ ...

javascriptjqueryhtml

Can we modify a currently active document within MongoDB?

Is there a more efficient way to achieve the same functionality in JavaScript? I have to find a user, validate their password, and then update their document. Can I optimize this process by reusing the already retrieved document (stored in var doc) for up ...

javascriptmongodb

Display error page when unable to load ng-view template

Is there a way to display a standard error page or template if a certain template cannot be loaded using ngRoute in Angular? I've come across suggestions that subscribing to the $routeChangeError event might help, but I'm not sure what steps to ...

javascriptangularjsngroute

Javascript Calculator with Dual Input Fields

I have been given a task to create a calculator by tomorrow using Javascript. Unfortunately, I am currently taking a distance course and Javascript has just been introduced in this assignment. While I am familiar with HTML and CSS, Javascript is something ...

javascripthtmlcss

Retrieve a file from a remote server without storing it locally on the server

I need to download a zip file from another server without saving it locally. Currently, I am sending a POST request to the server which responds with the zip file, then I save it on my local server and send it using res.download. What I would like is to di ...

javascriptnode.jsaxiosmicroservicesmulter

Whenever I adjust the layout of the navigation bar, the edges end up getting clipped

I'm having trouble with the border shape of my navbar. When I try to make it a rounded pill shape, the edges get cut off instead of being properly displayed. https://i.stack.imgur.com/sUN2Y.png Below is the HTML template: <template> <div cl ...

javascriptcssvue.jsbootstrap-4bootstrap-5

Creating a paragraph from text inputs using React

I'm currently working on code that retrieves input from two textboxes - one for a string value and one for a number value. I want this data to be displayed in real-time within a paragraph without the need for a submit button. I've been struggling ...

javascriptreactjsreact-native

FullCalendar displaying inaccurate dates and times

In my ASP.NET MVC application, a full calendar element is displayed as shown below: Here is the JSON data returned by the server through an ajax call for the month of January 2016: [{"id":17,"title":"39/2015 - Site meeting test 3","start":"\/Date(14 ...

javascriptjqueryjsonasp.net-mvcfullcalendar

Pedaling back and forth along a sequence

Is there a way to implement forward and backward buttons for a clickable list without using arrays, as the list will be expanding over time? I have already achieved changing color of the listed items to red, but need a solution to navigate through the list ...

javascriptjqueryhtmlcss

Tips for successfully passing a ViewBag in ng-click

<th><a href="javascript:;" ng-click="order(@ViewBag.desc)">Name</a></th> I am currently implementing this code and trying to fetch data from the view bag into my Angular Controller. However, I seem to be facing some challenges in a ...

javascriptc#angularjsasp.net-mvcrazor

Auth0 encountering issues retrieving ID token and user metadata

Currently in the process of integrating Auth0 into a Vue.js/Node.js application, I have successfully enabled user registration and login functionality (to /callback). Although the manual addition of data to the user metadata section is functional at this s ...

javascriptvue.jsauth0

ChromeDriver for Selenium is unable to access URL with default user data

Upon opening in a new window with the default start menu, a notification pops up indicating that Chrome is being controlled by automated test software. However, instead of redirecting to the specified URL, it fails to do so. System.setProperty("webdri ...

javagoogle-chromeseleniumselenium-webdriverselenium-chromedriver

What steps should I take to eliminate this issue in my Protractor tests: Error occurred while waiting for Protractor to synchronize with the page?

My Angular application is connected to AudioEye, Twitter, and a few other third-party apps. We employ lazy loading to bring in our components, so there is no rootElement app in our app. Our login page is actually a separate Angular application. However, wh ...

angularjstestingcucumberprotractore2e-testing

How can I use JavaScript fetch to retrieve data from a JSON file based on a specific value?

I am looking to extract specific values from a JSON array based on the ID of elements in HTML. How can I achieve this? [ { "product": "gill", "link": "x.com", "thumbnail": "gill.jpg ...

javascriptjsonfetch-api

Using Selenium and Cucumber, I aim to include the scenario name in the file path when capturing a screenshot

\initialization\DriverUtils.java: Within this file, I have created a takeScreenshot() function. \steps\Hooks.java In this file, there is an @After method where I check if the scenario.isFailed (io.cucumber.java.Scenario). The featur ...

javaselenium-webdrivercucumbercucumber-jvm

Employ CSS flexbox and/or JavaScript for creating a customizable webpage

I am in the process of developing a basic IDE for an educational programming language that has similarities to Karel the Dog. One major issue I am encountering is creating the foundation HTML page. The IDE consists of 4 main areas: Toolbox (contains but ...

javascripthtmlcssflexboxcodemirror

Find the name of the region in the user's query

I've implemented the weather-js npm module (weather-js) to retrieve weather information for a specific region. While everything is functioning correctly, I'm looking to customize it based on user input. The module currently only accepts region ...

javascriptnode.jsnlp

The function is not valid due to an angular-parse argument

This is my first experience with using angular and parse.com. I encountered the following error: Error: Argument 'eventList' is not a function, got undefined when attempting to execute the following angular code: var main_app = angular.mod ...

javascriptangularjsparse-platform

Incorporating SQLSRV results into clickable <td> elements: A dynamic approach

As a newcomer to the world of JS/PHP/web development, I'm seeking help with a seemingly simple task. My goal is to make each <td> element in a table clickable, and retrieve the text contained within the clicked <td>. Currently, I have a S ...

javascriptphphtmljquerysqlsrv