Using Drag and Drop feature with Nightwatch and Selenium is not functional

While conducting a system test using nightwatch and selenium, I encountered an issue with dragging and dropping elements that are implemented with Knockout-draggable. Manually, the drag and drop functionality works perfectly. Below is the code snippet from the system test attempting to drag and drop a draggable box:

this.moveToElement('@box', 0, 0);
c.mouseButtonDown(0);
this.moveToElement('@box2', 0, 40);
c.mouseButtonUp(0);

Here, this refers to the page containing the xpath elements and c represents the client.

Despite my efforts, the code does not successfully move the box below the second box, which is approximately 40 pixels high. I have experimented with varying values, but the box remains undragged. This issue occurs specifically in Firefox.

For clarity, both @box and @box2 contain valid xpaths that have been used in numerous other tests without any problems.

javascriptseleniumknockout.jsdrag-and-dropnightwatch.js

Answer №1

Would it be helpful to insert a pause between calling c.mouseButtonDown(0); and then executing the 

this.moveToElement('@box2', 0, 40);
function?

Answer №2

If you want to test out something new, give this a shot! It's been tested and works well in Chrome, Firefox, and IE. However, keep in mind that both the element being moved and the destination element must support HTML5 drag and drop.

All you have to do is install "html-dnd" via npm. Here's the link if you need it -
https://www.npmjs.com/package/html-dnd

Once installed, simply run this command:

browser.execute(dragAndDrop, ['#draggable', '#droppable']);

For instance:

browser.execute(dragAndDrop,['#elemendId1', '#elemendId2']).pause(2000);

I hope this proves useful for your testing needs!

Answer №3

I have implemented a modified version of @Hikaryu's technique and it has proven to be effective for my needs:

const performDragAndDrop = function (browser, startingElement, destinationElement) {
  browser
    .moveToElement(startingElement, 10, 10)
    .mouseButtonDown(0)
    .pause(2000)
    .moveToElement(destinationElement, 10, 10)
    .pause(2000)
    .mouseButtonUp(0);
  return browser;
};

Answer №4

I created a customized solution for this particular issue and it is functioning flawlessly.

module.exports.command = function (StartingLocator, EndingLocator, callback) {

  var self = this;

  this
    .getLocation(EndingLocator, function (result) {
      let xEnd = result.value.x;
      let yEnd = result.value.y;

      this.moveToElement(StartingLocator, 10, 10)
        .mouseButtonDown(0)
        .pause(2000)
        .moveToElement(EndingLocator, xEnd, yEnd)
        .pause(2000)
        .mouseButtonUp(0);
      return this;
    });



  return this;
};

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

What is the best way to accomplish this task using JavaScript fetch?

I stumbled upon this solution. Essentially, it's a call to Mailchimp requesting a confirmation email be sent to users after submitting their email. The script functions flawlessly with jquery. However, I have a distaste for jquery and find it bother ...

javascriptjqueryajaxfetch

Creating a recursive function in JavaScript to build a menu list object

Having an assortment of ['/social/swipes/women', '/social/swipes/men', '/upgrade/premium']; The objective is to create a map object that mirrors this structure: { 'social': { swipes: { wom ...

javascriptarraysecmascript-6javascript-objectsarrow-functions

Guide to importing Bootstrap 5 bundle js using npm

Having some issues with implementing Bootstrap5 and NPM. The website design is using bootstrap, which works fine, but not all the JavaScript components (dropdowns, modals, etc). I want to figure out how to import the Bootstrap JS bundle without relying on ...

javascriptnpmbootstrap-5

React - Updating state from an external component

I realize that the question I am about to ask may go against some basic principles of using React... however, with this example, I hope someone can assist me in finding a solution to the problem I am currently facing. While this code snippet is not from m ...

javascriptreactjscomponents

Issue with the functionality of a checkbox input placed inside a label

I successfully created a functioning checkbox: <div class="custom-control custom-switch mt-3 ml-4"> <input type="checkbox" class="custom-control-input" id='G1'> <label class="custom-cont ...

javascripthtmlbootstrap-4

Discovering the generic type from an optional parameter within a constructor

Looking to implement an optional parameter within a constructor, where the type is automatically determined based on the property's type. However, when no argument is provided, TypeScript defaults to the type "unknown" rather than inferring it as "und ...

javascripttypescript

Generate a hard copy of the data table row without needing to view it beforehand

Here are some records from a table: +--------+---------+-------+----------+--------+ | Name | Address | Phone + Email | Action | +--------+---------+-------+----------+--------+ | Andy | NYC | 555 | <a href="/cdn-cgi/l/email-protection" cl ...

javascriptphpjqueryhtmlcss

"Executing a query on Angular Firestore using the where clause fetches all documents from the

I am encountering a perplexing issue with my angular app that is connected to Firestore. Despite following the documentation closely, when I query for documents in a collection based on a specific condition, the array returned contains every single documen ...

javascriptfirebasegoogle-cloud-firestoreangularfire2

Using the same bone structure to share skeletons among SkinnedMeshes in Three.JS

I've been grappling with the challenge of incorporating and removing clothing pieces to an existing skeleton (Clothing meshes and body meshes should share skeleton) but I always seem to encounter strange results. All the clothing items that I intend ...

javascriptthree.js3dskeletal-mesh

What is the best approach for running a database query using the value selected from a form dropdown?

Currently, my application server is ColdFusion and I am using SQL Server for the database. Within a select form element on my webpage, users can choose from a list of vehicles such as Volvo S60, BMW M6, and VW Jetta. Once a user selects a vehicle, I need ...

javascriptjqueryajaxcoldfusioncfml

Having trouble navigating the maze of Express routing

app.js file // home route app.get("/home", async(req, res)=>{ let allCards = await Card.find({}); let skills = await Skill.find({}); res.render("index", {allCards, skills}); }) // add new skill route app.get("/home/newskill", (req, res)=& ...

javascriptmongodbexpressejs

Encountering an error when retrieving data in React: Uncaught (in promise) TypeError - Unable to fetch data

I have recently built a backend using Express and MongoDB database. I am encountering an error while trying to fetch data in React. Could someone please advise on the solution to this error and guide me on how to successfully retrieve data from the backend ...

javascriptnode.jsreactjsmongodbexpress

Challenge encountered while implementing a countdown using a for loop in a node.js application

I've been struggling with the following code and despite trying everything, I can't seem to find a solution. Hopefully, someone out there can lend me a hand. Currently, the code runs fRoll.roll, enters a FOR loop, initiates the countdown of the ...

javascriptnode.jsloopsdom-eventspuppeteer

What is the best way to create a new variable depending on the status of a button being disabled or enabled

Imagine a scenario where a button toggles between being disabled when the condition is false (opacity: 0.3) and enabled when the condition is true (opacity: 1). Let's set aside the actual condition for now -- what if I want to determine when the butt ...

javascriptcssreactjsnext.js

Unveiling the magic of Vue Composition API: Leveraging props in the <script setup> tag

I'm currently working on creating a component that takes a title text and a tag as properties to display the title in the corresponding h1, h2, etc. tag. This is my first time using the sweet <script setup> method, but I've encountered a pr ...

javascriptvue.js

Set a unique class for several elements depending on a given condition

Is there a way to assign a color class based on the element's value without looping through all elements? Check out my jsfiddle HTML <div> <ul> <li class="MyScore">90</li> <li class="MyScore"> ...

javascripthtmlcss

Tips for adding style to a group of SVG elements:

I currently have an array of .svg icons, each with unique properties that I need to customize: <svg width="24" height="24" viewBox="0 0 24 24"> ... </svg> import styled from 'styled-components'; import Github from 'assets/git ...

javascriptcssreactjssvgstyled-components

Receiving a blank array upon calling res.json() in Node.js script

I'm facing an issue with my code snippet that displays all posts, including the username and display picture of each user. Everything seems to be working fine as the log output is perfect. However, I'm struggling to return this data as a JSON obj ...

javascriptnode.js

Issue encountered: Unforeseen command: POST karma

Whenever I try to run my test cases, I encounter the following error message: Error: Unexpected request: POST data/json/api.json it("should $watch value", function(){ var request = '/data/json/api.json'; $httpBackend.expectPOST(reque ...

javascriptangularjskarma-runnerkarma-mocha

Leveraging Python to automate web applications by extracting information from a JSON file

I have a Python and Selenium code for automating web applications where I am currently entering static data. I would like to enhance this by using a JSON file to provide the data to the application. Can someone please assist me in writing the code to retri ...

pythonjsonseleniumxpath