Drag and Drop in Python Selenium

Selenium is a powerful tool for automating web browsers, and it supports drag-and-drop operations through its ActionChains class. Automating drag and drop is crucial for testing web applications that rely on interactive elements such as sortable lists, sliders, and draggable objects. This article will provide an in-depth guide on how to perform drag-and-drop operations in Selenium using Python

Setting Up Selenium for Drag and Drop

To perform a drag-and-drop action, we need to:

  1. Identify the source element (the element we want to drag).
  2. Identify the target element (the element where we want to drop the source element).
  3. Use ActionChains to execute the drag-and-drop operation.

Importing Required Libraries

from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.common.by import By
import time

Locating Elements for Drag and Drop

To successfully perform a drag-and-drop operation, we must locate the elements properly. The most common ways to locate elements in Selenium include:

  • By ID: driver.find_element(By.ID, “source-id”)
  • By Class Name: driver.find_element(By.CLASS_NAME, “source-class”)
  • By XPath: driver.find_element(By.XPATH, “//*[@id=’source’]”)

Performing Drag and Drop in Selenium using ActionChains

The ActionChains class provides the drag_and_drop() method, which allows us to automate drag-and-drop interactions in web applications.

import time
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains

# Initialize WebDriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.implicitly_wait(15)

driver.get("https://www.globalsqa.com/demo-site/draganddrop/")
# Switch to the iframe
iframe_element = driver.find_element(By.XPATH, "//iframe[@class='demo-frame lazyloaded']")
driver.switch_to.frame(iframe_element)

# Get source element
image_element = driver.find_element(By.XPATH, "//h5[text()='High Tatras']//parent::li")

# Get target element
trash_element = driver.find_element(By.ID, "trash")

# Create an ActionChains object
action = ActionChains(driver)

# Drag and drop image from one source to target element.
action.drag_and_drop(image_element, trash_element).perform()
time.sleep(5)

driver.quit()

Performing Drag and Drop Using Click and Hold Method

An alternative approach to executing drag and drop involves using click_and_hold(), move_to_element(), and release(). This method is useful when drag_and_drop() does not work due to JavaScript-based UI interactions.

import time
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains

# Initialize WebDriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.implicitly_wait(15)

# Launch a URL on browser
driver.get("https://www.globalsqa.com/demo-site/draganddrop/")

# Switch to the iframe
iframe_element = driver.find_element(By.XPATH, "//iframe[@class='demo-frame lazyloaded']")
driver.switch_to.frame(iframe_element)

# Get source element
image_element = driver.find_element(By.XPATH, "//h5[text()='High Tatras']//parent::li")

# Get target element
trash_element = driver.find_element(By.ID, "trash")

# Create an ActionChains object
action = ActionChains(driver)

# Perform drag and drop using an alternative method
action.click_and_hold(image_element).move_to_element(trash_element).release()
action.perform()
time.sleep(5)

driver.quit()

Mouse Hover Action In Selenium

Mastering Mouse Hover Action in Selenium with Python: A Comprehensive Guide

When delving into the realm of web automation, particularly with Selenium in Python, one often encounters scenarios where merely clicking elements is insufficient. There are instances where a more nuanced interaction—such as hovering over an element to trigger a dropdown or unveil hidden options—is indispensable. This is where Selenium’s ActionChains class becomes a pivotal asset.

Understanding the Significance of Mouse Hover Actions

Many modern web applications leverage hover effects to provide interactive user experiences. For instance, e-commerce websites frequently employ hover actions to reveal product details or additional purchase options. Automating such interactions necessitates simulating a user hovering their cursor over a designated web element, which can be effortlessly achieved using Selenium’s ActionChains.

Implementing Mouse Hover Using ActionChains

To execute a hover action, the ActionChains class provides the move_to_element() method, which simulates the cursor hovering over a specified element.

Step-by-Step Implementation

from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.common.by import By
import time

# Initialize WebDriver
driver = webdriver.Chrome()

# Open flipkart website
driver.get("https://www.flipkart.com/")  
driver.maximize_window()
driver.implicitly_wait(10)

# Locate the element to hover over
element_to_hover = driver.find_element(By.XPATH, "//div[@aria-label='Fashion']")

# Create an ActionChains object
actions = ActionChains(driver)

# Perform the hover action
actions.move_to_element(element_to_hover).perform()

# Pause to observe the effect
time.sleep(3)

# Closing the browser
driver.quit()

Exploring Advanced Hover Scenarios

  1. Hover and Click on a Revealed Element: In cases where an element becomes visible only after hovering, you can chain actions as follows:
    revealed_element = driver.find_element(By.XPATH, “//div[@aria-label=’Fashion’]”) actions.move_to_element(element_to_hover).click(revealed_element).perform()
  2. Hover Over Nested Elements: If you need to hover over multiple elements sequentially, chain multiple move_to_element() calls:
    submenu = driver.find_element(By.XPATH, “//div[@class=’submenu’]”) actions.move_to_element(element_to_hover).move_to_element(submenu).perform()
  3. Hover Using Offsets: Sometimes, elements may not have distinct locators, requiring precise control using coordinates:

 Python tuple program to join tuples if the initial elements of the sub-tuple are the same

This Python Tuple program will check the initial value of all sub-tuples, if the initial value of two sub-tuple are the same, then it will merge both the tuple.

Input:
[(3,6,7),(7,8,4),(7,3),(3,0,5)]

Output:
[(3,6,7,0,5),(7,8,4,3)]

				
					# take input list value that contains multiple tuples
l1 = [(3, 6, 7), (7, 8, 4), (7, 3), (3, 0, 5)]

# initiate  a variable to store the required output
output = []

# initiate a loop with range of length of list l1.
for i in range(len(l1)):
    # initiate nested loop
    for j in range(i+1, len(l1)):
        # check any two same tuple initial values are same
        if l1[i][0] == l1[j][0]:
            # if two tuple initial value are same, then combine both tuple.
            # and store in output list.
            output.append(tuple(list(l1[i]) + list(l1[j][1:])))
        else:
            continue

print(output)
				
			
Output:
				
					# Output:
[(3, 6, 7, 0, 5), (7, 8, 4, 3)]
				
			

Python tuple program to add row-wise elements in Tuple Matrix

This Python tuple program will add a tuple of values as row-wise elements in the tuple matrix.

Input:
A = [[(‘sqa’, 4)], [(‘tools’, 8)]]
B = (3,6)

Output:
[[(‘sqa’, 4,3)], [(‘tools’, 8,6)]]

				
					var_a = [[('sqa', 4)], [('tools', 8)]]
var_b = (3, 6)
print("Input A : ", var_a)
print("Input B : ", var_b)

output = []

# initiate a loop till length of var_a
for i in range(len(var_a)):
    # get tuple value with the help of indexing of var_a and connvert into list
    l1 = list(var_a[i][0])
    # check if value of i is less than length of var_b
    if i < len(var_b):
        # append new value to the list
        l1.append(var_b[i])
    # now convert list into tuple and append to output list
    output.append([tuple(l1)])

print(output)
				
			

Output:

				
					Input A :  [[('sqa', 4)], [('tools', 8)]]
Input B :  (3, 6)

Output : 
[[('sqa', 4, 3)], [('tools', 8, 6)]]
				
			

Handle Iframes In Selenium

To handle iframes in Selenium using Python, you need to switch the WebDriver’s context to the iframe first using the switch_to.frame() method. Here is a basic guide on working with iframes:

from selenium import webdriver
from selenium.webdriver.common.by import By
import time

# launch Chrome browser
driver = webdriver.Chrome()

#
navigate to a page with an iframe
driver.get("https://www.globalsqa.com/demo-site/frames-and-windows/#iFrame")

#
get iframe web element
iframe_element = driver.find_element(By.XPATH, "//iframe[@name='globalSqa']")

#
switch to iframe with web element
driver.switch_to.frame(iframe_element)

#
get web element of header email inside iframe
header_email = driver.find_element(By.XPATH, "//div[@class='header_mail']")

#
get email from web page with text
print(header_email.text)

# switch default main page
driver.switch_to.default_content()

#
get Tester web element from default content
tester_hub_elem = driver.find_element(By.XPATH, "//div[@id='menu']//a[contains(text(),'Tester')]")

#
click on menu option
tester_hub_elem.click()

time.sleep(5)
driver.close()

Explanation:

  • driver.switch_to.frame(“frame_name_or_id”): Switches to an iframe using its name or id attribute.
  • driver.switch_to.frame(index): Switches to an iframe using its index (0-based).
  • driver.switch_to.frame(iframe_element): Switches using a WebElement representing the iframe.
  • driver.switch_to.default_content(): Switches back to the main document from an iframe.

This approach allows you to interact with elements inside the iframe and switch between the main content and other frames when necessary.


Handle Browser Windows/Tabs

To handle browser tabs in Selenium using Python, you can use methods to switch between windows or tabs using their handles. Here’s a guide on how to open a new tab, switch between tabs, and close

Example Code

from selenium import webdriver
import time

#
Initialize the WebDriver (e.g., using Chrome)
driver = webdriver.Chrome()
driver.implicitly_wait(10)

#
Open the first URL
driver.get("https://www.facebook.com")
print("Current tab URL:", driver.current_url)

#
Save the original window handle
original_tab = driver.current_window_handle

#
Open a new tab using JavaScript (useful for browsers like Chrome)
driver.execute_script("window.open('https://www.google.com', '_blank');")

#
Get the list of all window handles (tabs)
window_handles = driver.window_handles
print("All window handles:", window_handles)

#
Switch to the new tab
driver.switch_to.window(window_handles[1])
print("Switched to new tab URL:", driver.current_url)

#
Pause for a few seconds (optional)
time.sleep(2)
# close google page
driver.close()

#
Switch back to the original tab
driver.switch_to.window(original_tab)
print("Switched back to original tab URL:", driver.current_url)

time.sleep(2)

#
Close the browser
driver.quit()

Explanation:

  • driver.window_handles: Returns a list of window handles (IDs) for all the open tabs/windows.
  • driver.switch_to.window(handle): Switches the WebDriver’s focus to the specified window handle.
  • driver.execute_script(“window.open(‘URL’, ‘_blank’);”): Opens a new tab using JavaScript.
  • To close a specific tab, you can use driver.close() while the focus is on that tab.

This approach allows you to manage multiple tabs efficiently, such as switching between them or closing specific ones as needed.


Take Screenshot Selenium

To take screenshot using Selenium in Python, you can use the save_screenshot() method or get_screenshot_as_file() method. Here’s how you can do it:

Example Code

from selenium import webdriver
from selenium.webdriver.common.by import By

#
Initialize the WebDriver (e.g., using Chrome)
driver = webdriver.Chrome()

#
Navigate to a website
driver.get("https://www.google.com")

#
Take a screenshot and save it as a file
screenshot_path = "google_page.png"
driver.save_screenshot(screenshot_path)
#
Or driver.get_screenshot_as_file(screenshot_path)

print(f"Screenshot saved at: {screenshot_path}")

search_field = driver.find_element(By.NAME, "q")

#
Take a screenshot of the specific element
search_field.screenshot("search_field.png")

#
Close the browser
driver.quit()

Explanation:

  • driver.save_screenshot(“filename.png”): Saves a screenshot of the current browser window with the specified filename.
  • element.screenshot(“filename.png”): Saves a screenshot of the specific element with the specified filename.
  • You can use any valid file path or name as the argument to save the screenshot where you want.

Forward, Back and Refresh Methods

In Selenium with Python, you can use the back(), forward(), and refresh() methods to navigate through browser history and reload pages. Here’s a quick overview of how to use them

Example Code

from selenium import webdriver
import time

#
Initialize the WebDriver (e.g., using Chrome)
driver = webdriver.Chrome()

#
Navigate to a URL
driver.get("https://www.google.com")
print("Initial URL:", driver.current_url)

#
Navigate to another URL
driver.get("https://www.facebook.com")
print("Navigated to:", driver.current_url)

#
Go back to the previous page
driver.back()
print("Back to:", driver.current_url)
#
Back URL should be www.google.com

#
Wait for 2 seconds
time.sleep(2)

#
Move forward in the browser history
driver.forward()
print("Forward to:", driver.current_url)
# Move forward url to www.facebook.com

#
Wait for 2 seconds
time.sleep(2)

#
Refresh the current page ( facebook.com )
driver.refresh()


#
Refresh facebook URL
print("Page refreshed at:", driver.current_url)

#
Close the browser
driver.quit()

Results:

Initial URL: https://www.google.com/
Navigated to: https://www.facebook.com/
Back to: https://www.google.com/
Forward to: https://www.facebook.com/
Page refreshed at: https://www.facebook.com/

Explanation:

  • driver.back(): Navigates back to the previous page in the browser history.
  • driver.forward(): Moves forward in the browser history.
  • driver.refresh(): Refreshes/reloads the current page.

Get Current URL

To get the current URL in Python using Selenium, you can use the current_url property of the WebDriver instance. Here’s how you can do it:

from selenium import webdriver

# Example using Chrome WebDriver
driver = webdriver.Chrome()

# Navigate to a website
driver.get("https://sqatools.in/")

# Get the current URL
current_url = driver.current_url
print("Current URL:", current_url)

# Close the browser
driver.quit()

This will print the current URL of the page that the WebDriver is on.


get_attribute Method

In Selenium with Python, the get_attribute() method is used to retrieve the value of a specific attribute from an HTML element. This can be particularly useful when you need to access values like href for links, src for images, class, id, or other attributes of HTML elements.

Basic Syntax

element = driver.find_element(By.XPATH, 'your_xpath_here')
attribute_value = element.get_attribute('attribute_name')

Example Usage

Here’s an example of how you might use get_attribute() to get the URL from a link:

from selenium import webdriver
from selenium.webdriver.common.by import By

#
Initialize the WebDriver
driver = webdriver.Chrome()
driver.implicitly_wait(10)

#
Open a webpage
driver.get('https://sqatools.in/')

#
Find an element and get its attribute
element = driver.find_element(By.XPATH, "//a[text()='Python Tutorials']")
href_value = element.get_attribute('href')

print("The link URL is:", href_value)

#
Close the WebDriver
driver.quit()

In this example:

  • driver.find_element(By.XPATH, ‘//a[text()=’Python Tutorials’]’) locates an element with the XPath specified.
  • element.get_attribute(‘href’) retrieves the href the attribute value of the located <a> (anchor) element.

Common Use Cases

  • href for link URLs
  • src for image URLs
  • class for CSS class names
  • id for unique identifiers
  • data-* attributes for custom data