3 ways to drag and drop using protractor
Lately I saw multiple people ask the question, how to perform DragAndDrop in Protractor.(https://stackoverflow.com/questions/59344143/no-default-proposals-for-protractor-browser-actions-and-throws-typeerror-brow/59348738#59348738 , https://github.com/angular/protractor/issues/2293)
I thought of penning this down, real quick, while the signal for SilkBoard opens up!
There are 3 effective ways of doing this:
- Use the actions() to perform:
Syntax: browser.actions().mouseDown(from).mouseMove(to).mouseUp().perform(); Githubexample:
2. Pixel offset:
Syntax: browser.actions().mouseDown(from).mouseMove(to).mouseUp().perform();
3. dragandDrop: Word of caution, this rarely worked for me.
Syntax: browser.actions.dragAndDrop(to,from).perform();
Demo implementation of all the ways: https://github.com/BhattcharyaCodes/googleMaps.git
Conclusion: IMO, use the first approach when you know the from and to.
Incase of insufficient info on where to drop your element resort to using the pixel offset technique.
Happy Coding!