如何使用Java版Selenium在Mapbox中选择区域？

我正在使用Java版Selenium自动化选择Mapbox地图上的区域，尝试了多种方法均未成功，包括Action类和JavaScript。以下是我尝试的方法：

方法1：使用JavaScriptExecutor #

clickOnCanvasMethod1(WebElement canvas, int x, int y) {  
    JavascriptExecutor js = (JavascriptExecutor) driver;  
    String script = "var canvas = arguments[0];"  
            + "var rect = canvas.getBoundingClientRect();"  
            + "var x = arguments[1];"  
            + "var y = arguments[2];"  
            + "canvas.dispatchEvent(new MouseEvent('click', {"  
            + "    clientX: rect.left + x,"  
            + "    clientY: rect.top + y,"  
            + "    bubbles: true"  
            + "}));"  
    js.executeScript(script, canvas, x, y);  
}

方法2：使用Action类 #

clickOnCanvasMethod2(WebElement canvas) {  
    Actions actions = new Actions(driver);  
    actions.moveToElement(canvas, 200, 200)  
            .clickAndHold()  
            .moveByOffset(100, 100)  
            .release()  
            .perform();  
}

方法3：使用JavaScript模拟鼠标事件 #

clickOnCanvasMethod3(WebElement canvas) {  
    JavascriptExecutor js = (JavascriptExecutor) driver;  
    String script = "var canvas = arguments[0];"  
            + "var rect = canvas.getBoundingClientRect();"  
            + "canvas.dispatchEvent(new MouseEvent('mousedown', {"  
            + "    clientX: rect.left + 200,"  
            + "    clientY: rect.top + 200,"  
            + "    bubbles: true"  
            + "}));"  
            + "canvas.dispatchEvent(new MouseEvent('mousemove', {"  
            + "    clientX: rect.left + 300,"  
            + "    clientY: rect.top + 300,"  
            + "    bubbles: true"  
            + "}));"  
            + "canvas.dispatchEvent(new MouseEvent('mouseup', {"  
            + "    clientX: rect.left + 300,"  
            + "    clientY: rect.top + 300,"  
            + "    bubbles: true"  
            + "}));"  
    js.executeScript(script, canvas);  
}  

以上方法均未达到预期效果。

参考：Mapbox Draw Example

排查方向与替代方案 #

1. 坐标校准问题：Mapbox地图可能存在缩放、平移导致的坐标偏移，建议先获取地图当前的缩放级别和中心点坐标，再将目标地理坐标转换为Canvas上的像素坐标，而非直接使用固定偏移量。
2. 事件参数完整性：模拟MouseEvent时，需补充更多必要参数（如buttons: 1表示左键按下），确保事件符合Mapbox的事件监听要求。修改后的JS事件示例：

canvas.dispatchEvent(new MouseEvent('mousedown', {
    clientX: rect.left + x,
    clientY: rect.top + y,
    bubbles: true,
    cancelable: true,
    buttons: 1,
    pointerType: 'mouse'
}));

3. 直接调用Mapbox Draw API：跳过Selenium的鼠标模拟，直接通过JS执行Mapbox Draw的API来创建区域。例如，若页面已初始化Draw实例，可执行：

var draw = map.get('draw');
draw.add({
    type: 'Feature',
    geometry: {
        type: 'Polygon',
        coordinates: [[
            [lng1, lat1],
            [lng2, lat2],
            [lng3, lat3],
            [lng1, lat1]
        ]]
    }
});

在Java中通过JavascriptExecutor执行这段脚本，直接生成目标选区，这是最可靠的方案。
4. 等待地图加载完成：确保操作前地图已完全渲染，可通过等待Canvas元素的complete状态，或监听Mapbox的load事件后再执行操作。

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