Question

我使用react-konva在画布上有矩形作为屏幕。如何在使用DOM元素选择目标元素的cypress等测试工具上测试单击屏幕矩形？

我看到这是不可能的，除非通过创建用于测试目的的屏幕DOM元素（除了画布上当前存在的东西）。不知何故，这也将花费大量时间和麻烦。

所以我想知道我们是否有办法解决这个问题，以测试在画布本身内部绘制的对象？

Answer 1

看看Konva测试代码。像https://github.com/konvajs/konva/blob/master/test/functional/MouseEvents-test.js

您可以使用以下代码（来自here）来模拟点击：

Konva.Stage.prototype.simulateMouseDown = function(pos) {
  var top = this.content.getBoundingClientRect().top;

  this._mousedown({
    clientX: pos.x,
    clientY: pos.y + top,
    button: pos.button || 0
  });
};


// the use it:
stage.simulateMouseDown({ x: 10, y: 50 });

但是您必须找到一种方法来访问舞台实例以进行此类测试。而且我不确定它是否适合使用柏木，因为它的API是抽象的且基于DOM。

或者您可以尝试使用cypress触发事件

cy.get(`.container > div`)
        .trigger('mousedown', { clientX: x, clientY: y })

如何测试来自赛普拉斯的konva？

1 个答案: