Drag & Drop | Bondar Academy
Course: Mastering testRigor
Module: Interation with Web Elements
Instructor: Artem Bondar
Lesson Summary
In this lesson, we will explore how to automate drag and drop actions in a test application. The interface allows users to drag items from a list on the left and drop them on the right. Key Steps in Automation Navigate to the drag and drop page under extra components. Click on the drag and drop section to start the automation process. To automate the drag and drop, we will use the drag method, similar to what was learned in the previous lesson with sliders. The syntax is straightforward: drag(elementToDrag, dropLocation) Identifying Elements For the drag operation, we can use unique text such as get groceries . For the drop location, we inspect the area and find attributes like: Class: CDKDropList ID: CDKDropList-3 We can use a partial value of the class, such as Drop-List , for the drop action. Running the Test After executing the initial test, we noticed that the item was not dropped correctly. This was due to both the drop sections having the same class. By refining the locator to specify the drop area below done , we successfully completed the test. Assertions Finally, we made assertions to ensure: The page below done contains get groceries . The initial column does not contain get groceries anymore. In summary, to automate drag and drop: Use the drag keyword followed by the locator of the element to drag. Specify the drop location, optionally using drop for relative positioning. Implement assertions to validate the results. Thank you for joining this lesson, and see you in the next one!
Video Transcript
In this lesson, we will talk about how to automate drag and drops. So let's get into it. Here is our test application and under extra components, we have a page, drag and drop, let's open this. And this is a simple interface that we're gonna practice in this lesson. So you can take any of the items from the list on the left and drop it to the right and do it on the other side. So in this lesson, we will automate this scenario and we will make validation that drag and drop works successfully. So let's get into it. I will create a new test. And first of all, we need to navigate to drag and drop page. This is extra components and drag and drop. Extra components. And then I need to click on drag and drop. All right, so how to automate drag and drops. In the previous lesson, working with the sliders, we already learned a method called drag. And this method was used to interact with the sliders. So when you work with drag and drops, you also will use exactly the same method. The syntax will be a slightly simpler and very similar to working with the sliders. To perform this operation, we need to know just two variables. So the element that we want to drag and the location where we want to drop. With dragging, it's pretty simple. So we have a get groceries, feed the dog, and so on. And we can use this text to drag this value since this value is unique for the page. But for the drop, we can see that we don't have any other attributes or any other visible text where we can drop. So let's make inspect of this area where we want to drop to find out where we can use as a locator. So here we go. This is the section where we need to drop it. And we have two options. We have a class, CDKDropList, and ID, CDKDropList-3. So we can use, for example, partial value of the class DropList, where we want to drop the value. So let's try to write this prompt. And I type the keyword, drag, then the value what I want to drag. For example, this get groceries. Get groceries, and then where to. And the value of the class is Drop-List. Drop-List. All right, that's it, and let's try to run this test. All right, test completed, but I think it didn't work as expected. So look at this. So we did not have a movement of the get groceries. Instead, the get groceries was moved in the same section just down below. And if we look over here, we can see that first click was performed on the get groceries, so we drag our item correctly. But the drop was in exactly the same area over here, in to-do list. So let's see why did this happen. I make right-click inspect. And I can see that the section of the drop list to the to-do list and done list has exactly the same class. So we will need to provide just additional locator, but we are looking drop list below done, and it should work. So let's go back to our prompt, quick edit, and I type below done. And let's run this test one more time. All right, this was completed. Let's check the screenshots. And now everything was identified correctly. The item that we want to drag and the location where we need to drop. And the next screenshot, here we go. Get groceries was dropped into the right location. And the last step, we need to make assertion for our test. So let's run this test one more time. And the last step, we need to make assertion for our test. Check that page below done contains get groceries. And the second assertion that initial column where we drag the value from does not have this value anymore. And this one is to do. Check that page below to do not contains get groceries. And let's run this test. All right, and test passed successfully, and validation was successful as well. So let's quickly summarize what we did in this lesson. Working with drag and drops is pretty straightforward. You need to use a keyword drag, then the locator of the element that you wanna drag, and location where you wanna drop it. If needed, you can also use a keyword drop. If needed, you can provide a relative location of the place where you want to drop your element, and assertions, you already should be familiar with this type of prompt. Then we validate the page in the certain location contains the result or not contains the result that we are looking for. All right, that's it guys, and see you in the next lesson.