4teamwork / cypress-drag-drop

A cypress child command for drag'n'drop support.
GNU General Public License v3.0
167 stars 45 forks source link

Drag and drop is not working #140

Open Poojitha-Chandra opened 1 year ago

Poojitha-Chandra commented 1 year ago

I am using this plugin for a while and from mid July it stopped working, so I have got some cypress drag and drop example from web and tried to check whether it is an issue with my client network.

The example used for which assertion error occurs as drag-drop plugin not working:

it('Using the cypress-drag-drop plugin on a HTML site', function () {

        cy.visit('https://the-internet.herokuapp.com/drag_and_drop')

        //Before Drag and Drop column-a has 'A' and 'column-b' has 'B'
        cy.get('#column-a')
            .should('have.text', 'A')
        cy.get('#column-b')
            .should('have.text', 'B')

        //Drag and drop using cypress-drag-drop plugin
        cy.get('#column-a').drag('#column-b')

        //After Drag and Drop column-a has 'B' and 'column-b' has 'A'
        cy.get('#column-a')
            .should('have.text', 'B')
        cy.get('#column-b')
            .should('have.text', 'A')
 })

The alternative code without using drag and drop plugin is working fine. The code for the same:

it('Not using the cypress-drag-drop plugin on a HTML site', function () {

        cy.visit('https://the-internet.herokuapp.com/drag_and_drop')

        const dataTransfer = new DataTransfer();

        //Before Drag and Drop column-a has 'A' and 'column-b' has 'B'
        cy.get('#column-a')
            .should('have.text', 'A')
        cy.get('#column-b')
            .should('have.text', 'B')

        //Not using cypress-drag-drop plugin
        cy.get('#column-a').trigger('dragstart', { dataTransfer });
        cy.get('#column-b').trigger('drop', { dataTransfer });

        //After Drag and Drop column-a has 'B' and 'column-b' has 'A'
        cy.get('#column-a')
            .should('have.text', 'B')
        cy.get('#column-b')
            .should('have.text', 'A')
 })

Cypress version used in my machine is 12.15.0

@bierik Any help is highly appreciated as the alternative way without using plugin is not working for my test URLs

davidlinhares commented 1 year ago

Seeing the same behavior since mid July as well.

Cypress version 12.17.1.

gripzyyy commented 11 months ago

Problems still!

jeme95 commented 11 months ago

@Poojitha-Chandra I had the same problem and your code worked for me, thank you very much

jmescode-te commented 10 months ago

@Poojitha-Chandra thanks so much! all I did was change some styles in my drag/drop interface but I couldn't get the drag tests that usually worked, to work. Your comment however, got all my tests working again :)

mohamadnoor991 commented 9 months ago

@Poojitha-Chandra, I have the same problem, and I opened an issue for that; actually, it will work with you, but you should hover the mouse on the place where you want to drop the element.

the code that you added, worked with me when I tried to drop an image from my PC to the application, but when I tried it with an element from the application to drop from list to place inside the app, it did not work. do you have any idea what can be the problem??

pv-das commented 3 months ago

@Poojitha-Chandra, I am still facing the issue