Not able to automate drag and drop behavior

[bhanuchhabra7]

I have a scenario where I have to automate UI tests, I looked but the repository doesn't have any e2e test, so to work with it I tried with a "custom js" (to simulate drag UI element and drop onto another UI element with HTML events) approach to automate the drag (of GridItem) and drop onto the EmptyCell. The click on grid item is being registered with the event monitor, but the Drop event is not being called.

Basically, this event is not being registered: { emptyCellDropCallback: this.emptyCellDrop.bind(this), } .. .. emptyCellDrop(event: any, item: GridsterItem){ }

So is there any way I can simulate the drag and drop behavior of gridster? for example, on this page, if we can programmatically drag a button (button holder div), onto another cell? https://tiberiuzuld.github.io/angular-gridster2/drag

[splurgeop]

I have a similiar problem when using the gridster. I am working with protractor to automate my E2E scenario which has a gridster control on it and i have drag an object to gridster and validate. As per my initial finding ,there is bug in chromedriver(https://bugs.chromium.org/p/chromedriver/issues/detail?id=841) which disallow to do drag and drop using the conventional protractor methods.

browser.actions().dragAndDrop(sourceElement,targetElement).mouseUp().perform();

To overcome this issue people have suggested to use the js and trigger the custom events.The Js works typicall well with other Angular and HTML 5 combination. I have tried that in angularjs and html5 apps but with the gridster control it seems that the drop event is not getting trigerred.

Here are the detials: Protractor version:7.0 Gridster version:7 chromedriver : 88.xx.xx

Is that possible to provide a solution of the above problem.

[shubhammagar]

try giving height: 100% and width: 100% for the div on which you want to drop.