Protractor struggling to drag an element, but cannot successfully drop it

I've been utilizing Protractor to test my AngularJS application, specifically focusing on dragging an element and dropping it onto an SVG. So far, I've managed to successfully click and drag the element over the SVG.

browser.actions()
    .mouseMove(draggableElement)
    .mouseDown()
    .mouseMove({x: 400, y: 100}) //Reaches the svg
    .perform();
browser.sleep(1000);
browser.actions().mouseUp().perform();

However, after the draggable element is positioned on the SVG, there seems to be a problem. Even though I can see the element in the correct spot at that moment, it doesn't actually get dropped. It just disappears suddenly without any further action.

What could be causing this issue? Is there a more reliable method in Protractor for successfully dragging and dropping elements?

javascriptangularjsprotractor

Answer №1

In my opinion, it is essential to include the draggableElement as a parameter in both the mouseDown() and mouseUp() functions:

browser.actions()
  .mouseMove(draggableElement)
  .mouseDown(draggableElement)
  .mouseMove({x: 400, y: 100})
  .perform();
browser.sleep(1000);
browser.actions().mouseUp(draggableElement).perform();

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

Modifying the color of a specific node in jstree

I am attempting to modify the background color of the node I have selected in jstree. $('#syncrep').jstree({ 'core' : { 'data' : repository ...

javascriptjqueryhtmlangularjsjstree

% unable to display on tooltip pie chart in highcharts angular js

https://i.stack.imgur.com/Ccd7h.png The % symbol isn't displaying correctly in the highcharts ageData = { chartConfig: { options: { chart: { type: 'pie', width: 275, height: 220, marginTop: 70 ...

javascriptangularjshighchartspie-chart

Running into issues on Heroku with Node, Gulp, and Browserify: Module Not Found Error

My asset building process relies on Gulp. Specifically for Javascript, I have a task set up with Browserify to handle all code dependencies. While everything runs smoothly locally, deploying to Heroku results in a Gulp failure with the following error: 2 ...

javascriptnode.jsherokugulpbrowserify

Facing issues while trying to install Definitely Typed Angular through Visual Studio NuGet, encountering frequent "Duplicate Identifiers" errors

After installing AngularJS and Definitely Typed Angular from NuGet packages in Visual Studio, everything seemed to go smoothly with no errors. However, when I tried to write to a TS file, I encountered angular errors throughout the d.ts folder. Hovering ov ...

angularjsvisual-studionugetdefinitelytypedangularjs-1.6

What could be causing my Google Chrome extension to only allow me to open 25 tabs instead of more?

Having a frustrating issue with my code that is causing problems when used as a Chrome Extension. Despite checking and confirming that the code should work correctly, it seems to stop opening pages after tab 25. I have verified that the code attempts to o ...

javascriptgoogle-chromegoogle-chrome-extension

Is there a way to trigger the animation of this text effect only when the mouse is scrolled to that specific section?

Here is a cool typing text effect created using HTML, CSS, and JavaScript. Check out the code below: (function($) { var s, spanizeLetters = { settings: { letters: $('.js-spanize'), }, init: function() { ...

javascripthtmlcss

Transfer the imageURI to a different HTML page

My mobile app, created using PhoneGap, allows users to select an image from their album. I want to pass that selected image and display it on another HTML page. Does anyone have any suggestions on how to achieve this? Below is the code snippet: selectImag ...

javascriptjquerycordovahttp-redirect

Uncovering the enum object value by passing a key in typescript/javascript

How can I retrieve the value of an enum object by passing the key in typescript? The switch case method works, but what if the enum object is too long? Is there a better way to achieve this? export enum AllGroup = { 'GROUP_AUS': 'A' &a ...

javascriptreactjsarraystypescriptobject

Convert data into a tree view in JavaScript, with two levels of nesting and the lowest level represented as an array

Here is an example of a JSON object: [ { "venueId": "10001", "items": [ { "venueId": "10001", "locationId": "14", "itemCode": "1604", "itemDescription": "Chef Instruction", "categoryCode": "28", ...

javascripttypescriptsorting

What is a more efficient way to differentiate a group of interfaces using an object map instead of using a switch statement?

As someone still getting the hang of advanced typescript concepts, I appreciate your patience. In my various projects, I utilize objects to organize react components based on a shared prop (e.g _type). My goal is to automatically determine the correct com ...

javascriptreactjstypescriptinterface

Sending Array Data from Controller to Factory in AngularJS

Can array data be transmitted from a controller to a factory, extracted from the factory, and then inserted into a database using Slim framework? Array[{}] CONTROLLER -> FACTORY -> SLIM PHP FRAMEWORK -> DATABASE I am new to AngularJS. Could you ...

arraysangularjsslim

Error: The JSON data contains an unexpected token at the beginning Express

I am currently following a tutorial (here) to establish a connection between Express and React Native. I have a server.js script running which connects to the client (App.tsx) on my IP address using port 3000. The server and app are running simultaneously ...

javascriptreact-nativeexpress

Transitioning images smoothly and responsively with jQuery, creating a beautiful

Hey there! I'm looking for some help with transforming this jQuery effect. Instead of having fixed sized images, I want to set the size in percentage (width:100%; height:auto) so they can be responsive. Any creative ideas or suggestions? <scri ...

javascriptjqueryhtmlcsscross-fade

What is the best way to showcase the information of each object on a click event in Vue.js?

My goal with this code is to display each day's class schedule when it is clicked on. However, the issue I'm facing is that the entire week's schedule is being displayed instead of just the selected day. What adjustments should I make in ord ...

javascriptvue.js

Using angularJs code within a JSP file: A comprehensive guide

I am facing an issue when trying to include angular code within a .jsp file. The error message I received is: "Multiple annotations found at this line: - Start tag of element - Undefined attribute name (ng-app)." Can someone provide guida ...

angularjseclipsehtmljspangularjs-directive

Error: Unable to access attributes of null object (specifically 'accessToken')

After following a YouTube tutorial by Lama for creating an E-commerce application, I attempted to add a logout feature on the admin page that was not covered in the tutorial. To implement this, I used Redux to grab the currentUser and set it to null to suc ...

javascriptreactjsreduxjwtaccess-token

What is the process of parsing a Java property file in AngularJS?

Is it possible to access a properties file from an AngularJS application that is located outside of the web server? For example, in Java we can access a property file deployed separately from the project. Is there a way to achieve this in AngularJS? I at ...

javascriptangularjs

Using Node.js for building a single-page web application

Currently, I am exploring the use of express.js for the backend and JavaScript on the client side for my single page web application. My main concern is about how routing works in express. Should routing be used to bridge the gap between the user interfac ...

javascriptajaxjsonnode.jsexpress

Is there a way to retrieve the specific point that was clicked on within a THREE.Points object?

I'm currently experimenting with a raycaster to identify points on a 2D plane of points... function dynamic(x) { x.dynamic = true; return x; } geometry.addAttribute("position", dynamic(new THREE.BufferAttribute(positions, 3))); geometry.addAttribute( ...

javascriptthree.js

The amalgamation of geometries using BufferGeometryUtils results in variations from the original model

I have encountered an issue when attempting to merge GLB model geometries with three.js using BufferGeometryUtils.mergeBufferGeometries. The new merged geometries do not always align perfectly with the original model. Furthermore, some of the geometries e ...

javascriptthree.js3d