RobotFramework自动化测试中如何定位canvas标签内的元素

方案1：调用Tableau官方JS API（优先推荐） #

这是稳定性最高、适配性最好的方案，完全不需要依赖canvas坐标定位：

• Tableau嵌入视图默认会暴露JS交互API，你可以直接通过RobotFramework的Execute Javascript关键字调用API操作内部元素，无需解析canvas结构。
• 操作示例：如果你要点击图表中维度值为2024年Q1的数据点，可执行如下JS代码：

// 先获取页面中的Tableau实例对象，不同嵌入版本标签可能为tableau-viz或包含tableau实例的div
const tableauViz = document.querySelector('tableau-viz');
const activeWorksheet = tableauViz.workbook.activeSheet;
// 拉取当前视图所有数据标记
const allMarks = await activeWorksheet.getMarksAsync();
// 按维度值匹配目标标记
const targetMark = allMarks.find(mark => {
  return mark.getPairs().some(item => item.fieldName === '季度' && item.formattedValue === '2024年Q1')
});
// 触发选中/点击操作
await activeWorksheet.selectMarksAsync(targetMark, 'replace');

• 该方案支持点击图表标记、操作筛选器、选中表格行等几乎所有Tableau交互操作，只要明确目标元素对应的维度/度量值即可定位，不受视图缩放、数据更新的影响。

方案2：图像特征匹配定位 #

如果场景限制无法调用JS API，可以用图像识别的方式实现动态定位：

• 引入Python的OpenCV库封装自定义关键字，先截取canvas区域的实时截图，和你提前准备的目标元素模板图做特征匹配，计算出目标在canvas内的相对坐标。
• 拿到相对坐标后调用RobotFramework Selenium库的Click Element At Coordinates关键字，传入canvas元素和计算得到的坐标完成点击。
• 使用前需要提前校准页面缩放比例、canvas渲染分辨率，避免不同设备下匹配失败。

方案3：监听canvas绘制日志获取坐标 #

• 通过JS重写canvas的getContext方法，监听所有绘制指令，记录每个图形的坐标、填充色、关联文本等信息，匹配到目标元素的特征后即可拿到对应的点击坐标。
• 该方案不需要提前准备模板图，但需要针对你使用的Tableau版本调整监听逻辑，适配成本比前两种方案高。

• 注意：所有固定坐标点击的方案都不建议使用，只要视图配置调整、窗口大小变化、数据更新导致元素位置偏移，就会出现点击失效的问题。

内容的提问来源于stack exchange，提问作者Wong Chung sze