Is there a solution for moving SVG elements in Chrome with Selenium?

Information:

"chromedriver": "^87.0.7",
"geckodriver": "^1.22.1",
"html-dnd": "^1.2.1",
"nightwatch": "^1.5.1",

Expectation

Utilize the Nightwatch framework in JavaScript to perform a drag and drop action on an SVG element with another SVG element.

Reality

The test is marked as passed but the actual movement between elements did not take place.

Scenario I attempted the following approach:

browser.moveToElement(locator, dragElement, 1, 1);
browser.mouseButtonDown(0);
browser.moveToElement(locator, dropElement, 1, 1);
browser.mouseButtonUp(0);

During testing, I noticed that manually moving the mouse while the test was running enabled successful drag and drop functionality for SVG elements.

Despite trying out html-dnd, there was no change in outcome.

const dragAndDrop = require('html-dnd').codeForSelectors;

"Drag and Drop": function (browser) {
        browser.url(myurl);
        browser.useXpath();
        browser.execute(dragAndDrop, [svgDragElement, svgDropElement]);
        browser.end();
    }
javascriptseleniumselenium-webdriversvgnightwatch.js

Answer №1

Update:
If you're encountering issues with the code snippet below, try adjusting the X and Y axis values in the second moveToElement() function.

After numerous attempts and guidance from my colleagues in Automation engineering, I finally managed to crack the problem.

browser.moveToElement(locator, dragElement, 1, 1);
browser.mouseButtonDown(0);
browser.moveToElement(locator, dragElement, 1, 1);    // make sure to return to your starting point
browser.moveToElement(locator, dropElement, 1, 1);    // element after dragging
browser.mouseButtonUp(0);

I can't quite explain why this odd behavior occurs, but my theory is that it helps the method focus on the necessary element for proper functionality.

IMPORTANT
In certain scenarios, adding a browser.pause() between moveToElement() calls may be required.

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

A guide on sending arguments to a react function component from a JSX component via onClick event handling

Below is a brief excerpt from my extensive code: import React from "react"; const Home = () => { return ( imgFilter.map((imgs) => { return ( < Col sm = "3" xs = "12" key ...

javascriptreactjsjsx

The Ajax readyState consistently displaying a value of 0

I am encountering an issue with my Ajax code as it always returns 0 when I access 'readyState'. I have not been able to identify the source of the problem yet. Any assistance on this matter would be greatly appreciated: var xhr = null; function ...

javascriptajax

Exploring Angular 8 HTTP Observables within the ngOnInit Lifecycle Hook

Currently, I am still a beginner in Angular and learning Angular 8. I am in the process of creating a simple API communication service to retrieve the necessary data for display. Within my main component, there is a sub-component that also needs to fetch ...

javascriptangulartypescriptrxjs

Utilizing the Bootstrap portfolio section, I aim to eliminate the 'ALL' tab and ensure a category is selected

Currently, I am utilizing this template If you scroll down to the WORK section, you will find the portfolio section which is filterable. The default selected option is "ALL," displaying all items. However, I would like to remove this and activate a diffe ...

javascripthtmltwitter-bootstrap

Guide to importing scoped styles into a <NextJS> component

When importing a CSS file, I usually do it like this: import './Login.module.css'; In my component located at components/login/index.js, I define elements with classes such as <div className="authentication-wrapper authentication-basic ...

javascriptcssnext.js

What steps are needed to enable autocomplete for input fields in React Native Elements on iOS?

I'm currently working on fine-tuning the autocomplete suggestions for my registration form. Within the react native elements input, I've already implemented fields for username, email, and password. Specifically for the email field, I have config ...

javascripttypescriptreact-nativereact-native-elements

The v-data-table is unable to fetch the user list information from the API using Axios

How can I solve the issue of displaying "No data available" in the user list data table on my userDirectory page? I have created a userDirectory page with a subheader and a data table from Vuetify, but it seems to have no data available. <template> ...

javascriptvue.jsaxiosvuetify.jsbackend

Validate AJAX form with additional string input

While I have successfully passed a custom variable and value through ajax during field validation on blur, I am struggling to find a way to include this information when the form is submitted. Currently, in the on blur validation of jquery.validationEngin ...

phpjavascriptjqueryajax

Chart.js is failing to display the chart when integrated with RequireJS

I have been attempting to display a chart using Chartjs and Requirejs, but unfortunately, it is not rendering properly and no error messages are being displayed. I am aware that I may be overlooking something simple due to fatigue, but I am unable to pinpo ...

javascriptrequirejschart.js

Is there a tool available that can convert the string "foo:blah" into JSON format?

My goal is to transform a human-readable list like the following: Enabled: Yes Server: example.com Port: 8080 Authenticated Proxy Enabled: 1 ... into a sanitized JSON object as shown below: { "Enabled": "Yes", "Server": "example.com", "Port" ...

javascriptjsonnode.jsparsingstring-parsing

Troubleshooting a simple test issue with React AXIOS post in an Express environment

I have successfully created a React front end and used a basic boilerplate to connect it with Express. However, I am now faced with the challenge of setting up a simple RESTful API, and the myriad of options available is overwhelming. My goal is to establi ...

javascriptjsonreactjsexpressaxios

Transferring information from a client-side JavaScript to a Node.js Express server and receiving back

I'm currently working on implementing an upvote and downvote system in nodejs. The functionality for upvoting and downvoting will be handled by client-side JavaScript, which will then send the data to the server for storage. I'm curious to know ...

javascriptnode.jsexpresshttpserver

What is the best way to retrieve the Selenium Element from a Capybara Element?

I have more experience working with Java and Selenium compared to Ruby, Capybara, and SitePrism. So please excuse me if this question comes across as simple. In Selenium, there is a helpful class called Selenium::WebDriver::Support::Select for managing Se ...

rubyseleniumwebdrivercapybarasite-prism

The webdriver.Chrome driver launches the browser automatically as soon as the code is run by the

Looking for assistance with my GUI application setup that involves opening the browser only after a user-triggered event. The global setting driver = webdriver.Chrome() is crucial across multiple classes. Here's the code snippet at the start of the ap ...

pythonselenium-webdriverwebdriver

The pagination component in React with Material-ui functions properly on a local environment, but encounters issues when deployed

Looking for some assistance with a persistent issue I've run into. Can anyone lend a hand? [x] The problem persists in the latest release. [x] After checking the repository's issues, I'm confident this is not a duplicate. Current Behavior ...

javascriptreactjspaginationmaterial-uinext.js

Troubleshooting: Resolving the Issue of Undefined Property Reading Error

I am currently working on a code snippet to render filtered data: const tasks = [{ task: "Complete homework", description: "Math and Science assignments." }, { task: "Walk the dog", description: "Take him for a stroll in the park." }, { ...

javascript

Implementing mandatory object keys in TypeScript

Suppose you have these type definitions: type Panel = 'store' | 'logs' You aim to construct an object containing key => ReactChild pairs, where the keys are restricted to the values in Panel. const components = { store: StoreC ...

javascripttypescript

What are some effective ways to utilize Selenium's @FindBy dynamically?

I will be executing selenium with cucumber on this particular page. Here is the scenario and details in cucumber: @tag Feature: Checking checkboxes Webdriver should successfully check off items on checkbox lists @tag1 Scenario: Check the checkbox ...

javaseleniumwebdrivercucumber

Update to react version 18.2.0, router-dom v6, and mui 5 for improved performance

Struggling to convert the following file or code into React's latest version and react-router-dom v6. I attempted it myself but encountered errors related to createBrowserHistory that I couldn't comprehend. My routes are stored in a JSON file and ...

javascriptreactjsmaterial-uireact-routerreact-router-dom

Can you provide guidelines on employing Assert alongside Selenium WebDriver to verify a successful login?

I have recently started exploring selenium and I'm feeling a bit uncertain about what approach to take in this situation. As far as my understanding goes, would the following code be correct: Assert.assertTrue("user should be logged in", driver.equa ...

javaseleniumselenium-webdriver