Selenium Actions Class Practice & JavaScript Exercises

Selenium Actions Class Practice Exercises (With Code)

Modern web applications need more than click() and sendKeys(). Hover menus, context menus, drag and drop, sliders, keyboard shortcuts and lazy-loaded pages all require additional Selenium techniques.

This practice set gives you 21 Actions-class exercises and 21 JavaScriptExecutor exercises, from beginner to senior level, with solution code for the key patterns and a practice page for each.

Practice Sites

Part A — The Actions Class

Selenium's Actions class simulates more realistic mouse and keyboard interactions, including:

• Hover
• Right-click
• Double-click
• Drag and drop
• Click and hold
• Keyboard combinations
• Modifier-key interactions
• Coordinate-based movement

Build an action chain and finish with perform().

In Selenium 4, perform() builds and executes the action sequence automatically.

Solution Patterns

Actions actions = new Actions(driver);

// Hover, then click a submenu item
actions.moveToElement(
        driver.findElement(By.id("menu"))
).perform();

new WebDriverWait(driver, Duration.ofSeconds(5))
        .until(ExpectedConditions.elementToBeClickable(
                By.linkText("Settings")
        ))
        .click();

// Right-click and double-click
actions.contextClick(
        driver.findElement(By.id("rightClickBtn"))
).perform();

actions.doubleClick(
        driver.findElement(By.id("doubleClickBtn"))
).perform();

// Drag and drop
actions.dragAndDrop(source, target).perform();

// Manual drag-and-drop fallback
actions.clickAndHold(source)
        .moveToElement(target)
        .release()
        .perform();

// Slider
WebElement slider = driver.findElement(
        By.cssSelector("input[type='range']")
);

int width = slider.getSize().getWidth();

// Move relative to the slider
actions.clickAndHold(slider)
        .moveByOffset(0, 0)
        .release()
        .perform();

actions.clickAndHold(slider)
        .moveByOffset(width / 4, 0)
        .release()
        .perform();

// Keyboard: select all + copy + paste
actions.click(source)
        .keyDown(Keys.CONTROL)
        .sendKeys("a")
        .sendKeys("c")
        .keyUp(Keys.CONTROL)
        .click(target)
        .keyDown(Keys.CONTROL)
        .sendKeys("v")
        .keyUp(Keys.CONTROL)
        .perform();

On macOS, use Keys.COMMAND instead of Keys.CONTROL for the corresponding keyboard shortcuts.

Selenium 4 uses the element's center as the origin for moveToElement(), which is important when working with sliders and offsets.

More: The Selenium Actions Class.

Level 1 — Basics (0–1 Year)

1. Hover

Hover over a menu or image and verify that the submenu or caption appears.

2. Right-Click

Open a context menu and verify that it appears, or verify the alert triggered by the interaction.

3. Double-Click

Double-click a button and verify the success message.

4. Keyboard Basics

Type into a field, press TAB to move to the next field, and press ENTER to submit.

5. Drag and Drop

Drag a box into a target and verify that the target's text changes to "Dropped".

6. Slider

Move a slider to approximately 50% and verify the displayed value.

7. Combine Multiple Actions

Hover over a menu, press ENTER on an item, and then use TAB to navigate through the next page.

Level 2 — Intermediate (1–3 Years)

8. Hover and Click

Hover over a dropdown menu and click a submenu item using an explicit wait.

9. Context Menu Option

Right-click an element and select an option such as Rename or Delete.

10. Drag by Offset

Drag an element by a specific coordinate offset using:

actions.dragAndDropBy(source, x, y).perform();

11. Slider by Pixels

Move a slider by approximately 50 pixels and verify the resulting value.

12. Copy and Paste

Use:

CTRL+A → CTRL+C → CTRL+V

between two fields and verify that the expected text was copied.

13. Right-Click with Alert

Perform a context click that opens a JavaScript alert and handle the alert.

14. Double-Click to Edit

Double-click an inline-editable cell, change the text and verify that the updated value was saved.

Level 3 — Advanced (3–5 Years)

15. Drag Between Frames

Drag an element inside an iframe.

First switch into the appropriate frame, then perform the interaction.

16. Dynamic Slider

Calculate the required offset from the slider width and target value so that your code can move the slider to arbitrary values from 0 to 100.

17. Multi-Level Menu

Navigate a three-level hover menu reliably.

Wait for each level to become available before interacting with it.

18. Keyboard-Only Form

Complete an entire form using:

• TAB
• Arrow keys
• SPACE
• ENTER

This can also provide useful accessibility coverage.

19. HTML5 Drag and Drop

On pages that use native HTML5 drag events, dragAndDrop() may not trigger the expected browser events.

Try the following chain:

actions.clickAndHold(source)
        .moveToElement(target)
        .release()
        .perform();

If that still fails, explain why a JavaScript-based drag simulation may be required.

20. Modifier-Key Clicks

Use:

• CTRL + click on Windows/Linux
• COMMAND + click on macOS
• SHIFT + click for range selection

to select multiple items or a range.

21. Combined Workflow

Create a workflow such as:

Hover → Right-click → Choose an option with the keyboard → Verify the result

This is useful for testing whether several interaction mechanisms work together correctly.

Browser-Level Shortcuts

Avoid relying on WebDriver to simulate browser or operating-system shortcuts such as opening a new incognito window or pressing ALT+F4.

Those operations occur outside the web page itself.

Instead, use WebDriver functionality such as:

driver.switchTo().newWindow(WindowType.TAB);

and:

driver.quit();

Part B — JavaScriptExecutor

JavascriptExecutor allows Selenium to execute JavaScript inside the current web page.

It can be useful for:

• Scrolling
• Reading values
• Inspecting properties
• Reading computed styles
• Debugging
• Handling a few stubborn interaction scenarios

However, JavaScript interaction should not automatically replace normal WebDriver interaction.

A JavaScript click can bypass conditions that would prevent a real user from clicking the element. For example, it can sometimes interact with an element that is hidden or covered.

Therefore, use JavaScript deliberately rather than as the default solution.

Solution Patterns

JavascriptExecutor js = (JavascriptExecutor) driver;

// Scroll to an element
js.executeScript(
        "arguments[0].scrollIntoView({block: 'center'});",
        element
);

// Scroll down
js.executeScript("window.scrollBy(0, 500);");

// Scroll to bottom
js.executeScript(
        "window.scrollTo(0, document.body.scrollHeight);"
);

// JavaScript click
js.executeScript(
        "arguments[0].click();",
        element
);

// Read page title
String title = (String) js.executeScript(
        "return document.title;"
);

// Read computed color
String color = (String) js.executeScript(
        "return window.getComputedStyle(arguments[0])"
        + ".getPropertyValue('color');",
        element
);

// Highlight an element for debugging
js.executeScript(
        "arguments[0].style.border='3px solid red';",
        element
);

// Scroll inside a container
js.executeScript(
        "arguments[0].scrollTop = arguments[0].scrollHeight;",
        scrollableDiv
);

More: JavaScriptExecutor & Typecasting.

Level 1 — Basics (0–1 Year)

1. JavaScript Click

Click a button using:

arguments[0].click()

Then compare the behavior with a normal Selenium click.

2. Scroll Down

Scroll the page down by 500 pixels.

3. Scroll Up

Scroll the page up by 500 pixels.

4. Scroll to an Element

Use scrollIntoView() to bring a particular element into view.

5. Read the Page Title

Retrieve the page title using JavaScript and assert its value.

6. Scroll to the Footer

Scroll to the bottom of the page and verify that a footer link is visible.

Level 2 — Intermediate (1–3 Years)

7. Covered Element

A sticky header blocks a normal click.

First investigate the cause. Try scrolling the element to the center and waiting for overlays to disappear.

Only then consider whether JavaScript interaction is appropriate.

8. Scroll Then Click

Find an element far down the page, scroll it into view and click it.

9. Configurable Scrolling

Read the scroll distance from a configuration file instead of hardcoding the value.

For example:

scroll.distance=500

Then use the configured value in your JavaScript execution.

10. Read Dynamic Values

Use JavaScript to retrieve values that Selenium cannot easily access through the standard element APIs.

For example, retrieve an input's current value:

String value = (String) js.executeScript(
        "return arguments[0].value;",
        element
);

11. Highlight Elements

Temporarily add a border around elements during execution to make debugging and screenshots easier.

12. Scroll Inside a Container

Scroll a specific table, panel or <div> rather than the entire page.

13. Lazy Loading

Scroll until a lazy-loaded product or element appears, wait for it to become available, and then interact with it.

14. Dispatch an Event

Trigger events such as dblclick or change with JavaScript and explain when such direct event simulation is appropriate.

Level 3 — Advanced (3–5 Years)

15. AJAX-Generated Elements

Wait for dynamically generated elements using an explicit wait, then interact with them.

JavaScript does not replace proper synchronization.

16. Scroll with Wait

Combine scrolling with explicit waits on an infinite-scroll page.

17. Page Properties

Read properties such as:

• Current URL
• Page title
• document.readyState
• Body text

Example:

String readyState = (String) js.executeScript(
        "return document.readyState;"
);

18. JavaScript Alert

Create an alert:

js.executeScript("alert('Hi');");

Then handle it with:

driver.switchTo().alert().accept();

19. Scroll by Percentage

Calculate the document height and scroll to:

• 25%
• 50%
• 75%
• 100%

of the page.

20. Inside an Iframe

Switch into the iframe first, then use JavaScript to scroll or interact with elements inside the frame. Related: Selenium Frames & iFrames Practice.

21. Computed Styles

Use getComputedStyle() to verify properties such as:

• Color
• Font size
• Background color
• Display state
• Visibility

Example:

String backgroundColor = (String) js.executeScript(
        "return window.getComputedStyle(arguments[0])"
        + ".getPropertyValue('background-color');",
        element
);

Real-Project Scenarios

Scenario 1 — ElementClickInterceptedException

A normal click fails with an ElementClickInterceptedException.

Before using JavaScript, investigate:

1. Is there an overlay?
2. Is a loading spinner covering the element?
3. Is a sticky header blocking the click?
4. Is the element outside the viewport?
5. Is the element actually enabled?

Wait for the overlay to disappear or scroll the element into a usable position before reaching for a JavaScript click.

Scenario 2 — Lazy-Loaded Product

Build a workflow that:

Scrolls to a lazy-loaded product → waits for it → adds it to the cart → scrolls back → verifies the cart count.

This combines JavaScript scrolling, explicit waits and normal Selenium interactions.

Scenario 3 — Validate Computed Styles

Find a highlighted "Sale" price and verify that its computed CSS color matches the expected value.

This is useful when the visual state is generated dynamically through CSS or JavaScript.

See how WebDriver commands reach the browser step by step in the Selenium WebDriver Visualizer.

From Real Projects

I've used Selenium WebDriver with Java and TestNG in Eclipse on Canolog, an automotive dealership management system, and on Testsigma. The practical skills behind this page — identifying elements by id, class name and XPath, handling the browser, and structuring scripts in POM classes — were part of my daily automation work, along with running scripts on Chrome and Firefox. Practice each exercise until you can write it without looking anything up. Use JavaScriptExecutor as a last resort — it can click elements a real user couldn't reach. Further reading: Selenium Text Box, Button, Radio Button & Checkbox Practice.

Frequently Asked Questions

Which Actions methods should beginners learn first?

Start with:

• moveToElement()
• contextClick()
• doubleClick()
• dragAndDrop()
• clickAndHold()
• moveByOffset()
• release()
• keyDown()
• keyUp()
• perform()

These cover most common mouse and keyboard interaction scenarios.

What if dragAndDrop() doesn't work?

Try the manual action chain:

actions.clickAndHold(source)
        .moveToElement(target)
        .release()
        .perform();

If the page relies on native HTML5 drag events and the Selenium mouse actions still do not trigger the required events, a JavaScript-based drag simulation may be necessary.

When should JavaScriptExecutor be used?

Use JavaScriptExecutor for tasks such as:

• Scrolling
• Reading specific DOM values
• Inspecting computed styles
• Debugging
• Special interaction cases where normal WebDriver commands cannot achieve the required behavior

Avoid JavaScript clicks as the default approach because they can bypass real user interaction constraints and hide application bugs.

Is build() still needed before perform()?

No.

In Selenium 4, perform() builds and executes the action sequence automatically.

Which practice sites cover these scenarios?

The Internet and DemoQA provide useful pages for practicing:

• Hover
• Context menus
• Double-click
• Drag and drop
• Sliders
• Keyboard actions
• Infinite scrolling

See the Practice Sites table at the beginning of this guide for direct links.

Related

• The Complete Selenium Practice Roadmap
• Windows, Tabs & Waits Practice
• Top 50 Selenium Interview Questions
•