Last Updated On
In this tutorial, we will discuss in detail how we can perform Drag and Drop actions in Robot Framework.
Table of Contents
Prerequisite:
- Install Python
- Install PIP
- Install Robot Framework
- Install Robot framework Selenium Library
- Install PyCharm IDE
Please refer to this tutorial to install Robot Framework – How to install and setup Robot Framework for Python.
Implementation Steps:
Step 1 – Create a new project
Step 1.1 – Open PyCharm and create a new project. Go to File and select New Project from the main menu.
![](https://qaautomation.expert/wp-content/uploads/2023/03/image-116.png?w=327)
Step 1.2 – Choose the project location. Click the “Browse” button next to the Location field and specify the directory for your project.
Deselect the Create a main.py welcome script checkbox because you will create a new Python file for this tutorial.
![](https://qaautomation.expert/wp-content/uploads/2023/04/image-135.png?w=705)
Click on the “Create” Button.
Step 1.3 – A new dialog appears asking to open the project using any one of the given options. I have selected New Window as I like to have separate windows for each project.
![](https://qaautomation.expert/wp-content/uploads/2023/03/image-118.png?w=518)
Below is the image of the new project created in PyCharms.
![](https://qaautomation.expert/wp-content/uploads/2023/03/image-120.png?w=1200)
Step 2 – Create a new directory in the new project
Right-Click on the project, select New->Directory, and provide the name as Tests
![](https://qaautomation.expert/wp-content/uploads/2023/03/image-121.png?w=534)
Below is the image of the new directory.
![](https://qaautomation.expert/wp-content/uploads/2023/03/image-122.png?w=455)
Right-click on the new directory, select New File and provide the name as Drag_And_Drop_Demo.robot as shown below:
![](https://qaautomation.expert/wp-content/uploads/2023/06/image-24.png?w=273)
Step 3 – Download ChromeBinaries from the below location
The tests are going to use the Chrome browser, so we need to download the ChromeBinaries to open a blank browser in Chrome.
https://chromedriver.chromium.org/
![](https://qaautomation.expert/wp-content/uploads/2023/03/image-160.png?w=1200)
The chromedriver and geckodriver are placed in a folder named drivers in the RobotFramework_Demo project. I have renamed chromedriver to Chrome and geckodriver to Firefox.
![](https://qaautomation.expert/wp-content/uploads/2023/04/image-137.png?w=267)
Step 4 – Automate the drag and drop option
We are now going to write test cases. The test case details will be as follows −
- Open the Browser with the URL
- Verify element Text before drag
- Drag the element and drop
- Verify element Text after drag
To work with the Radio Button, we need a locator. A locator is an identifier for the textbox like id, name, class, xpath, css selector, etc.
To know more about locators, refer to these Selenium Tutorials:
Locators in Selenium – Locate by ID, ClassName, Name, TagName, LinkText, PartialLinkText
Dynamic XPath in Selenium WebDriver
CSS Selector in Selenium WebDriver
The below page shows that we have multiple DropDown options.
Let us inspect the locator of the drag and drop option.
Below is an example of a drag and drop option.
*** Settings ***
Documentation To drag the box
Library SeleniumLibrary
*** Test Cases ***
Verify that the user can drag and drop elements
[documentation] This test case verifies that a user can drag and drop an element from source to destination
Open the Browser with URL
Verify element Text before drag
Drag the element and drop
Verify element Text after drag
*** Keywords ***
Open the Browser with URL
Create Webdriver Chrome executable_path=/Vibha_Personal/RobotFramework_Demo/drivers/Chrome
Go To https://demoqa.com/droppable
Maximize Browser Window
Set Selenium Implicit Wait 5
Verify element Text before drag
Element Text Should Be id:droppable Drop here timeout=5 #Before Drag and Drop
Drag the element and drop
Drag And Drop id:draggable id:droppable
Verify element Text after drag
Element Text Should Be id:droppable Dropped! timeout=5 #After Drag and Drop
All the below-mentioned keywords are derived from SeleniumLibrary except the last one. The functionality of keywords mentioned above:
1. Create Webdriver − The keyword creates an instance of Selenium WebDriver.
2. Go To – This keyword navigates the current browser window to the provided URL – https://demo.automationtesting.in/Register.html.
3. Maximize Browser Window – This keyword maximizes the current browser window.
4. Set Selenium Implicit Wait – This keyword sets the implicit wait value used by Selenium.
5. Element Text Should Be – This keyword is used to verify that the current page contains the exact text identified by the locator.
6. Drag And Drop – Drags the element identified by the locator into the target element.
These keywords are present in SeleniumLibrary. To know more about these keywords, please refer to this document – https://robotframework.org/SeleniumLibrary/SeleniumLibrary.htm.
Before
![](https://qaautomation.expert/wp-content/uploads/2023/06/image-17.png?w=962)
After
![](https://qaautomation.expert/wp-content/uploads/2023/06/image-18.png?w=958)
Step 5 – Automate the Drag and Drop by Offset option
Drag And Drop By Offset – Drags the element identified with the locator by xoffset/yoffset.
*** Settings ***
Documentation To drag the box
Library SeleniumLibrary
Test Teardown Close Browser
*** Test Cases ***
Verify that the user can drag and drop element by offset
[documentation] This test case verifies that a user can drag and drop an element by offset
Open the Browser with URL
Verify element Text before drag
Drag the element and drop locator by xoffset/yoffset
Verify no change in Text
*** Keywords ***
Open the Browser with URL
Create Webdriver Chrome executable_path=/Vibha_Personal/RobotFramework_Demo/drivers/Chrome
Go To https://demoqa.com/droppable
Maximize Browser Window
Set Selenium Implicit Wait 5
Verify element Text before drag
Element Text Should Be id:droppable Drop here timeout=5 #Before Drag and Drop
Drag the element and drop locator by xoffset/yoffset
Drag And Drop By Offset id:draggable 50 70
Verify no change in Text
Element Text Should Be id:droppable Drop here timeout=5 #After Drag and Drop
Before
![](https://qaautomation.expert/wp-content/uploads/2023/06/image-19.png?w=910)
After
![](https://qaautomation.expert/wp-content/uploads/2023/06/image-20.png?w=919)
Step 6 – Execute the tests
We need the below command to run the Robot Framework script.
robot Drag_Drop_Demo.robot
The output of the above program is
![](https://qaautomation.expert/wp-content/uploads/2023/06/image-21.png?w=1002)
Step 7 – View Report and Log
We have the test case passed. The Robot Framework generates log.html, output.xml, and report.html by default.
Let us now see the report and log details.
Report
Right-click on report.html. Select Open In->Browser->Chrome (any browser of your wish).
![](https://qaautomation.expert/wp-content/uploads/2023/03/image-155.png?w=698)
The Report generated by the framework is shown below:
![](https://qaautomation.expert/wp-content/uploads/2023/06/image-22.png?w=1200)
Log
Robot Framework has multiple log levels that control what is shown in the automatically generated log file. The default Robot Framework log level is INFO.
Right-click on log.html. Select Open In->Browser->Chrome (any browser of your wish).
![](https://qaautomation.expert/wp-content/uploads/2023/06/image-23.png?w=926)
That’s it! Congratulations on making it through this tutorial and hope you found it useful! Happy Learning!!
Additional Tutorials