Selenium successfully executes drag and drop actions, but the intended action does not occur

Selenium 3.141

Support for Chrome and Firefox browsers


Attempting to perform a drag-and-drop operation between two fields on a web application using Selenium. The drag/drop fields are highlighted, indicating the correct selection, but despite some action such as scrollbar movement, the object does not actually get dropped.

WebElement source = fromfield.findElement(By.xpath(".//*[contains(@title,'task1')]"));
WebElement tofield = driver.findElement(By.xpath("//*[contains(@data-field-name,'task2')]"));
highlight(source)
highlight(tofield) //both dragdrop fields get highlighted
Actions maction=new Actions(driver);
maction.dragAndDrop(source, tofield).build().perform();
//Tried an alternative method of drag and drop by adjusting pause duration with no success
maction.clickAndHold(source).pause(2000).moveToElement(tofield).pause(2000).release().build().perform(); 

Expected Outcome: Successful Drag-Drop operation between the fields

Actual Result: Fields highlight during the drag/drop actions, but the object is not successfully dropped.

After suggestions from Infern0, attempted the following code snippet but encountered an exception.

String js_filepath = "C:/test/drag_and_drop_helper.js";
 String java_script = null;
 String text = null;
 BufferedReader input = new BufferedReader(new FileReader(js_filepath));
 StringBuffer buffer = new StringBuffer();
 while ((text = input.readLine()) != null)
        buffer.append(text + " ");
        java_script = buffer.toString();
 jse.executeScript(java_script+"$('#{objectProperty_c77}').simulateDragDrop({ dropTarget: '#{objectProperty_c76}'});"); 

JavaScript reference: https://gist.github.com/rcorreia/2362544#file-drag_and_drop_helper-js

Exception: org.openqa.selenium.JavascriptException: SyntaxError: unexpected token: identifier

Answer №1

When it comes to drag-and-drop functionality, there is a noticeable distinction between manually performing the action and utilizing selenium automation. I encountered a similar problem where the element was visually highlighted as if it were being dragged, but no actual movement occurred. The root cause of this issue was related to the javascript events that were triggered in the background.

By utilizing native javascript events for executing the drag-and-drop operation, I was able to successfully resolve the issue. There are various implementations available online that demonstrate how this can be achieved.

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

Running multiple JavaScript servers simultaneously can be achieved by utilizing specific tools and

Currently, I am working on developing a Discord bot and have encountered some issues along the way that all required the same solution. The fix involved running separate batch files instead of running everything in my main file (index.js). I opted to use n ...

When toggling between light and dark themes using the useMediaQuery hook, the Material-ui styling is being overridden

While working with next.js and material-ui, I encountered an issue where the theme would change based on user preference. However, when switching to light mode, the JSS Styles that I had set were being overwritten. This problem only seemed to occur in ligh ...

The nodejs on localhost seems to be lost in the digital void with

Currently, I am working on a Node.js Express application to retrieve data for a web page. However, an error message stating '404 Not Found' appears when trying to open the webpage. When inspecting the browser's DevTools, the following error ...

The validation process is still failing even though the correct credentials have been entered

I'm diving into the world of Javascript and DOM today, but I've hit a roadblock. Can you take a look at this code snippet and help me figure out what's causing me to always end up in the else block, no matter what I input in the text field? ...

Concealing errors during field updates in Angular form validation

Currently, my form consists of just one field with a few validation rules: <form name="my_form" novalidate ng-controller="FormController"> <label>Your Name:</label> <input type="text" ...

The implement of the filter function in JavaScript is a powerful tool

Recently, I encountered a challenge on Codewar. Below is my solution, but what piqued my curiosity is why both return e and return arr[i-1] yield the same outcomes. var uniqueInOrder=function(iterable){ let arry = typeof iterable === "string" ? ite ...

Can the values in all fields of a JSON be combined or subtracted with those of another object containing the same fields?

I am currently working with a Mongoose.js schema that is structured as follows: { "City": String, "Year": String, "Population": Number, "Blah": Number, "Nested": { "Something": Number, "More stuff": Number } } Is there an efficient w ...

What is the best way to eliminate a trailing backslash from a string?

Currently, I am iterating through a list of Discord server names in node.js. The goal is to create a php file that contains an array structured like this: <?php $guildLookup = array( "164930842483761" => "guildName1", "56334 ...

Changing from system mode to dark mode or light mode

Within my Next.js web application, I am implementing MUI to facilitate the transition between system, light, and dark modes. Persistence between sessions is achieved by storing the selected theme in local storage. The user has the option to change the them ...

Achieve instant redirection upon user logout with Angular and Meteor

Within a Meteor application utilizing Angular, there exists a specific state that mandates the user to be logged in. Currently, this requirement is implemented using $meteor.requireUser() function run($rootScope, $state) { $rootScope.$on('$state ...

Steps to update XmlHttpRequest URL during image upload

I am currently facing an issue with updating images on my website. When I try to update an image, it redirects to the wrong URL instead of the intended one. The form is set to post data to this URL: POST http://127.0.0.1/mgt/upload/processImage/foodImage ...

Creating dynamic emails using ng-repeat data binding

I'm struggling to bind the newly added emails to $scope.emails as it does not contain the new email user added. Any suggestions on how to solve this issue? // On the server side, emails is a List and email is a string Initially, I tried binding with ...

How can I add navigation dots to my slider?

I've been experimenting with my slider and I managed to make it slide automatically. However, the issue is that there is no option to manually navigate through the slides. I am looking to add navigation dots at the bottom so users can easily switch be ...

Any suggestions on how to secure my socket connection following user authentication in redux?

After onSubmit, userAction.login is called which then dispatches "SUCCESS_AUTHENTICATE" to set the token of the user and socket state in their respective reducers. How can I proceed to trigger socket.emit("authenticate", {token})? ...

Enhance your WordPress menu with additional attributes

Currently, I am implementing a lightweight lightbox script on my WordPress website. My goal is to have one of the main navigation buttons open a Vimeo link in the lightbox. According to the lightbox documentation, I need to "Add the 'data-lity' a ...

A component with angular features will not persist

I have a menu component: <nav class="mxmls-mobile-nav"> <button class="mobile-menu-btn visible-xs visible-sm " ng-click="asideVm.open = false"> <i class="ion-android-close"></i> </button> </nav> <a class ...

Direct your attention to alternative data sources following the selection of an item in the typeahead search feature

Having some trouble with angular-ui bootstrap: I am using 2 input elements: <input type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" typeahead-on-select="focusSuccessive($item, $model, $label, $ev ...

Incorrect scope value detected in Angular controller

I recently started learning Angular 1, and I've encountered an issue with my code: var app = angular.module("Football", []); app.factory("competitions", ['$http', function($http) { return $http.get("json/competitions.json") .success(fu ...

Upon the publication of the second post, NodeJS will receive a 500

My router code is ready for use var express = require('express'); var router = express.Router(); function sendSolve(test) { // Some code for calculations } /* POST listing. */ router.post('/', function (req, res, next) { send ...

Flipping and rotating images using the power of HTML5 Canvas

Hello, I need assistance with my Electron app that arranges images for batch printing on an industrial printer. The issue I am facing is with images flipping or being mirrored unpredictably. Below is the code snippet responsible for determining whether an ...