当我尝试使用 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 单击图像而不出现错误?
通常使用插件 cypress-real-events 结果会更好,尤其是在存在需要坐标的图形元素的情况下。
cy.get(wagon_wheel_locator)
.realHover() // for hovering
.realClick() // for clicking
我也同意 Akiva,错误说
无法读取未定义的属性(读取“x”)
但是代码显示您没有设置
cords
,这解释了为什么它是未定义的 - 它符合错误消息并且您有 const coords = ...
。
因此,可能只是变量名称的拼写错误导致了您的问题。