Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to perform drag and drop actions in WebdriverIO?
WebdriverIO can perform mouse operations like drag and drop using the dragAndDrop method. With this, we execute clicking and holding events on the present object(source), then pass the object to the target element. Finally, release the mouse.
Syntax
let p = $('#loc')
let t = $('#target')
p.dragAndDrop(t)Here, p is the source locator and t is the destination locator.
Let us perform the drag and drop functionality for the below elements −
In the above image, the element with the name - Drag me to my target has to be dragged and dropped on the element - Dropped!.
Example
Code Implementation
// test suite name
describe('Tutorialspoint application', function(){
//test case
it('Drag and Drop', function(){
// launch url
browser.url('https://jqueryui.com/droppable/')
//maximize browser
browser.maximizeWindow()
//switch to frame
browser.switchToFrame($(".demo-frame"))
//identify source element
const src = $('#draggable')
//identify target element
const trg = $('#droppable')
//drag and drop
src.dragAndDrop(trg)
});
});Output
After execution, the element with the name - Drag me to my target has been dragged and dropped on the element - Dropped!.
Updated on: 19-Nov-2021
1K+ Views
Advertisements