Having trouble replicating a function that works perfectly in my browser using the latest release of Selenium

This is my initial inquiry and I am hoping to receive some assistance. After extensive research on Selenium WebDriver actions, I have been unable to find a solution.

My objective is to test whether I can successfully add a new class to the element that I drag (in this case, an image).

    const origine = await browser.findElement(By.id('strategicMap'));
    const zone2place = await browser.findElement(By.id('Cross1'));
    const unit2move = await browser.findElement(By.name("1st Patrol"));

    await browser.actions({async:true})
                    .move({origin:unit2move})
                    .press()
                    .perform();

   console.log(await browser.findElement(By.id('dialogZone')).getAttribute('innerHTML'));

   await browser.actions({async:true})
         .move({origin:origine,x:50})
         .perform();

   console.log(await browser.findElement(By.id('dialogZone')).getAttribute('innerHTML'));
   console.log(await unit2move.getAttribute('class'));

As you can see, I started by moving to the center of my image and left-clicking the mouse button.

The first console log displays x:755, y:546 (center of my image), indicating that my onmousemove event is triggering correctly and clientX and ClientY are being stored in the dialog div. The class for my image is currently set to ".unit" as the drag start event has not yet fired.

Next, when I attempt to move the image, the second console log shows X:454 and Y:332... suggesting that my mouse did move, but the class remains as just ".unit" instead of changing to "unit dragged" in the browser.

I attempted using 'unit2move' as the move origin but encountered a MoveTargetOutOfBounds Error...

Additionally, when trying to use the webElement behind 'zone2place' (which is an area) with Id 'Cross1', the mouse moves to an incorrect location (x:48 and y:64 instead of 746,472).

If anyone could offer any advice on how to accurately replicate the desired mouse actions, it would be greatly appreciated.

Answer №1

After much research, I have discovered a solution for Chrome using:

event.dataTransfer.dropEffect="move";

This has enabled me to confirm that the new class is being applied correctly to the image.

However, there are still issues with the area not functioning properly and preventing me from effectively using drag-and-drop actions.

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

Guide on importing a Blender scene into three.js with textures, lighting, and camera

I successfully exported a single object (box.json) and scene (box2.json) from Blender using io_three. Additionally, I was able to load a single object (box.json) with textures using JSONLoader() in the modelWithTexture.html file. My goal is to load an ent ...

Tips for transforming JSO into JSON data format

Here is an example: var info = [{"name":"john","age":"30"},{"name":"smith","age":"28"}] I am looking to convert the above json object to a format like this result: [{name:"john",age:30},{name:"smith",age:28}] Any suggestions on how to achieve this? ...

JavaScript is proving to be uncooperative in allowing me to modify the

Despite searching through previously asked questions, I have been unable to find a solution to my issue. I am struggling with changing an image source upon clicking the image itself. The following is a snippet of my HTML code: <img id="picture1" oncli ...

Python Scrap Data Project

I attempted to extract data using Xpath, but unfortunately, it was unsuccessful. My aim is for the code to retrieve information from specific columns on the website "https://www.destatis.de/DE/Themen/Gesellschaft-Umwelt/Bevoelkerung/Geburten/Tabellen/leben ...

Is it feasible to extract information added post page load, potentially through JavaScript, using bs4 and requests (or selenium) in Python?

I've recently started working on a Python project and I'm exploring BeautifulSoup (bs4) and Requests for the first time. As I navigate through a webpage, I notice that all the data I need is loaded dynamically through JavaScript. How can I extrac ...

AWS Cognito - ECS Task Fails to Start

I'm facing an issue with using JavaScript to execute a task in ECS Fargate. AWS suggested utilizing Cognito Identity Credentials for this task. However, when I provide the IdentityPoolId as shown below: const aws = require("aws-sdk"); aws.co ...

Transform IAlert into an Observer role

While using Selenium, I have encountered some websites with random popup messages that disrupt the testing process. I think implementing an Observer pattern using IAlert to catch and handle these alerts could be a solution. The idea is to accept the alert ...

Node.js encountered an error: Address already in use. The specified port 8080 is currently being utilized by another application

My application was not functioning properly, and upon running the command "npm start", an error was thrown: Error: listen EADDRINUSE: address already in use :8080 Even after restarting my EC2 instance and attempting the command again, I encount ...

Adding a proptype for a setState method in React components

I am currently developing a reusable component for a project. This particular component includes user and setUser as props, much like the example provided below. const UserComponent = ({ user, setUser }) => { const calcHandler = useCallback(() =& ...

Having trouble with jQuery Ajax not transmitting data properly in a CodeIgniter project?

I am brand new to the Codeigniter MVC framework. Whenever I attempt to send data through ajax from the views to the controller, I encounter an error. Please click here to view the image for more details. Here is the code snippet: views/ajax_post_view.php ...

Error: The module could not be found due to an inability to resolve the parsed request

I am working on a project that uses class components as a requirement by the company, and I cannot switch to function components. After running elint --fix and restarting the project, I encountered an error that is specific to just one file. The error me ...

Exploring the application of URL parameters in HTML code

How can I use URL parameters retrieved with Javascript in my HTML? <script> var url_string = window.location.href; //window.location.href var url = new URL(url_string); var c = url.searchParams.get("name"); console.log(c); </script> I am tryi ...

How can I display two slides at once in Ionic 2/3 on a wide screen?

I have been searching for a solution that will allow me to display 1 ion-slide if the device screen is small, but if it's larger, then I want to display 2 ion-slides. Unfortunately, I have not been able to find a suitable solution yet. As an example, ...

What is the process for configuring Nock.js to respond with the posted data?

Consider the following function: createTrip: function(trip, userId) { trip.userId = userId trip.id = uuid() return axios .post(`${url}/trips`, trip) .then(res => res.data) .catch(error => error) } Now let's take a look at thi ...

The content momentarily flashes on the page during loading even though it is not visible, and unfortunately, the ng-cloak directive does not seem to function properly in Firefox

<div ng-show="IsExists" ng-cloak> <span>The value is present</span> </div> After that, I included the following lines in my app.css file However, the initial flickering of the ng-show block persists [ng\:cloak], [ng-cloak], ...

The Html is not having JavaScript executed before it

Within my header, there is a script that is making a call to a web API in order to populate a view model. The script is as follows: @using GigHub.Controllers @using GigHub.ViewModel @model GigHub.ViewModel.ProjectsViewModel @{ ViewBag.Title = "Projects"; ...

Ant Design: How can a SubMenu be turned into a clickable link?

Currently, I am developing a Next.js application and utilizing antd's Menu and Submenu components for my NavBar. My goal is to make the SubMenu items clickable links. How can I achieve this functionality? <Menu className={styles.menuContainer} mode ...

What is the best way to rearrange (exchange) elements within an Immutable Map?

Is there a way to rearrange items within an unchangeable list that is part of a Map? Here's an example: const Map = Immutable.fromJS({ name:'lolo', ids:[3,4,5] }); I have attempted to use the splice method for swapping, as well as ...

State update failing to modify arrays

Shown below is an array that contains boolean values: const [state, setState] = React.useState({ [`${"checkedA"+index}`]: false, [`${"checkedB"+index}`]: false, [`${"checkedC"+index}`]: false, [`${"checkedD"+index}`]: false, }); ...

Arrange objects in an array based on certain criteria using JavaScript in a dynamic

I have an array containing various items that need to be sorted according to specific rules. The goal is to group all values with "rules" together, and ensure that "ELIG_DATABASE" is grouped with "ELIG_SERVICE." const items =[{"name":"ELIG_ ...