Canvas 网格库

一个Playwright-First库,用于使用基于网格的方法测试HTML5 Canvas元素.

依赖关系

这个图书馆需要 剧作家 作为同伴依赖:

npm install @playwright/test

您必须安装 Playwright 在您的项目中使用 CanvasGrid .

请注意,整个图书馆仍然是实验性的.

基本用途

import { test, expect } from '@playwright/test';
import {CanvasGrid} from "@bisonsoftware/canvas-grid-playwright";

test('canvas testing example', async ({ page }) => {
  await page.goto('https://your-canvas-app.com');
  
  // Create grid overlay
  const grid = new CanvasGrid(page)
    .locator('canvas')
    .gridSize(10, 8);  // 10 cols, 8 rows
  
  await grid.attach();
  
  // Interact with canvas
  await grid.clickCell(5, 4);
  await grid.hoverCell(3, 2);
});

API 参考

核心方法

设置

• new CanvasGrid(page) - 以 Playwright 页面初始化
• .locator(selector) - 选择画布元素
• .nth(index) - 多次匹配时选择特定的画布
• .gridSize(cols, rows) - 设置网格尺寸(默认情况下可选、自动大小)
• .attach() - 创建和附加网格覆盖

鼠标交互

• .clickCell(col, row) - 左键单元格中心
• .hoverCell(col, row) - 躲过牢房中心
• .doubleClickCell(col, row) - 双击单元格中心
• .rightClickCell(col, row) - 右击单元格中心
• .dragFromCellToCell(fromCol, fromRow, toCol, toRow) - 在单元格间拖动

工具提示检测

• .hoverCellAndCaptureTooltip(col, row, options?) - 抓住DOM工具提示
• .waitForTooltip(options?) - 等待工具提示出现
• .getVisibleTooltips(selectors?) - 获取所有当前可见的工具提示
• .scanAllCellsForTooltips(options?) - 为 DOM 工具提示扫描整个网格
• .hasAnyTooltips(options?) - 快速检查是否有 DOM 工具提示
• .scanWithTextExtraction(options?) - DOM工具提示强化扫描

重叠控制

• .interactive(boolean) - 启用/禁用覆盖鼠标事件
• .toggleOverlay(boolean) - 显示/隐藏可视性

自动图像大小

未指定网格大小时,库会根据画布大小自动选择:

• 小画布 ( < 400px): 6×4 网格
• 中画布 (400-900px): 10x8网格
• 大画布 ( > 900px): 14x10 网格

// Auto-sizing based on canvas dimensions
const grid = new CanvasGrid(page).locator('#my-canvas');
await grid.attach(); // Grid size determined automatically