Unable to move an element with Webdriver in Java Script

Trying to Drag an Element with the Following Code -

"WebElement baseElement = driver.findElement(By.xpath("Element ID");

Actions clicker = new Actions(driver);

clicker.moveToElement(baseElement).moveByOffset(20,0).click().perform();

Encountering an Issue where the Element is not Dragged to the Intended Offset Position

Instead, it Drags to the Maximum Possible End Regardless of the Offset Value.

Even though Dragging Successfully, the Element Snaps Back to its Original Position After a Second.

In Manual Testing, Able to Drag the Element as Desired Within Limits without Snapback.

This is Specifically for Dragging an Element on a Bar, Not Drag and Drop Functionality.

Attempted Various Alternative Drag Methods But None Resolved the Issue.

If anyone has Experienced this Issue Before, Please Share Your Solution.

Tested with Selenium Versions 2.27 to 2.40 on Firefox Versions 17ESR, 20, and 24ESR with Repetitive Problems.

javascriptwebselenium-webdriver

Answer №1

Here are a few options for performing drag and drop:

Option 1:

WebElement sourceElement = driver.findElement(By.xpath("//*[@id='draggable']"));
WebElement targetElement = driver.findElement(By.xpath("//*[@id='droppable']"));   
Actions action = new Actions(driver); 
action.dragAndDrop(sourceElement, targetElement).perform();

Option 2:

Actions builder = new Actions(driver);       
Action dragAndDrop = builder.clickAndHold(someElement) 
       .moveToElement(targetElement) 
       .release() 
       .build(); 
dragAndDrop.perform();

Option 3: Another option is to use the following function in the Actions class.

dragAndDropBy(WebElement source, int xOffset, int yOffset)

This method clicks and holds the source element, moves it by the specified offset, and then releases the mouse.

I hope one of these options helps you accomplish your task. If not, please feel free to reach out for further assistance.

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

Adjusting a data point as v-model is updated

I'm working on a text input that is using the v-model to bind its value to data. I also need to trigger my parse() function whenever the value of this v-model changes, so that I can update an array within the data object. <div id="app"> < ...

javascriptvue.js

Guidelines for validating email input using jQuery

Although I am not utilizing the form tag, you can still achieve form functionality using jQuery Ajax. <input type="email" placeholder="Email" name="email" /> <input type="password" placeholder="Password ...

javascripthtmljquery

What steps do I need to take to create a sitemap that includes dynamic routes?

Seeking advice on how to direct search engines to index my dynamic routes. One example is /post/:id, with :id representing the post's ID. Any tips on how to include this in a sitemap? ...

javascripthtmlreactjsxmlsitemap

Adding data from PHP into a designated div element

update: After some trial and error, I managed to find a solution using jQuery and append() methods. From my PHP code, I created an array containing all the necessary information that I wanted to insert into the tab divs. I then encoded this array into JSON ...

phpjavascriptjquerymysqlhtml

The preflight response does not allow the access-control-request-methods request header field due to restrictions set in the access-control-allow-

I'm facing CORS issues while trying to make a POST request from my website to a remote server. Despite searching online, I couldn't find a solution that fits my specific problem. Below are the parameters for my ajax request: var params = { ...

javascriptjquerypythonajaxcross-domain

Tutorial on React JS and Python Django: Understanding the concept of an infinite loop in componentDidUpdate

I'm currently going through an online video tutorial that teaches how to create a CRUD full-stack app using React, Django, and SQLite. However, I've encountered an issue with fetching table data causing an infinite loop. It appears that the probl ...

javascriptreactjsdjangosqlite

Modifying the width of a jQuery UI dialog from within the dialog box itself

I have designed an ASP.Net web page with a div and iFrame to display another page within it. Now, I am wondering if there is a way to change the width of the dialog from a button inside the dialog itself... Is this achievable? Thank you. ...

javascriptjqueryasp.netjquery-uijquery-dialog

Struggling to make Vue.js transition effects function properly?

I'm having trouble getting a vue.js (version 1) transition to work. I copied the code from their official website, but it's not running the javascript console.logs! Vue.transition('fade', { css: false, enter: function ( ...

javascriptvue.jsvue-component

What can be done to fix the error caused by an unexpected token?

Below are my babelrc settings: { "presets": ["es2015", "react"] } However, when I use ...reducers, I encounter an unexpected token error. Do you have any suggestions on how to resolve this issue? I suspect it may be related to the reducer setting. Adding ...

javascriptreactjs

Is there a way to continuously submit a form in React every 10 seconds, even if it includes events?

I have a form with input fields where I collect data upon form submission. However, I want the form to submit automatically every 10 seconds without the need to click a button or press enter. I tried using useEffect to create an interval, but it resulted i ...

javascriptreactjsbabeljsuse-effect

Cached images do not trigger the OnLoad event

Is there a way to monitor the load event of my images? Here's my current approach. export const Picture: FC<PictureProps> = ({ src, imgCls, picCls, lazy, alt: initialAlt, onLoad, onClick, style }) => { const alt = useMemo(() => initial ...

javascriptreactjstypescripteventsnext.js

Getting the Request Body Content in Express Middleware

Currently, I am in the process of developing a small API logger to use as an Express middleware. This logger is designed to gather data from both the request and response objects, then store this information in a JSON file on disk for later reference. Her ...

javascriptnode.jsexpressmiddleware

Using Javascript to merge the components of a multidimensional array

I'm currently working on a project that involves combining elements from a multidimensional array to create different combinations. For example, if I have the following array: var array = [ ['a'], ['1', '2', ...

javascriptarraysmultidimensional-array

Issue with a input element having relative positioning within a flexbox

Objective: Aim to align the middle DIV (MIDDLE) within a flexbox row in the center. Issue: The right element includes an input element with relative positioning. Consequently, the middle DIV element (MIDDLE) is no longer centered but instead shifted to th ...

javascripthtmlcss

JavaScript: Transforming a key-value pair collection into an array of objects

I'm looking to convert a dictionary into a list of dictionaries using JavaScript. Can someone help me with that? var dict = { "apple" : 10, "banana" : 20, "orange" : 30 } var data = [ {"apple" : 10}, {"ban ...

javascriptjsonreactjsdictionary

Tips for storing a JSON file with GridFS

In my possession is an extensive dataset. Utilizing mongoose schemas, each data element has a structure resembling the following: { field1: “>HWI-ST700660_96:2:1101:1455:2154#5@0/1”: field2: “GAA…..GAATG” } Reference: Re ...

javascriptjsonmongodbmongoose

Obtain information from express middleware

I am currently working on a project using node.js. As part of my application, I have developed a middleware function that is triggered whenever a GET request is made. This occurs when someone visits the home page, profile page, or any other page within my ...

javascriptnode.jsexpressmiddleware

Creating an interactive graph in Asp.Net MVC using Razor syntax and jQuery AJAX

Currently, I am working on binding data to a graph using Razor. I am fetching the data through a jQuery ajax call and then planning to bind the resulting data to the graph. Is there a way to incorporate Razor code within the jQuery success function? Also, ...

javascriptjqueryasp.netasp.net-mvcrazor

Is there a method to avoid encountering captcha while using selenium in Python (switching user agents proves to be ineffective)?

Why is it that when I access a specific website from my primary browser, I don't encounter any captcha challenges, but when I use Selenium, I am faced with ReCaptcha? Is there a method to trick the website into believing that Selenium is my primary b ...

pythonseleniumselenium-webdriverselenium-chromedriver

The web browser's engine is blocking the connection to the secure websocket server

Summary of Issue An error message stating "Websocket connection failed." appears in the browser console (Chrome or Brave) when trying to run this code: const ws = new WebSocket("wss://abcd.ngrok-free.app/") (Please note that the URL mentioned is not real ...

javascriptreactjswebsocketngrok