Unable to find elements inside a jqplot, canvas graph


I want to write an automation script which loads the webpage (http://www.kathyw.org/jQPlot/LinkTest.html), moves the control to the graph, find the tooltip corresponding to the bar and then clicks on any bar so as to find the title of next page.

Please suggest me any tool which could perform all these tasks. The major problem (as per my findings) is with inspecting the graph elements. Hence, I am unable to use Protractor and Selenium. Plus, using Sikuli is also not an efficient approach as I have large number of graphs and capturing all the expected results would be a tedious task.

Please help me in this regard.


Swati Default Asked on November 25, 2015 in Program QA Automation.
Add Comment
1 Answer(s)

Hi Swati,

Sorry for the late reply. I tried to see this problem and saw that jqplot is not well exposed via JavaScript. The only way to the task you want is to do with JavaScript. However I wasnt able to fire any script to the plot control. for eg.I tried following, hope your dev team can help you out after looking at this code

System.setProperty("webdriver.chrome.driver", "C:\\Users\\abc\\Desktop\\Server\\chromedriver.exe");

WebDriver driver = new ChromeDriver();


driver.findElement(By.cssSelector("#chart2b > canvas.jqplot-event-canvas")).click();
WebElement targetElement = driver.findElement(By.cssSelector("#chart2b > canvas.jqplot-event-canvas"));

Point location = driver.findElement(By.cssSelector("#chart2b > canvas.jqplot-event-canvas")).getLocation();
JavascriptExecutor executor = (JavascriptExecutor) driver;
Object text = executor.executeScript("var plot = $('#chart2b'); plot.axes.xaxis.u2p(value)}");

System.out.println("TEXT OBJECT IS " + text.toString());

System.out.println("Element location is " + location.toString());

Actions actions = new Actions(driver);

actions.moveToElement(driver.findElement(By.cssSelector("#chart2b > canvas.jqplot-event-canvas")), 2, 2).click().build().perform();
System.out.println("Page title is " + driver.getTitle());

This piece of code fails at Javascript insertion part. This should give you an idea how we have to call jqplot APIs directly via javascript to do the task. Help from your dev team should be really helpful here.

Virender Singh Professor Answered on November 29, 2015.

Thanks a lot Virender. The code was really helpful!

on November 30, 2015.
Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.