A cypress child command for drag'n'drop support.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Initial commit Dec 20, 2018
LICENSE Initial commit Dec 20, 2018
README.md Add installation and setup instructions to readme. Jan 7, 2019
index.js
package.json Put into @4tw organization Dec 20, 2018

README.md

cypress-drag-drop

A cypress child command for drag'n'drop support.

Setup

Install using npm:

npm install --save-dev cypress-drag-drop

or yarn

yarn add --dev cypress-drag-drop

Before Cypress is loaded (usually in your commands.js) put the following line:

require('cypress-drag-drop')

This will register the drag command.

Usage

The drag command is a child command. The command only accepts elements. As the drop target simply pass a selector as string.

In your cypress spec use the command as follows:

describe('Dragtest', () => {
  it('should dragndrop', () => {
    cy.visit('/yourpage');

    cy.get('.sourceitem').drag('.targetitem');
  });
});

position

The drag command also accepts a position argument to decide at which position the element should be dropped.

Possible values are topLeft, top, topRight, left, center, right, bottomLeft, bottom, and bottomRight.

The default position is top.

describe('Dragtest', () => {
  it('should dragndrop', () => {
    cy.visit('/yourpage');

    cy.get('.sourceitem').drag('.targetitem', 'bottom');
  });
});