Actions API

🎮 Selenium Actions API: Become the Puppet Master of Browsers!

Imagine you’re a puppet master holding strings attached to a hand puppet. That puppet can hover over toys, click buttons, drag things around, and even type on a keyboard. The Actions API is YOUR set of magical strings to control a browser just like that puppet!

🌟 What is the Actions API?

Think of regular Selenium commands like asking someone politely: “Please click this button.”

But the Actions API is like taking over someone’s hands and moving them yourself—hovering here, clicking there, dragging this, dropping that!

# Your magical puppet strings
from selenium.webdriver import ActionChains

# Create your puppet master controls
actions = ActionChains(driver)

🖱️ Mouse Hover Actions

The Story

When you walk into a toy store and hold your hand over a toy (without touching it), sometimes a label pops up showing the price. That’s hovering!

In websites, hovering over menus makes them expand, hovering over buttons changes their color.

How It Works

from selenium.webdriver import ActionChains

# Find the toy (element) to hover over
menu = driver.find_element(By.ID, "dropdown")

# Create puppet master & hover
actions = ActionChains(driver)
actions.move_to_element(menu)
actions.perform()  # Do it!

Real Example

# Hover to reveal hidden menu
nav_item = driver.find_element(By.CLASS_NAME, "nav-menu")
ActionChains(driver)\
    .move_to_element(nav_item)\
    .perform()
# Now the dropdown appears!

👆 Click and Double-Click

The Story

Single Click = Tapping a doorbell once → “Ding!” Double Click = Tapping it fast twice → “Ding-Ding!” (opens something special)

Single Click

button = driver.find_element(By.ID, "submit-btn")

ActionChains(driver)\
    .click(button)\
    .perform()

Double Click

folder = driver.find_element(By.CLASS_NAME, "folder-icon")

# Double-click to open the folder
ActionChains(driver)\
    .double_click(folder)\
    .perform()

Click at Specific Spot

# Click 50 pixels right, 30 pixels down from element
ActionChains(driver)\
    .move_to_element_with_offset(element, 50, 30)\
    .click()\
    .perform()

🖱️ Right-Click Context Menu

The Story

Remember when you right-click on your desktop and a magic menu appears with options like “New Folder” or “Paste”? That’s a context menu!

The Actions API calls this context_click().

How It Works

item = driver.find_element(By.ID, "my-file")

# Right-click on it
ActionChains(driver)\
    .context_click(item)\
    .perform()

# Now you can interact with the menu that appears!

Complete Example

# Right-click an image to see options
image = driver.find_element(By.TAG_NAME, "img")

actions = ActionChains(driver)
actions.context_click(image)
actions.perform()

# Click "Save Image" from the context menu
save_option = driver.find_element(By.ID, "save-image")
save_option.click()

🎒 Drag and Drop

The Story

Imagine picking up a toy from one box, carrying it across the room, and dropping it into another box. That’s drag and drop!

You need:

1. Source → Where to pick up
2. Target → Where to drop

Method 1: Simple Drag & Drop

source = driver.find_element(By.ID, "draggable")
target = driver.find_element(By.ID, "droppable")

ActionChains(driver)\
    .drag_and_drop(source, target)\
    .perform()

Method 2: Step by Step (More Control)

source = driver.find_element(By.ID, "item")
target = driver.find_element(By.ID, "basket")

actions = ActionChains(driver)
actions.click_and_hold(source)    # Pick up
actions.move_to_element(target)   # Carry
actions.release()                 # Drop
actions.perform()

Method 3: Drag by Pixels

slider = driver.find_element(By.ID, "slider-handle")

# Drag 100 pixels to the right
ActionChains(driver)\
    .drag_and_drop_by_offset(slider, 100, 0)\
    .perform()

⌨️ Keyboard Actions

The Story

Imagine a ghost sitting at your computer, typing messages and pressing special keys like Ctrl+C to copy! That’s keyboard actions!

Typing Text

input_box = driver.find_element(By.ID, "search")

ActionChains(driver)\
    .click(input_box)\
    .send_keys("Hello World!")\
    .perform()

Special Keys

from selenium.webdriver.common.keys import Keys

# Press Enter
ActionChains(driver)\
    .send_keys(Keys.ENTER)\
    .perform()

# Press Tab to move to next field
ActionChains(driver)\
    .send_keys(Keys.TAB)\
    .perform()

Key Combinations (Shortcuts)

from selenium.webdriver.common.keys import Keys

# Ctrl+A (Select All)
ActionChains(driver)\
    .key_down(Keys.CONTROL)\
    .send_keys('a')\
    .key_up(Keys.CONTROL)\
    .perform()

# Ctrl+C (Copy)
ActionChains(driver)\
    .key_down(Keys.CONTROL)\
    .send_keys('c')\
    .key_up(Keys.CONTROL)\
    .perform()

Hold and Release Keys

# Hold Shift while clicking (multi-select)
ActionChains(driver)\
    .key_down(Keys.SHIFT)\
    .click(element1)\
    .click(element2)\
    .key_up(Keys.SHIFT)\
    .perform()

📜 Scroll Actions

The Story

Imagine a very long treasure map. You can’t see it all at once, so you roll it up and down to see different parts. That’s scrolling!

Scroll to Element

footer = driver.find_element(By.ID, "page-footer")

ActionChains(driver)\
    .scroll_to_element(footer)\
    .perform()

Scroll by Amount (Pixels)

# Scroll down by 500 pixels
ActionChains(driver)\
    .scroll_by_amount(0, 500)\
    .perform()

# Scroll up by 300 pixels
ActionChains(driver)\
    .scroll_by_amount(0, -300)\
    .perform()

# Scroll right by 200 pixels
ActionChains(driver)\
    .scroll_by_amount(200, 0)\
    .perform()

Scroll from Origin

from selenium.webdriver import ScrollOrigin

# Scroll from specific element
element = driver.find_element(By.ID, "scroll-container")
origin = ScrollOrigin.from_element(element)

ActionChains(driver)\
    .scroll_from_origin(origin, 0, 200)\
    .perform()

Scroll Inside a Container

# For scrollable divs (not the whole page)
scroll_box = driver.find_element(By.ID, "chat-window")

ActionChains(driver)\
    .move_to_element(scroll_box)\
    .scroll_by_amount(0, 300)\
    .perform()

🎯 Chaining Actions Together

The superpower of Actions API is chaining multiple actions!

# Complete workflow in one chain
ActionChains(driver)\
    .move_to_element(menu)\
    .click()\
    .send_keys("search term")\
    .send_keys(Keys.ENTER)\
    .perform()

🗺️ Actions API Flow

graph TD
    A["Create ActionChains"] --> B["Add Actions"]
    B --> C[".move_to_element"]
    B --> D[".click / .double_click"]
    B --> E[".context_click"]
    B --> F[".drag_and_drop"]
    B --> G[".send_keys"]
    B --> H[".scroll_to_element"]
    C --> I["Call .perform"]
    D --> I
    E --> I
    F --> I
    G --> I
    H --> I
    I --> J["Actions Execute!"]

✨ Quick Reference Table

🎓 Remember This!

1. Always call .perform() at the end — nothing happens without it!
2. Chain actions for complex interactions
3. Use ActionChains(driver) to create your puppet master
4. Hover reveals hidden things
5. Right-click opens context menus
6. Key combos need key_down() and key_up()

🚀 You’re now a Browser Puppet Master! Go control those web elements like magic!