【Java】使用playwright来实现canvas前端画板UI自动化

网上有很多定位canvas画板实现自动化，参考方法如下：

1. selenium webdriver 实现Canvas画布自动化测试_selenium 定位canvas元素-CSDN博客

2.https://www.zhihu.com/question/544772689

定位方式思路：

我这次尝试了以上方法都未能成功实现，使用SpreadJS的API来实现也失败，原因是公司系统未暴露对象在自动化测试工程无法引用。

于是我尝试使用使用手动计算表格点击位置的行列坐标，再使用playwright模拟鼠标进行点击，可以成功实现点击

实现思路：

1. 首先获取画布的边界框（BoundingBox）

2. 根据自动化测试的浏览器窗口画布的宽高和总行列数，计算每个单元格的宽度（cellWidth）和高度（cellHeight）

注意点：这里的总行列数是指的自动化测试过程中弹出的浏览器窗口中画布的可见的总行列数，不是本地系统的总行列数

3. 根据给定的行号和列号，计算目标单元格的左上角坐标（cellX, cellY）

4. 计算出最终的点击坐标（clickX, clickY）后，使用 page.mouse().dblclick() 模拟双击操作

代码方法封装：

public class CanvasUtils{ public final Page page; public final Locator canvas; public CanvasUtils(Page page, String canvasSelector){ this.page = page; this.canvas = page.locator(canvasSelector); // 等待Canvas元素可见可交互 page.waitForTimeout(5000); } /** * @param row 行号（从0开始） * @param col 列号（从0开始） * @param totalRows 自动化浏览器窗口可见的总行数 * @param totalCols 自动化浏览器窗口可见的总列数 * @param side left 单元格偏左区域 或 right 单元格偏右区域 */ public void clickCellSide(int row, int col, int totalRows, int totalCols, String side){ BoundingBox box = canvas.boundingBox(); if(box == null){ log.info("Canvas画板未渲染出来，点击失败") throw new RuntimeException("Canvas未找到或未渲染"); } // 计算点击位置的坐标x,y double cellWidth = box.width / totalCols; double cellHeight = box.height / totalRows; double cellX = box.x + col * cellWidth; double celly = box.y + col * cellHeight; double clickX; if ("right".equals(side)){ clickX = cellX + cellWidth * 0.75; // 右侧中心 } else { clickX = cellX + cellWidth * 0.25; // 左侧中心 } double clickY = cellY + cellHeight / 2; try{ page.mouse().dblclick(clickX, clickY); log.info("已点击第{}行第{}列单元格的{}侧（坐标：{},{}）,点击成功", row, col, side, clickX, clickY); // 等待菜单出现 page.waitForTimeout(2000); log.info("点击成功后的菜单URL：{}", page.url()); } catch(Exception e){ log.info("点击第{}行第{}列单元格的{}侧失败", row, col, side, e.getMessage()); throw e; } } }