CODEWITHSUNDEEP
javascriptseleniumhighcharts
Feedbacker
Feedbacker

Reputation: 959

Highcharts: Trigger showing tooltip programatically with selenium

I have the situation where I need to create some automatic actions with selenium on a third party website (which I assume means that I can't use the highcharts api).

When the third party website is loaded, there is no tooltip element in the html body. It seems that it is dynamically added when the cursor is hovering over the chart.

I would like to for the tooltip to be shown via java selenium. If there is a javascript way to do this please let me know and I will try to transfer it to the selenium code myself

So far I have tried via the browser console with javascript to trigger a 'mouseover' event or to add a 'hover' class to different elements inside the highcharts container but I had no luck, the tooltip is not added to the html body and therefore I cannot select it.

I believe the above issue can be reproduced with the element with highcharts-tooltip class is not added to the html body until the user hovers on the chart.

Upvotes: 0

Views: 1049

Answers (2)

Tash
Tash

Reputation: 196

For those who couldn't get the mouseover event to work, or the mouseenter or the mousemove, I got this working by using the focus event on my line chart points instead. This example is using Cypress, but it can be modified to work with Selenium as well.

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 pain to figure out, and it doesn't seem to want to find the point at all if there is too much data in the set, so it took some finagling. Hopefully this helps someone else.

Using highcharts v11.x, cypress v13.x, and node v20.x

Upvotes: 0

ppotaczek
ppotaczek

Reputation: 39099

You should be able to get global Highcharts variable and call onMouseOver method on a specific point.

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

You can also dispatch mousemove event directly on a svg element.

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

API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#onMouseOver

Upvotes: 1

Related Questions