Drag & Drop | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Automation of User Interfaces
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explore test automation for drag and drop functionality. The focus is on automating the process within a test application that includes a drag and drop page. Key Steps for Automation Identify Elements: Use the browser's inspect tool to find the elements you want to automate. For example, locate the first element in the list. Set Up the Test: In your code, initialize a new test for the extra components and open the drag and drop page. Get the Element: Use getById to select the first element, which is typically a div . Trigger Dragging: Identify the appropriate events for dragging. In this case, the drag start event is used. Drop the Element: Find the drop target element and trigger the drop event. Event Handling When automating drag and drop, it's crucial to pay attention to the event names. Common events include: drag start drag end drop After setting up your events and running the test, ensure that it executes successfully. The process is straightforward once you understand how to locate elements and trigger the necessary events. In summary, the automation of drag and drop involves: Finding the element to drag. Triggering the drag start event. Locating the drop target and triggering the drop event. That's all for this lesson! See you in the next one.
Video Transcript
Hey guys, in this lesson, we will talk about test automation of drag and drops. All right, let's jump into it. So in our test application, under extra components, we have page drag and drop. And we have these nice items, and I can drag and drop it around from the left and to the right. How would you automate this? Make a right click, inspect, and first of all, let's find the elements that we are looking for. So we need to grab this element. For example, first element from the list, and drag it and drop it to the right. So we have also ID, and it looks like we can use it as our locator. So let's begin. Going back to the code, I set up also a new test, extra components, and open drag and drop page. First of all, let's get this element. So get by ID, and then I need to find the first element, which is a div. So let's just use a div for the simplicity, which is a child element. And then I want to get the first one. And then I want to trigger the event to trigger the dragging process. How would I know what event should I call? Again, we are hovering over this element, selecting this. And on the left in this panel, we are going to event listeners. I am disabling all ancestors, and this is the events that we have. We have drag end and drag start. So most likely, the event that we are looking for is this one, drag start. And I'm calling this event inside of the trigger, drag start. Here we go, we have this guy. And then we need to find the locator for the element where we want to drop it, and trigger the event as well. So this is where we want to drop it. I want inspect. Okay, we have the ID over here, good. I'll get the ID for this element. So I get the ID is drop list. And then I need to trigger the event as well, to trigger like this. And let's find what event do we need to trigger over here, right-click, inspect. This is the element, and yeah, quite simple. So we have a drop event, and this is what we need to trigger. And I trigger drop event, something like this, and let's try to run this test. It's running everything, hold on a second, hold on, hold on, hold on. I need to select it dot only. Okay, going back one more time, running the test. Yeah, you see, it worked successfully. So the drag and drop process is quite straightforward. What you need to pay attention to, only to the names for the events. Because the name for the events not necessary, you may have drag event or the drop event. There can be variations about how the event name can be named. So that's it. So you find the element, trigger the event to start drag and process. And then dropping this element, triggering the event one more time where you want to drop it. And that's pretty much it, and this is the process of automation of drag and drop. So that's it, guys, and I'll see you in the next lesson.