@4tw/cypress-drag-drop

What is @4tw/cypress-drag-drop?

@4tw/cypress-drag-drop is a Cypress plugin that allows you to easily simulate drag-and-drop interactions in your end-to-end tests. This can be particularly useful for testing applications with complex UI interactions that involve dragging and dropping elements.

What are @4tw/cypress-drag-drop's main functionalities?

Basic Drag and Drop

This feature allows you to drag an element with the ID 'drag-element' and drop it onto an element with the ID 'drop-target'.

cy.get('#drag-element').drag('#drop-target');

Drag and Drop with Offset

This feature allows you to drag an element with the ID 'drag-element' and drop it onto an element with the ID 'drop-target' with specific offsets for the X and Y coordinates.

cy.get('#drag-element').drag('#drop-target', { offsetX: 10, offsetY: 20 });

Drag and Drop with Force

This feature allows you to force the drag-and-drop action even if the element is not visible or interactable.

cy.get('#drag-element').drag('#drop-target', { force: true });

Other packages similar to @4tw/cypress-drag-drop

cypress-real-events

cypress-real-events is a Cypress plugin that provides real user events like click, double-click, and drag-and-drop. It uses the native browser events to simulate user interactions, making it more reliable for certain types of tests compared to @4tw/cypress-drag-drop.

cypress-drag-drop

cypress-drag-drop is another Cypress plugin for drag-and-drop interactions. It offers similar functionality to @4tw/cypress-drag-drop but may have different API methods and options for customization.

README

cypress-drag-drop

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

Setup

Install using npm:

npm install --save-dev @4tw/cypress-drag-drop

or yarn

yarn add --dev @4tw/cypress-drag-drop

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

require('cypress-drag-drop')

Or, if you are using ES module syntax:

import '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');
  });
});