Back to Interview Prep

</>

Technology

Scenario-Based

Difficulty

Advanced

Experience

3-5 Years

Type

Scenario-Based

AutomateQA Team

QA Automation Engineers

June 15, 2026

Interview Question

How do you test a canvas or chart element in Selenium?

Answer

Testing Canvas and Chart Elements

HTML <canvas> renders graphics as pixels — Selenium cannot inspect pixel content directly. Use these approaches:

Approach 1 — Verify Underlying Data (Best)

Most chart libraries (Chart.js, D3, Highcharts) store data in accessible JS variables:

Java

JavascriptExecutor js = (JavascriptExecutor) driver;

// Chart.js — access chart instance data
Object chartData = js.executeScript(
    "return window.myChart.data.datasets[0].data;"
);
System.out.println("Chart data: " + chartData);

// D3 — read bound data
Object d3Data = js.executeScript(
    "return d3.select('.bar').datum();"
);

Approach 2 — Read Chart Tooltips via Hover

Java

WebElement chart = driver.findElement(By.cssSelector("canvas.chart"));

// Hover over chart to trigger tooltip
new Actions(driver)
    .moveToElement(chart, 100, 50) // hover at specific coordinates
    .perform();

// Read tooltip that appears in DOM
WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(3));
WebElement tooltip = wait.until(
    ExpectedConditions.visibilityOfElementLocated(By.cssSelector(".chart-tooltip"))
);
Assert.assertEquals(tooltip.getText(), "Sales: $12,450");

Approach 3 — Verify Highcharts via JS API

Java

// Highcharts exposes data via Highcharts.charts array
String seriesName = (String) js.executeScript(
    "return Highcharts.charts[0].series[0].name;"
);
Double dataPoint = (Double) js.executeScript(
    "return Highcharts.charts[0].series[0].data[2].y;"
);

Assert.assertEquals(seriesName, "Revenue");
Assert.assertEquals(dataPoint, 45000.0, 0.01);

Approach 4 — Screenshot Comparison for Visual Validation

Java

// Take screenshot of just the chart element
WebElement chartElement = driver.findElement(By.cssSelector(".chart-container"));
Screenshot chartShot = new AShot().takeScreenshot(driver, chartElement);

// Compare with baseline
BufferedImage baseline = ImageIO.read(new File("baseline/revenue-chart.png"));
ImageDiff diff = new ImageDiffer().makeDiff(new Screenshot(baseline), chartShot);
Assert.assertFalse(diff.hasDiff(), "Chart appearance has changed");

Approach 5 — Read ARIA / Accessibility Attributes

Many chart libraries add ARIA labels for accessibility:

Java

// Chart.js with accessibility plugin adds aria-label
WebElement bar = driver.findElement(By.cssSelector("[aria-label*='January']"));
String label = bar.getAttribute("aria-label");
// "January: $12,450"
Assert.assertTrue(label.contains("12,450"));

Approach 6 — Read Table Behind Chart

Many dashboards show both a chart and a data table:

Java

// Click "View as Table" or check if underlying table exists
WebElement viewTableBtn = driver.findElement(By.cssSelector(".view-table-btn"));
viewTableBtn.click();

// Now validate the data table rows
List<WebElement> rows = driver.findElements(By.cssSelector("table.chart-data tbody tr"));
Assert.assertEquals(rows.size(), 12, "Should have 12 months of data");

Canvas Interaction (Click on Specific Point)

Java

WebElement canvas = driver.findElement(By.tagName("canvas"));
// Click at pixel coordinates (x=150, y=75) relative to canvas
new Actions(driver)
    .moveToElement(canvas, 150, 75)
    .click()
    .perform();