Using Selenium to trigger the display of tooltips programmatically in Highcharts

I am faced with a situation where I need to automate some actions using selenium on a third-party website, which likely means I cannot utilize the highcharts API.

Upon loading the third-party website, there is no tooltip element present in the HTML body. It appears that it gets dynamically added when the cursor hovers over the chart.

I am looking to display the tooltip using Java Selenium. If there is a way to achieve this using JavaScript, please share and I will attempt to incorporate it into the Selenium code myself.

So far, my attempts through the browser console with JavaScript to trigger a 'mouseover' event or add a 'hover' class to different elements within the highcharts container have been unsuccessful. The tooltip does not show up in the HTML body, making it impossible for me to select it.

I suspect the issue mentioned above can be replicated if the element with the highcharts-tooltip class is only added to the HTML body when the user hovers over the chart.

javascriptseleniumhighcharts

Answer №1

To access the global Highcharts variable and trigger the onMouseOver method on a specific point, follow these steps.

Highcharts.charts[0].series[0].points[0].onMouseOver();

You can also simulate the mousemove event directly on an SVG element by using the following code snippet.

document.getElementsByClassName('highcharts-point')[0].dispatchEvent(new Event('mousemove', { 'bubbles': true }));

For more information, refer to the Highcharts API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#onMouseOver

Answer №2

If you're struggling to make the mouseover, mouseenter, or mousemove events work, I found a workaround by using the focus event on my line chart points instead. This method worked for me with Cypress, but can be adapted for Selenium too.

const identifier = '.highcharts-markers.highcharts-series-0.highcharts-line-series.highcharts-color-0.series-weightMeasurements.highcharts-tracker'

cy.get('[id="weight-card"]').find(identifier).first().find('path.highcharts-point').eq(3).trigger('focus', {bubbles: true, cancelable: false})

It was a bit challenging to figure out and it may struggle to find the point when dealing with a large dataset, so some tweaking might be necessary. Hopefully, this solution will benefit others facing similar issues.

This code is based on highcharts v11.x, cypress v13.x, and node v20.x

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

Activate the submission button on AngularJS once a correctly formatted email is provided

Currently working on an AngularJS demo to better understand its functionalities. The next task on my list is to enable the submit button only when a valid email address is entered. I'm seeking guidance on how to approach this and what concepts I need ...

javascriptangularjs

Unable to initiate Firefox 0.19.1 using Selenium version 3.10.0

I'm experiencing difficulty launching Firefox. My Selenium version is 3.10.0 and my Firefox version is 0.19.1. Sample code snippet: public class SampleClass { public static void main(String[] args) { System.setPrope ...

javaseleniumselenium-webdriverautomated-testsgeckodriver

Discovering elements that feature specific text is a breeze when utilizing XPath in conjunction with Selenium and Python

Having experimented with this code snippet: driver.find_elements_by_xpath("//*[contains(text()),'panel')]") I noticed that it is only returning one result instead of the expected 25. My goal is to locate all xpath id's on a webpage in sel ...

seleniumselenium-webdriverxpathwebdriverwaitxpath-1.0

"Discover the steps to seamlessly integrating Snappuzzle with jQuery on your

I am a beginner when it comes to javascript and jquery, and I recently came across the snappuzzle plugin which caught my interest. After visiting snappuzzle plugin, I decided to download and link jQuery, jQuery UI, and the snappuzle.js in my HTML file. I a ...

javascriptjqueryhtml

Is there a way to specifically target CSS media queries if the device resolution is similar, but the device screen size (measured in inches) varies

I possess two distinct gadgets. 1. T2 light - LCD : 15,6“ Resolution : 1920 × 1080 Device pixel ratio : 1.4375 CSS media query target : width = 1336px 2. T2 mini - LCD : 11,6“ Resolution : 1920 × 1080 Device pixel ratio : 1.4375 CSS media query t ...

javascriptandroidjquerycss

Organize information by time intervals using JavaScript

I am currently facing an issue where I need to dynamically sort data from the server based on different fields. While sorting is working flawlessly for all fields, I am encountering a problem with the time slot field. The challenge lies in sorting the data ...

javascriptangulartypescript

Optimal Placement for FB.Event.subscribe

Here is the code I have implemented on my website for the Facebook Like and Share buttons. The functionality works seamlessly. When I click the Like button, a notification is promptly displayed on my Facebook profile page. Additionally, Facebook automatic ...

phpjavascriptfacebook

How can I incorporate a child component into a separate component within Angular version 14?

Currently working with Angular 14 and facing a challenge with including a child component from another module into a standalone component. The structure of the standalone component is as follows: <div> <child-component></child-component& ...

javascriptangularmodulecomponentsangular14

Global asynchronous functionality can be enabled in JavaScript

Wouldn't it be convenient to have the option to enable async functionality in the global scope? This way, there would be no need to wrap all asynchronous operations within a function. I'm curious if this is achievable in browser JavaScript or per ...

javascriptnode.jsasynchronous

How can I differentiate between server-side and client-side JavaScript in Node/Express?

I decided to challenge myself by working on a JavaScript project to enhance my skills, but I am facing some difficulties distinguishing between the client-side and server-side code. Currently, the setup involves a Node app with ExpressJS as a dependency. ...

javascriptnode.jsexpress

Performing a mouse hover action with Selenium WebDriver

Can someone guide me on how to perform a mouse hover action in Selenium WebDriver? The mouse hover action needs to be done on a tab where it hovers and then clicks on the tab. Is there a way to achieve this using JavaScript executor and java? ...

javajavascriptselenium-webdriver

The error message "firebase.initializeApp is not defined" indicates that the object is not properly initialized

Every time I try to open the debugger in Safari, I encounter an error indicating that 'undefined' is not recognized as an object when evaluating 'firebase.initializeApp'. The error specifically points to the line of code: firebase.initi ...

javascriptnode.jsfirebaseexpressfirebase-realtime-database

What steps do I need to take to incorporate a type command into my selenium script and enable headless mode at the same time?

I have been working on the following selenium script: from selenium import webdriver PATH= r"C:\Users\Hamid\Desktop\Selenium\chromedriver.exe" driver=webdriver.Chrome(PATH) driver.get("https://www.google.com/") ...

pythonselenium

Why isn't Google Map showing up in my HTML <div> section?

I am currently working on a web page that consists of two containers. The mainmapdiv container covers the entire page, while the mainhomediv container is positioned on top of the mainmapdiv. My goal is to hide the mainhomediv container and show a Google Ma ...

javascriptjqueryhtmlcssgoogle-maps

Text centered on hover for figure caption

Check out this fiddle http://jsfiddle.net/sLdhsbou/ where I am trying to center the "x" that appears on hover perfectly no matter what size the image is. Also, why does the transition not occur when moving the mouse outside of the figure, unlike when movi ...

javascriptcss

Shader material for border and overlay effects in THREE.js

Can a sphere in THREE.js be given a material shader to achieve a unique visual effect like the one shown here? (I'm specifically interested in replicating the border, glow, and streak on the red sphere.) https://i.sstatic.net/rjfkm.png If this is po ...

javascriptthree.js

The issue of the file path not being properly configured when trying to use 'save_screenshot' for Python Selenium on Ubuntu

When using Python Selenium to capture a screenshot of a test in Ubuntu, I encountered an issue where the saved screenshot was taking the path name as the file name and getting saved directly on the desktop. The code worked perfectly on Windows where the fi ...

pythonseleniumubuntuselenium-webdriver

Hiding a Div Using jQuery Depending on User's Choice

Currently, I am in the process of developing an employee directory using AJAX/jQuery with the assistance of the Random User Employee Directory API. You can access the data feed that I am utilizing by following this link: I have successfully created a webp ...

javascriptjqueryjsonajax

Dealing with AJAX error in pure JavaScript

I have been attempting to address AJAX errors using the code below, but unfortunately, it does not seem to be effective. function ajaxPost(url, data, success, error) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function () ...

javascriptajax

Tips for incorporating personalized form and input directives in AngularJS while addressing issues with transcluded scope

Over the last few days, I attempted to implement something along these lines: %myform(name='somename' ng-controller='whatever') %myinput(ng-model='user.firstName' ... The controller has a user structure with firstName, l ...

javascripthtmlangularjsformshaml