如何用Java(Selenium)查看HTML Canvas点击位置及排查点击失效问题

一、注入JS实时高亮鼠标位置 #

Selenium的Actions操作的鼠标是隐性的，可通过注入JavaScript创建一个跟随鼠标的高亮元素，直观看到实际指针位置：

1. 先执行以下JS代码创建追踪圆点：

// 注入鼠标追踪JS
String cursorTrackerJs = "var cursorDot = document.createElement('div'); cursorDot.style.position = 'fixed'; cursorDot.style.width = '12px'; cursorDot.style.height = '12px'; cursorDot.style.borderRadius = '50%'; cursorDot.style.backgroundColor = 'rgba(255,0,0,0.8)'; cursorDot.style.zIndex = '999999'; cursorDot.style.pointerEvents = 'none'; document.body.appendChild(cursorDot); document.addEventListener('mousemove', function(e) { cursorDot.style.left = (e.clientX - 6) + 'px'; cursorDot.style.top = (e.clientY - 6) + 'px'; });";
((JavascriptExecutor) driver).executeScript(cursorTrackerJs);

2. 再执行你的点击操作：

Actions action = new Actions(driver)
    .moveToElement(canvas, 0, 0)
    .moveByOffset(849, 341)
    .click();
action.perform();

此时页面会出现一个红色圆点，精准跟随Selenium鼠标的移动位置，可直接观察点击点是否匹配目标区域。

二、修正Canvas坐标计算逻辑 #

问题可能出在getSize()获取的是Canvas的原始尺寸，而非页面渲染后的实际位置（比如存在CSS缩放、父元素偏移等），改用getBoundingClientRect()获取Canvas在视口中的真实位置：

// 获取Canvas实际渲染的位置与尺寸
String getCanvasRealRect = "var rect = arguments[0].getBoundingClientRect(); return {left: rect.left, top: rect.top, width: rect.width, height: rect.height};";
Map<String, Object> canvasRealRect = (Map<String, Object>) ((JavascriptExecutor) driver).executeScript(getCanvasRealRect, canvas);

double canvasLeft = (double) canvasRealRect.get("left");
double canvasTop = (double) canvasRealRect.get("top");
double canvasRenderWidth = (double) canvasRealRect.get("width");
double canvasRenderHeight = (double) canvasRealRect.get("height");

// 计算目标点的绝对坐标（以中心点为例）
int targetAbsX = (int) (canvasLeft + canvasRenderWidth / 2);
int targetAbsY = (int) (canvasTop + canvasRenderHeight / 2);

// 直接点击绝对坐标位置
Actions action = new Actions(driver)
    .moveByOffset(targetAbsX, targetAbsY)
    .click();
action.perform();

三、暂停操作配合截图验证 #

在移动鼠标后暂停几秒，结合截图确认指针位置：

Actions action = new Actions(driver)
    .moveToElement(canvas, 0, 0)
    .moveByOffset(849, 341)
    .pause(3000) // 暂停3秒，便于观察页面上的高亮圆点
    .click();
action.perform();

// 可选：保存截图留存
File screenshot = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(screenshot, new File("canvas_click_screenshot.png"));

内容的提问来源于stack exchange，提问作者codename_zoe