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.