如何使用Cypress实现React Image Mapper的点击自动化？

问题分析 #

直接使用cy.get(element).click()报错TypeError: Cannot read properties of undefined (reading 'x')，核心原因是点击逻辑依赖cords状态，但该状态仅在mousemove事件触发时才会更新——Cypress默认的click操作不会自动触发mousemove，导致cords未定义。手动触发事件链无效，则是因为事件参数未包含React Image Mapper需要的nativeEvent属性，无法正确传递坐标信息。

解决方案 #

方案1：优化Cypress事件触发，传递完整事件参数 #

在触发mousemove和click时，手动构造包含nativeEvent的参数，确保前端能正确获取layerX和layerY坐标：

cy.get(this.wagon_wheel_locator)
  // 先触发mousemove更新坐标状态
  .trigger('mousemove', {
    clientX: 110,
    clientY: 100,
    nativeEvent: {
      layerX: 110,
      layerY: 100
    }
  })
  .wait(100) // 等待React状态更新完成
  // 触发点击，传递相同坐标的完整事件参数
  .click({
    clientX: 110,
    clientY: 100,
    nativeEvent: {
      layerX: 110,
      layerY: 100
    }
  });

方案2：修改前端代码，解除点击对mousemove状态的依赖 #

在clicked函数中直接从点击事件中获取坐标，避免依赖cords状态，让测试逻辑更健壮：

const clicked = (areaOrEvent) => {
  props.parentWagonMsgData.parent = false;
  
  // 优先从点击事件中取坐标，无事件时使用现有cords
  const currentCords = areaOrEvent.nativeEvent 
    ? { x: areaOrEvent.nativeEvent.layerX, y: areaOrEvent.nativeEvent.layerY }
    : cords;

  if (props.positionBatTypeBatInput.waghoon_wheel_position_bat_type === "Right") {
    const isShortFineLeg = isInsideRectangle(Right_Hand_New_ShortFineLegFirst, currentCords) || 
                          isInsideRectangle(Right_Hand_New_ShortFineLegSecond, currentCords);
    if (isShortFineLeg) {
      setMsgClick(`Short Fine Leg`);
      setRighthandBatsmanPitchDefault(RightHandBatsmanShortFineLeg);
    } 
    else if (isInsideRectangle(Right_Hand_New_DeepFineLegFirst, currentCords) || 
             isInsideRectangle(Right_Hand_New_DeepFineLegSecond, currentCords)) {
      setMsgClick(`Deep Fine Leg`);
      setRighthandBatsmanPitchDefault(RighthandBatsmanDeepFine);
    } 
    else if (isInsideRectangle(Right_Hand_New_SquareLegFirst, currentCords) || 
             isInsideRectangle(Right_Hand_New_SquareLegSecond, currentCords)) {
      setMsgClick(`Square Leg`);
      setRighthandBatsmanPitchDefault(RightHandBatsmanSqaureLeg);
    }
  }
};

修改后，Cypress直接使用cy.get(this.wagon_wheel_locator).click(110, 100)即可正常触发点击逻辑，无需额外事件链。

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