Cypress中Canvas指定坐标点击失效问题求助

以下是几种可行的排查和解决方法：

1. 确认坐标参考系是否正确 #

Cypress的click(x,y)坐标是相对于目标元素（此处为Canvas）的左上角原点，而非整个页面的坐标。你可以打印Canvas的位置和尺寸验证坐标是否准确：

cy.get('#chart-canvas').then($canvas => {
  const rect = $canvas[0].getBoundingClientRect();
  console.log('Canvas位置:', rect);
  console.log('目标坐标相对于Canvas:', 180, 270);
  console.log('目标坐标相对于页面:', rect.left + 180, rect.top + 270);
})

2. 用原生JS触发Canvas点击事件 #

部分场景下Cypress内置的click命令无法触发Canvas内部的自定义事件，直接使用原生JS模拟点击更可靠：

cy.get('#chart-canvas').then($canvas => {
  const canvas = $canvas[0];
  const rect = canvas.getBoundingClientRect();
  
  const clickEvent = new MouseEvent('click', {
    clientX: rect.left + 180,
    clientY: rect.top + 270,
    bubbles: true,
    cancelable: true
  });
  
  canvas.dispatchEvent(clickEvent);
})

3. 处理Canvas缩放或变换 #

如果Canvas应用了CSS缩放（如transform: scale()），坐标映射会发生变化，需计算缩放后的真实坐标：

cy.get('#chart-canvas').then($canvas => {
  const canvas = $canvas[0];
  const rect = canvas.getBoundingClientRect();
  const scaleX = canvas.width / rect.width;
  const scaleY = canvas.height / rect.height;
  
  const actualX = 180 * scaleX;
  const actualY = 270 * scaleY;
  
  cy.wrap($canvas).click(actualX, actualY, {force: true});
})

4. 等待Canvas渲染完成 #

若座位元素是异步加载渲染的，过早点击会无效，可添加等待确保渲染完成：

cy.get('#chart-canvas').should('be.visible').then($canvas => {
  cy.wait(500); // 根据实际场景调整等待时长，或用更精准的断言替代固定等待
  cy.wrap($canvas).scrollIntoView().click(180, 270, {force: true});
})

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