Selenium click on Highcharts series - selenium

I am trying to find a solution to this question posted in the Google Selenium forum a couple years ago (most similar thing I found...unfortunately no posted answer in the forum). In my Selenium testing (Python bindings), how can I click on a Highcharts data series to trigger the onClick event? I am trying to do this for a bar chart, but any examples would work. Manually this works. When I click on a data series, a new div pops up with additional information about that data series, and I would like to verify this action using Selenium. I can get the series tooltip to appear using ActionChains, but for some reason the click() event doesn't seem to fire in Selenium.
I have tried to click on elements with class 'highcharts-series', the children rects of those elements, and the overall parent element 'highcharts-series-group'. The most progress I have is by clicking the children rects of the series, since I can see the tooltip pop up (see screenshot). But no clicking action--Selenium times out waiting for the next step.
One reason might be because the Highcharts group container (highcharts-series-group) has a higher zIndex than the element I want to click (3 vs. 0.1). But clicking the entire group does nothing, and in a real browser, I believe I am clicking on an actual series, not the group container--so I assume that since it works in a real browser, the zIndex shouldn't affect my clicking? You can see how all of these series are arranged in the svg element in the second screenshot.
This is how I am trying the click now. I built this following the solution in this SO question:
parent = self.browser.find_element_by_id('student_chart')
data_series = parent.find_elements_by_class_name('highcharts-series')
data_rect = data_series[0].find_element_by_tag_name('rect')
builder = ActionChains(self.browser)
series_click = builder.click(data_rect)
series_click.perform()
Thanks for your help!
UPDATE
So this seems completely hokey, but if I click on every single series using a for loop, the last one "takes" and the expected onClick event occurs. When I test manually, though, clicking on any single series works. The code which triggers the last series is:
parent = self.browser.find_element_by_id('student_chart')
data_series = parent.find_elements_by_class_name('highcharts-series')
for series in data_series:
rect = series.find_element_by_tag_name('rect')
if rect.text == '':
rect.click()
This seems like a complete hack just to make my test work, so I am wondering if anyone knows a root cause of why clicking on a single element doesn't work, or a cleaner way to do this?
Thanks!
UPDATE #2
So I looked at the library that Robbie pointed out in his answer below, which seems to use ActionChains to build out its interactions with HighCharts. The library is cool and obviously works for others, but the author only seems to track mouseover events...and when I tried different variations of the below code for a click event, I could only get the tooltip to appear--no click event. So I still seem stuck. ActionChains seem to work okay for reading tooltips and values from HighCharts with Selenium, but click events still seem a mystery to me...
parent = self.browser.find_element_by_id('student_chart')
data_series = parent.find_elements_by_class_name('highcharts-series')
series_number = 0
for series in data_series:
if series_number == 0:
click_object = series.find_element_by_tag_name('rect')
else:
pass
series_number += 1
builder = ActionChains(self.browser)
click_me = builder.click(click_object)
click_me.perform()

Have you checked this project? https://github.com/Ardesco/Powder-Monkey/tree/master/src/main/java/com/lazerycode/selenium/graphs
When I was automating Highcharts in Selenium C# last year, I was able to dissect this java project and get a really good understanding, then write my own version in C#.
Perhaps this could give you some ideas and hints

Related

Selenium for VBA - element not found error

I have been using a code since long time , but recently there is a new banner up which is hiding the element that I am trying to click.
Attaching the snapshot of error. The only help I need is I need to click the hidden element( if the browser window is maximized the element is visible).
.
Please help me.
If what you have said is true then you can use the following to maximize the window before clicking:
driver.Window.Maximize
Other options include:
1) Removing the banner
2) Scrolling the element into view
Can't write anything decent for those last two as your code is an image and I don't have a full URL to test with. You also haven't included the relevant HTML.
The "div.container-fluid" element is blocking the button you are trying to click.
You could try some of the following (as being shown here Element MyElement is not clickable at point (x, y)... Other element would receive the click):
prolong the wait before the click
use javascript executor

What to do when waiting for an element is not enough?

I am writing selenium test scripts using the industry standard of webdriver waits before interacting with elements, but I still frequently find my tests are failing, and it seems to be due to a race condition.
Here's the example I have been running into lately:
Go to the product catalog page
Apply a filter
Wait for the filter to be applied
Click the save button on the product which loads after the filter is applied
Step number 4 only works if I place a Thread.Sleep() in front of the step - using webdriverwait is not enough. I'm guessing this is because the webdriverwait only waits until the element is attached to the DOM, even though the relevant JavaScript click event has not been added to the element.
How do you get around this issue? Is there an industry standard for dealing with this race condition?
EDIT This was resolved by upgrading to the latest version firefox. Thanks everyone!
As we discovered in comments, updating Firefox to the latest version did the trick.
The code looks really good to me and makes total sense.
What I would try is to move to the element before making a click:
Actions builder = new Actions(WebDriver);
IWebElement saveButton = wait.Until(ExpectedConditions.ElementIsVisible(By.CssSelector(".button-wishlist")));
Actions hoverClick = builder.MoveToElement(saveButton).Click();
hoverClick.Build().Perform();
As we've discovered in comments, the issue is related to the size of the window (the test passed without a Thread.sleep() if the browser window is maximized). This makes me think that if you scroll to the element before making a click it could be enough to make it work:
IWebElement saveButton = wait.Until(ExpectedConditions.ElementIsVisible(By.CssSelector(".button-wishlist")));
((IJavaScriptExecutor)driver).ExecuteScript("arguments[0].scrollIntoView(true);", saveButton);
Actions hoverClick = builder.MoveToElement(saveButton).Click();
hoverClick.Build().Perform();
Take a look at this SO post for custom wait method. Sounds like element presence is not enough of a check in your case because the button may be present at all times in the DOM. What you need is something along the lines of ExpectedConditions.elementToBeClickable().
I am not familiar with the C# API but it looks like there is no built in method to do the same thing as in Java. So you could write a custom wait function that will have checks according to your needs.

Selenium WebDriver - Have a button with two click zones and selenium is not clicking properly

Ok guys,
I'm QAing a claims application by guidewire and this is where im running into an issue.
The header area has header buttons and one of them is Claims, this button has two click zones, when you click on the claims label it recalls the last claim you had opened, when you click the down arrow, it opens and shows you more options.
The option I want to get to is "New Claim"
FirePath shows me two seperate xPaths
For the claim label: .//[#id='TabBar:ClaimTab-btnInnerEl']
For the downarrow label: .//[#id='TabBar:ClaimTab-btnWrap']
Once the downarrow is initiated the xpath for New Claim: .//*[#id='TabBar:ClaimTab:ClaimTab_FNOLWizard-textEl']
However when I write my script:
driver.findElement(By.xpath(".//*[#id='TabBar:ClaimTab-btnWrap']")).click();
driver.findElement(By.xpath(".//*[#id='TabBar:ClaimTab:ClaimTab_FNOLWizard-textEl']")).click();
it constantly keeps clicking on the wrong area and recalling the last claim and the script fails.
Here is a screencast of the behavior expected:
http://screencast.com/t/jtI1kGkfmXK
and here is basically what its doing
http://screencast.com/t/s2Q6VrbJl
What can I do to circumvent this issue? Its driving me crazy.
I took help from here
Try this code, and see if it works:
driver.findElement(By.xpath("//span[#id='TabBar:ClaimTab-btnWrap']")).sendKeys(Keys.ARROW_DOWN);
Well what I can gather is you have to get to the "New Claim" span and click it.
You can use Javascriptexecutor and directly click on the "New Claim" even without bringing it up. It helps that your intended element to be clicked has a unique id.
So you can use the following :
var js = Driver as IJavaScriptExecutor;
if (js != null)
{
js.ExecuteScript("document.getElementById('TabBar:ClaimTab:ClaimTab_FNOLWizard-textEl').click();")
}
You need to click open the window and wait for that to open.So,
Some wait needed after your first click
Then, You probably have to use switchTo() to set focus on the newly opened dropdown window. Some examples how to use it are here. After that use a textbase search for finding your element. Something like this.
EDIT:
I found text base search helps a lot in such cases.
try this:
driver.findElement(By.xpath(".//*[#id='TabBar:ClaimTab-btnWrap']")).click();
//use some static delay for now. But, really you should use some fluent wait for the element to appear.
driver.findElement(By.xpath(".//*[.='New Claim']")).click();
I figured it out! I had to use the actions class but this worked!
Its a little weird but it works
WebElement element = driver.findElement(By.linkText("Claim"));
Actions builder = new Actions(driver);
Action dropdown = builder.clickAndHold(element)
.sendKeys(Keys.ARROW_DOWN).sendKeys(Keys.ARROW_DOWN)
.build();
dropdown.perform();
driver.findElement(By.xpath(".//*[#id='TabBar:ClaimTab:ClaimTab_FNOLWizard-textEl']")).click();

SVG and selenium

Hej Guys
I an using google visualization api to draw stacked bar chart. Its all fine but now i want to test it with selenium but having a hard time finding the elements in the google chart.
For example i want to click on the chart element but everytime i try to find an element by xpath i get exception "OpenQA.Selenium.NoSuchElementException: The element could not be found"
I read that with selenium its tricky to click on the svg images.
Is there anybody who know a solution cuz i m kind of desprate and i havent find a suitable solution on the net by myself.
My chart looks like this:
http://i48.tinypic.com/21o4swx.png
What i am trying todo is:
webdriver.Navigate().GoToUrl("http://localhost:59777/Tests/TestsMainView");
IWebElement element = webdriver.FindElement(By.XPath("/html/body/div/div[2]/div[2]/iframe/html/body/div/svg/g[2]/g/g[2]/rect[5]"));
Actions myAction = new Actions(webdriver);
myAction.Click(element).Perform();
Thread.Sleep(9999);
Thanks :)
Here is some advice that may help you. First your second line of code is should be
WebElement element = webdriver.FindElement(By.xpath("//img[contains(#src,'http://i48.tinypic.com/21o4swx.png')]"))
You had "IWebElement" (this was probably just a typo in your question). I changed the way the element is found searching for matching element instead of starting at the top level and working down. This is a better practice to narrow down the element you are attempting to interact with so that changes to the code don't instantly break your test. Also unless you start an xpath expression off with "//" or "xpath=" selenium Webdriver will not recognize it so even if your path never changed selenium Webdriver wouldn't be able to find it.
If I understand what you are trying to do then you can also remove lines 3-5 and replace them with the following,
element.click();
This will have selenium Webdriver zoom in on the chart provided by your link. I hope this helps
I noticed xpath cannot select anything within an svg tag. I managed to find elements using className or tagName selectors instead or you could even try cssSelectors but I am not sure about that one. Note that you can still use xpath to access parents of a node inside an svg using:
By.xpath("..");
Hope that will help.

How to click on Toolbar Item with selenium?

Web page contain a button with some text for example "Test". This button actually is a toolbar element. ( class ="tbButton" id="id",text="Test") and redirects to a certain table when press on it.
When try to use the following click methods
selenium.click("id");
selenium.doubleClick("id");
selenium.click("//*[text()='Test'and contains(#class, 'tbButton')] ");
the button does not react
Could enybody show an alternative methods that is able to resolve a problem
It's hard to know exactly what the problem is without knowing more about the actual contents of the page you are testing. Is there an example of the toolbar online somewhere?
With modern interfaces, locating elements with Selenium is not always an exact science. Here are a few suggestions:
With modern interfaces you often find that the DOM is being manipulated, so it is possible that the identifier you are using is no longer valid by the time you get to your click(). Use Firebug to check that you have the correct element.
Often it helps to click on the parent of the element, such as a div or the parent table cell. Again, use FireBug, to try some other elements near your toolbar button. Alternatively, Firebug sometimes reveals that the element contains other elements. You might have more luck changing the target to a contained element instead.
Sometimes you have to play around with some of the alternative actions. For instance, some controls respond to a mouseDown() followed by a mouseUp(), but not to a click(). Again you can often get hints from looking at the source with Firebug.