如何将 cypress 与 React 图像映射器一起使用？

Question

当我尝试使用 Cypress 自动单击图像时，出现错误。

我正在使用图像映射器来记录我的点击。这是代码：

`\<ImageMapper
src={RighthandBatsmanPitchDefault}
width={300}
onLoad={() =\> load()}
onMouseDown={(area) =\> clicked(area)}
onMouseEnter={(area) =\> enterArea(area)}
onMouseLeave={(area) =\> leaveArea(area)}
onMouseMove={(area, \_, evt) =\> moveOnArea(area, evt)}
onImageClick={(evt) =\> clicked(evt)}
onImageMouseMove={(evt) =\> moveOnImage(evt)}
/\>

const enterArea = (area) =\> {
setHoveredArea(area);
};
const leaveArea = (area) =\> {
setHoveredArea(null);
};
const moveOnArea = (area, evt) =\> {
const coords = { x: evt.nativeEvent.layerX, y: evt.nativeEvent.layerY };
setCords(coords);
};

const clicked = (area) =\> {
props.parentWagonMsgData.parent = false;

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

等等... isInsideRectangle 的定义是：

export function isInsideRectangle({ x1, y1, x2, y2, x3, y3, x4, y4 }, { x, y }) {
let A = area(x1, y1, x2, y2, x3, y3) + area(x1, y1, x4, y4, x3, y3);
let A1 = area(x, y, x1, y1, x2, y2);
let A2 = area(x, y, x2, y2, x3, y3);
let A3 = area(x, y, x3, y3, x4, y4);
let A4 = area(x, y, x1, y1, x4, y4);
return A == A1 + A2 + A3 + A4;
}

我在 Cypress 上尝试了多种方法，包括最简单的：

 cy.get(element).click()

我总是收到与此类似的错误：

Error:      TypeError: Cannot read properties of undefined (reading 'x') 

这是因为 x 未定义，因为与物理鼠标移动不同，cypress 直接单击某个位置。

我也尝试过以某种间接的方式 -

cy.get(this.wagon_wheel_locator)
.trigger("mouseenter", 120, 100)
.trigger("mousemove", 110, 100)
.trigger("mouseover", 110, 100)
.trigger("mousedown", 110, 100)
.wait(100)
.trigger("mouseup", 110, 100)
.trigger("mousemove", 130, 100)
.trigger("mouseleave", 130, 100);

此代码不会给出错误，但也不会单击。

如何通过 Cypress 单击图像而不出现错误？

Answer 1

通常使用插件 cypress-real-events 结果会更好，尤其是在存在需要坐标的图形元素的情况下。

cy.get(wagon_wheel_locator)
  .realHover()                 // for hovering
  .realClick()                 // for clicking

我也同意 Akiva，错误说

无法读取未定义的属性（读取“x”）

但是代码显示您没有设置

cords

，这解释了为什么它是未定义的 - 它符合错误消息并且您有

const coords = ...

。

因此，可能只是变量名称的拼写错误导致了您的问题。