Automated tests don't work - Drag and Drop doesn't change status / target area is empty

[maniaxmultimedia]

Hello, thanks for DnD, my automated tests don't work, they finished with success but there are no changes in status and no reaction. I tried a few JS functions, Selenium and now I use Cypress.io framework to automate DnD but it doesn't work despite positive results of steps. There are no errors in stacktrace or console.

What can I do? Some suggestions? Thanks in advance.

// Cypress.io Framework Test
it.only('NGX Drag & Drop - Cypress.io TEST', function() {
           cy.visit('https://reppners.github.io/ngx-drag-drop/')
        cy.get('mat-card').first().trigger('dragover');
        cy.get('.my-dropzone').trigger('drop',{ force:true });       
        })

[reppners]

Hi! I had a hard time and no success in getting automated tests to work, yet. Last time I tried was a while ago, so tooling might has gotten way better and maybe I should give it another go.

As for advice I would try to trigger mouse events and hope that this in turn triggers the engine to emit drag events (just like a browser should do). Emitting the actual drag events should be the job of the browser/test-framework. Otherwise you need to read up on the HTML5 Drag and drop spec to exactly know when to emit which event on what element. That can be done, but that would not catch any inconsistency in between browsers (which should not exist in a perfect world and browsers are getting really close these days but still there are quirks especially in old apis like drag and drop).

[tzahari]

I use the official cypress plugin @4tw/cypress-drag-drop for testing drag and drop. But it does not work with npx-drag-drop The element is not moved...

Small Cypress test wich shows, that the Drag & Drop is not working:

import '@4tw/cypress-drag-drop';

describe('test npx-drap-drop', () => {

    it('Test', () => {
        cy.viewport(1024,786);
        cy.visit('https://reppners.github.io/ngx-drag-drop/');
        cy.get('#mat-tab-link-2').click();

        cy.get('div.col:eq(0) mat-list-item:eq(0) span.mdc-list-item__primary-text').should('have.text', 'Left');
        cy.get('div.col:eq(0) mat-list-item:eq(1) span.mdc-list-item__primary-text').should('have.text', 'Lefter');
        cy.get('div.col:eq(0) mat-list-item:eq(2) span.mdc-list-item__primary-text').should('have.text', 'Leftest');

        cy.get('div.col:eq(0) mat-list-item:eq(1)')
            .drag('div.col:eq(0) mat-list-item:eq(2)');

        cy.get('div.col:eq(0) mat-list-item:eq(0) span.mdc-list-item__primary-text').should('have.text', 'Left');
        cy.get('div.col:eq(0) mat-list-item:eq(1) span.mdc-list-item__primary-text').should('have.text', 'Leftest');
        cy.get('div.col:eq(0) mat-list-item:eq(2) span.mdc-list-item__primary-text').should('have.text', 'Lefter');
    });
});