Mouse over all elements with the same class name

I need to verify data that are presented in a graph. Basically, the graph displays different data points that represent the prices of different products. These data points have the same class name (“data shape circle”), but their xpaths and cssSelectors are dynamic. Example of the cssSelector of one data point: #pricing-graph > svg > g > path:nth-child(10). I need to mouse over on each data point and verify if their tooltip displays correct data. How can I mouse over each of the data points using their class name? I tried to use cssSelector and set its value by using setSelectorValue, but it’s not efficient.

Hi Nora

If the text of the tooltip is stored in the title attribute of the elements, then you could verify that.

https://docs.katalon.com/display/KD/[WebUI]+Verify+Element+Attribute+Value

However, this will not display the tooltip. But that’s okay… because browsers, by convention, always display the title attribute as a tooltip, you (we) do not need to test it (it’s not our job to test the browsers themselves).

If your tooltips are stored elsewhere and your page is using JavaScript to display them, then I’ll need more information about the HTML structure to proceed.

Hope this helps.

Hi Russ,
Thanks for your reply. My main concern is how to mouse over each of these data points, using their class name. This is the sample html of a data point:

Below is basically what I’m dealing with, if I mouse over on a data point, a tooltip showing an image will be displayed. I’ve figured out a way to verify if the image exists, but I need to find a way how to hover on each of the data points.

data points.png

This is the html of the tooltip:

Or if there’s way to verify the href value of the tooltips of each data point, without hovering on each point, would greatly appreciate it.

tooltip.png

You can use a groovy each loop or a JavaScript forEach loop to iterate over the class collection returned from “.tooltip” (I assume that’s the class you wanted?)

I’m not sure how you can construct a meaningful test using hover – is there some other element that you wanted to check becomes visible that contains the actual tooltip? And what if one data point is hidden behind another? Sounds tricky…

You can of course use Verify Element Attribute Value to check the content of the href attribute, again inside the loop.

It’s kind of difficult to advise properly since I can’t see the page and the tooltip animation from your description.

Hi Russ,

Thank you. I looked up the each loop in Groovy, but I don’t know how to do it since there is no fixed number of data points, and in that case, tooltips in the graph. I’ve tried the following code:

//get the number of data points in the graph
datapoints = driver.findElements(By.cssSelector(’.data.shape.circle’)).size()

//modify the cssSelector at run time

for(j=4;j<=(datapoints+3);j++){

TestObject to = findTestObject(‘Comparisons/data point’)

to.setSelectorValue(SelectorMethod.CSS, ‘#pricing-graph > svg > g > path:nth-child(’+j+’)’)

to.setSelectorMethod(SelectorMethod.CSS)

WebUI.mouseOver(to)

webshot = WebUI.getAttribute(findTestObject(‘Comparisons/div_thumb - Copy’), ‘href’)

if (webshot == ‘’) {

println(‘DATA POINT WEBSHOT - FAILED’)

}

else {

println(‘DATA POINT WEBSHOT - PASSED’)

}

}

But since the sequence of the number inside “path:nth-child()” cssSelector does not coincide with the number of data points, my code above proved inefficient. Example, I sometimes get a result of datapoints = 43, but when I look at the cssSelector of the last data point, it would be “#pricing-graph > svg > g > path:nth-child(67)”

Hi Nora

First, let me admit, I’m finding it difficult to see into your code from your description(s). Perhaps the penny will drop for someone else reading this and they will offer something better than I am. That said…

I looked up the each loop in Groovy, but I don’t know how to do it since there is no fixed number of data points

An each loop does not need a fixed number – in essence you are saying “I don’t care how many there are, iterate over all of them”. Understand?

As far as I understand your issue, you want to verify the collection of tooltips, perhaps by checking each href in the a elements. In which case, you want a collection of a elements to apply each to.

Looking at your code, I would start with an each loop that iterates over the datapoints (elements). So where you were getting the size, I’d just get the elements themselves and loop over that. Something like…

// get a collection of datapoints
def datapoints = driver.findElements(By.cssSelector('.data.shape.circle')) // no size!

datapoints.each { def point ->
  // verify point
}

I hope that’s not too general and moves you forward.

2 Likes

I’m going to give that a try, Russ! Thanks!

IT WORKS!!! Thank you so much, @Russ Thomas! You saved my week. :slight_smile:

You’re very welcome. B)

Glad you got it working.