Master the art of maneuvering the mouse pointer and clicking using Selenium Webdriver in JavaScript

I am a beginner in using Selenium and encountering challenges with basic tasks.

My current struggle involves moving the mouse to specific coordinates (x, y) on a webpage and clicking, but so far, I have not been successful. Despite referring to the documentation, I am utilizing {bridge: true} due to the chromewebdriver implementation.

Below is the code snippet:

var webdriver = require('selenium-webdriver'),
  By = webdriver.By,
  until = webdriver.until,
  Origin = webdriver;


var driver = new webdriver.Builder()
  .forBrowser('chrome')
  .build();


driver.get('http://www.localhost:4000/');

var actions = driver.actions({ bridge: true });

actions.mouse().move({x: 400, y: 1100, duration: 2000, origin: Origin.VIEWPORT});

Another query arises regarding the fourth parameter origin origin: Origin.VIEWPORT. I am uncertain if it was imported correctly.

Furthermore, I am unsure of how to trigger the click event as there is no selected element. My goal is to click at the final position of the mouse pointer.

Answer №1

It appears that you may have forgotten to add the .perform(); method.

A common approach for resolving this issue is by utilizing Protractor framework.

// Instead of selecting a specific element as the target, you can specify an offset
// in pixels. In this example, a double-click is performed slightly to the right of an element.
browser.actions().
    mouseMove(element).
    mouseMove({x: 50, y: 0}).
    doubleClick().
    perform();

You have the option to utilize mouseMove for the x and y coordinates of the body element.

We hope this guidance proves beneficial to you!

UPDATE

If the previous solution does not yield the desired outcome, consider trying a different approach like the one below:

browser.actions() .mouseMove(element, { x: 20, y: 75, }) .perform().then(() => browser.actions() .click() .perform());

Answer №2

WebDriver driver = new FirefoxDriver();
JavascriptExecutor jsExecutor = (JavascriptExecutor)driver;
jsExecutor.executeScript("document.getElementById('[specific id]').click();");

Include a time delay using Thread.Sleep(); to ensure the page has finished loading before attempting to click on an element.

Answer №3

This solution worked perfectly for me

//Locate a button
WebElement button = driver.findElement(By.xpath("//div[@class='page-button']"));
//Create a new object to perform mouse movement
Actions clickAction = new Actions(driver).click(button);
//Execute the action
clickAction.build().perform();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on using Selenium and C# to interact with the element in the provided HTML

I am trying to send out an Instagram shipment using a mobile emulator, but I am having trouble clicking on a button for the new shipment. I have attempted various methods to click the button, but so far, none of them have been successful. public static vo ...

Parse the JSON file in the local directory and extract specific keys for each object, storing them in an array

Seeking to retrieve data from a local JSON file that contains nodeIDs with longitude, latitude, and adjacent nodeIDs as values. For example: [{"33583379": {"lat": 40.7046387, "lon": -74.0167729, "adj": ["33583379", "1659428533"]}, "33583380": {"lat": 40.7 ...

The callback function in AngularJS filters

I'm currently using an AngularJS filter to sort through a list of items. Here is the Jade markup I am using: li(ng-repeat="parcel in parcels | filter : filterActiveAreaParcels") After the filter function runs and the elements are displayed in the DO ...

Issue with wp_ajax function not being triggered in Wordpress

Attempting to implement my first AJAX Function in Wordpress 4.3. I created a plugin called "calipso". Within the plugin, there are two files: calipso.php : <?php /** * @package calipso * @version 1.0 */ /* Plugin Name: calipso Plugin URI: http://www. ...

Looping animations using AngularJS

I have implemented a custom directive to trigger an animation on an element when a specific field is empty on the page. However, I am facing an issue where the animation only works once when the user clicks the button with the directive. Subsequent clicks ...

Learn the technique in Vue to separate a string using commas and store the values in an array

As a Ruby enthusiast, I am delving into the world of Vue. In my project, users can input multiple styleCodes separated by commas. I aim to store these styleCodes in an array for flexible length calculations. See my code snippet below: <template> &l ...

Differences between Selenium IDE and Selenium Web Driver

When it comes to automating web projects, which option is best? Selenium IDE Selenium WebDriver I am looking to automate a web application and this decision is really causing me confusion. ...

What is the best way to transfer values or fields between pages in ReactJS?

Is there a way to pass the checkbox value to the checkout.js page? The issue I'm facing is on the PaymentForm page, where my attempts are not yielding the desired results. Essentially, I aim to utilize the PaymentForm fields in the checkout.js page as ...

What steps can I take to generate a JSON array with this unique format?

The data I received from my angular form is in the array format: [{"name":"Rose","number":"+919224512555"},{"name":"smith","number":"+91975555224"}]. The data represents a dynamic table with columns for name and number. I need to convert the array above i ...

Tips for showcasing data in the autocomplete feature

I have implemented the following code to show values: function retrieveValues(input) { var xhttp; if (input.length == 0) { document.getElementById("output").innerHTML = ""; return; } xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = functi ...

Performing math calculations on data inputted through a form in React Native

As a beginner in React Native, I am working on a simple app that consists of two screens: Calculator and Result. The Calculator screen has two input fields that only accept numeric values. Upon pressing the result button, the app should navigate to the Res ...

How to ensure the table fits perfectly on the screen using JQueryMobile and Cordova?

I've been working on a JavaScript function that creates a dynamic page and displays data fetched from a database. However, I've encountered an issue where the displayed data overflows past the width of the mobile screen. Is there a way to ensure ...

What could be causing the ERROR TypeError in an Angular form where "_co.service.formData" is undefined?

My attempt to create a form in Angular 7 has resulted in an error message: ERROR TypeError: "_co.service.formData is undefined" Here is the HTML code for the component: <form (sumbit)="signUp(form)" autocomplete="off" #form="ngForm"> <div clas ...

Extracting information from a webpage with Selenium

I've successfully navigated to a point where I can access this particular website After entering a vehicle registration number, clicking continue, confirming it's the correct vehicle and proceeding to the next page. Now I'm trying to find ...

Exploring the inner workings of self-referencing mechanics in functions

In a recent coding scenario, I encountered this situation: I attempted to define the func1() function and add several static methods to it simultaneously by passing it through the _init() function along with a hash containing properties to attach. However, ...

Creating TypeScript Classes - Defining a Collection of Objects as a Class Property

I'm trying to figure out the best approach for declaring an array of objects as a property in TypeScript when defining a class. I need this for a form that will contain an unspecified number of checkboxes in an Angular Template-Driven form. Should I ...

Unable to utilize WebDriverWait class

Recently, I started learning Java with Selenium and I am facing difficulty in using the WebDriverWait class. Even after adding dependencies for selenium and webdriver manager, and importing the class into my java file, I still encounter an issue: WebDrive ...

Is there a way to replicate input data from one website onto a totally separate platform?

I am currently working on a hotel website using the user-friendly WYSIWYG site builder, Wix (yes, I know, don't judge). Like all hotel websites, we need a form for customers to enter their details for reservations and other purposes. However, there&a ...

Avoid displaying the div style when printing by utilizing CSS and JavaScript

How can I use Javascript and CSS to print content in a div? My main div has an id of 'preview' and the content is fetched from a database using PHP and MySQL. However, when I try to print the page, the style of the 'preview' div does no ...

Python mysteriously bypasses a line of code, choosing not to execute a function

It may seem confusing, but there's a function calling another function that should execute selenium.webdriver.Chrome().get('some_website'). Here is a simplified version of the code that works perfectly fine: from selenium.webdriver import Ch ...