Introduction

Modern web applications require more than simple click operations. Automation engineers frequently perform mouse movements, drag-and-drop operations, keyboard shortcuts, scrolling, and JavaScript execution when Selenium's default methods cannot interact with certain elements.

This tutorial provides practical exercises covering both Actions Class and JavaScript Executor, progressing from beginner-level concepts to advanced real-world automation scenarios.

Part A – Selenium Actions Class

The Selenium Actions class is used to simulate advanced user interactions such as:

Advertisement
  • Mouse Hover
  • Right Click
  • Double Click
  • Drag and Drop
  • Slider Handling
  • Keyboard Shortcuts

Level 1 – Basic Practice (0–1 Year)

Exercise 1 – Mouse Hover

Objective

Hover over a menu and verify that a submenu or tooltip appears.

Focus

Using:

 
actions.moveToElement(element).perform();
 

Exercise 2 – Right Click

Objective

Perform a context click.

Task

  • Right-click a button
  • Verify the context menu appears
  • Optionally select an option

Focus

Using:

 
actions.contextClick(element).perform();
 

Exercise 3 – Double Click

Objective

Double-click an element.

Task

  • Double-click a button
  • Verify the expected action

Focus

Using:

 
actions.doubleClick(element).perform();
 

Exercise 4 – Keyboard Actions

Objective

Practice keyboard navigation.

Task

  • Enter text
  • Press TAB
  • Move to next field
  • Press ENTER to submit

Focus

Using:

  • Keys.TAB
  • Keys.ENTER

Exercise 5 – Drag and Drop

Objective

Move one element onto another.

Task

  • Drag source element
  • Drop into target
  • Verify successful drop

Focus

Using:

 
actions.dragAndDrop(source, target).perform();
 

Exercise 6 – Slider Handling

Objective

Move a slider to the desired value.

Task

  • Click slider
  • Drag to 50%
  • Verify updated value

Focus

Using:

 
actions.clickAndHold(slider)
       .moveByOffset(xOffset, 0)
       .release()
       .perform();
 

Exercise 7 – Keyboard and Mouse Combination

Objective

Combine multiple user interactions.

Task

  • Hover menu
  • Press ENTER
  • Navigate using TAB

Level 2 – Intermediate Practice (1–3 Years)

Exercise 8 – Hover and Click

Hover over a dropdown menu and click a submenu item.

Exercise 9 – Right Click with Option Selection

Perform a context click and choose options such as:

  • Rename
  • Delete

Exercise 10 – Drag and Drop Using Offset

Drag an element using coordinates instead of a target element.

Exercise 11 – Slider Offset

Move the slider by a specific pixel offset.

Example:

  • +50 pixels

Exercise 12 – Keyboard Shortcuts

Practice:

  • CTRL + A
  • CTRL + C
  • CTRL + V

Verify copy-paste functionality.

Exercise 13 – Right Click with Alert Handling

Right-click an element and handle the resulting alert.

Exercise 14 – Double Click with Editable Content

Double-click editable text and verify changes.

Level 3 – Advanced Practice (3–5 Years)

Exercise 15 – Drag and Drop Between Frames

Handle drag-and-drop across different iFrames.

Exercise 16 – Dynamic Slider

Calculate slider movement dynamically using element size.

Exercise 17 – Multi-Level Hover Menu

Navigate through multiple dynamic menus.

Exercise 18 – Keyboard Navigation Across Forms

Navigate an entire form using:

  • TAB
  • ENTER

Exercise 19 – Drag and Drop Fallback

If dragAndDrop() fails:

Use:

  • clickAndHold()
  • moveToElement()
  • release()

Exercise 20 – Advanced Keyboard Shortcuts

Practice:

  • CTRL + SHIFT + N
  • CTRL + TAB
  • ALT + F4

Exercise 21 – Combined Mouse and Keyboard Workflow

Perform:

  • Hover
  • Right-click
  • Press ENTER

Site-Based Actions Practice

Mouse Hover

Practice

Hover over a menu and verify submenu visibility.

 
actions.moveToElement(menuElement).perform();
 

Right Click

 
actions.contextClick(element).perform();
 

Verify the context menu appears.

Double Click

 
actions.doubleClick(element).perform();
 

Verify the success message.

Keyboard Actions

Use:

 
element.sendKeys(Keys.TAB);
 
 
element.sendKeys(Keys.ENTER);
 

Drag and Drop

 
actions.dragAndDrop(source, target).perform();
 

Verify the target displays a successful drop message.

Slider Handling

 
actions.clickAndHold(slider)
       .moveByOffset(xOffset, 0)
       .release()
       .perform();
 

Combined Actions

Practice the following workflow:

  • Hover menu
  • Open submenu
  • Fill form
  • Navigate using TAB
  • Submit using ENTER

Senior Tester Tip

Experienced automation engineers are expected to automate applications exactly as end users interact with them.

Practice combining hover, drag-and-drop, keyboard shortcuts, sliders, and right-click operations because these scenarios frequently appear in enterprise applications and technical interviews.

Part B – JavaScript Executor

JavaScript Executor allows Selenium to execute JavaScript directly inside the browser.

It is commonly used when Selenium's default methods fail due to:

  • Hidden elements
  • Complex scrolling
  • Dynamic pages
  • AJAX updates
  • Sticky headers
  • Custom UI controls

Level 1 – Basic Practice (0–1 Year)

Exercise 1 – JavaScript Click

Click an element using JavaScript.

Exercise 2 – Scroll Down

Scroll down 500 pixels.

Exercise 3 – Scroll Up

Scroll upward.

Exercise 4 – Scroll to Element

Bring an element into view.

Exercise 5 – Get Page Title

Retrieve the page title using JavaScript.

Scroll to the bottom of the page and verify the footer.

Level 2 – Intermediate Practice (1–3 Years)

Exercise 7 – Click Hidden Element

Click elements hidden behind overlays or modals.

Exercise 8 – Scroll and Click

Scroll an element into view before clicking.

Exercise 9 – Dynamic Scroll

Scroll using values loaded from configuration.

Exercise 10 – Read Dynamic Content

Retrieve text using JavaScript.

Exercise 11 – Highlight Elements

Add a temporary border around elements for debugging.

Exercise 12 – Scroll Inside Tables or Divs

Handle scrollable containers.

Exercise 13 – Click After Scroll

Scroll first, then perform JavaScript click.

Exercise 14 – JavaScript Double Click

Trigger advanced click actions using JavaScript.

Level 3 – Advanced Practice (3–5 Years)

Exercise 15 – JavaScript Click on Dynamic Elements

Handle AJAX-generated elements.

Exercise 16 – Scroll with Wait

Combine scrolling with Explicit Wait.

Exercise 17 – Read Page Properties

Retrieve values such as:

  • URL
  • Page title
  • Body text

Exercise 18 – Create JavaScript Alert

Generate an alert using JavaScript and handle it.

Exercise 19 – Scroll by Percentage

Scroll to:

  • 25%
  • 50%
  • 75%

of the page.

Exercise 20 – JavaScript Click Inside iFrame

Scroll and click elements inside an iFrame.

Exercise 21 – Read Computed Style

Retrieve CSS properties such as:

  • Color
  • Font size
  • Background color

Level 4 – Real-Time Scenarios

Practice solving real project situations.

  • Selenium click fails but JavaScript click succeeds.
  • Scroll to lazy-loaded products.
  • Validate page title using JavaScript.
  • Scroll to sticky headers.
  • Click hidden navigation items.
  • Scroll to a product.
  • Click Add to Cart using JavaScript.
  • Scroll back to the cart icon.

Site-Based JavaScript Executor Practice

JavaScript Click

 
arguments[0].click();
 

Useful when Selenium's normal click operation fails.

Scroll Down

 
window.scrollBy(0,500);
 

Scroll Up

 
window.scrollBy(0,-500);
 

Scroll to Element

 
arguments[0].scrollIntoView(true);
 

Get Page Title

 
return document.title;
 

Highlight Element

 
arguments[0].style.border='3px solid red';
 

Read Computed Style

 
window.getComputedStyle(arguments[0]).getPropertyValue("color");
 

Frequently Asked Questions

Which Actions Class methods should beginners learn first?

Start with:

  • moveToElement()
  • contextClick()
  • doubleClick()
  • dragAndDrop()
  • clickAndHold()
  • moveByOffset()
  • release()

What should you do if dragAndDrop() doesn't work?

Use the manual action chain:

  • clickAndHold()
  • moveToElement()
  • release()

This approach works better on many modern web applications.

When should JavaScriptExecutor be used?

Use JavaScript Executor when:

  • Selenium click fails
  • Elements are hidden
  • Complex scrolling is required
  • Working with dynamic DOM updates
  • Handling sticky headers or lazy-loaded content

What are the most commonly used JavaScript Executor commands?

Click an element:

 
arguments[0].click();
 

Scroll to an element:

 
arguments[0].scrollIntoView(true);
 

Which practice website covers most Actions Class and JavaScript Executor scenarios?

DemoQA provides practice pages for:

  • Menus
  • Buttons
  • Drag and Drop
  • Sliders
  • Text Box
  • Automation Practice Form

making it one of the best websites for mastering advanced Selenium interactions.