Cypress测试拖放Three.js画布

huangapple go评论68阅读模式
英文:

Cypress Testing Drag & Drop Three.js Canvas

问题

I'm currently trying to get some drag and drop cypress tests working for a react three fibre project. I'm stuggling a little to test this however as I don't have selectable ID's for the 3D elements to be used in cypress as all of the three.js elements are wrapped up in the HTML canvas.

My tests start as follows:

cy.get('[data-testid="r3f"] canvas').as('canvas');
cy.get('@canvas').click({ x: 1390, y: 320 });  // Pos of object to drag & drop

With the above snippet I'm able to select object in the scene and enable the transform controls as follows:

Cypress测试拖放Three.js画布

I then want to select the yellow drag square and move the objects position for my test.

I've tried both using cypress trigger & cypress-real-events & a combination of the two with no sucsess

  .realMouseMove(1390, 340)
  .realMouseDown(1390, 340)  // Mousedown not able to take take X/Y as params
  .realMouseMove(1100, 300)
  .realMouseUp({ force: true });

Using the above cypress-real-events seems to have got me closest to what I need, in the test replay realMouseMove is placing the mouse over the drag box, as follows:

Cypress测试拖放Three.js画布

However .realMouseDown(1390, 340) doesn't have the option of passing X&Y instead it defaults to the topLeft the selected element, so in my case the canvas @ 0,0. This then results in the orbit controls of the scene being triggered on the second realMouseMove rotating the scene and no drag and drop being perfomed. realMouseEnd working as expected Cypress测试拖放Three.js画布

  .trigger('mousemove', { clientX: 1394, clientY: 320, force: true })
  .trigger('mousedown', { clientX: 1394, clientY: 320, force: true, button: 0 })
  .trigger('mousemove', { clientX: 1100, clientY: 300, force: true })
  .trigger('mouseup');

Using the above cypress trigger method seems to be working less. mousemove doesn't show the active hover state over the transform controls as with realEvents.

Any help with this would be much appreciated. Feel like I'm getting nowhere with this.

英文:

I'm currently trying to get some drag and drop cypress tests working for a react three fibre project. I'm stuggling a little to test this however as I don't have selectable ID's for the 3D elements to be used in cypress as all of the three.js elements are wrapped up in the HTML canvas.

My tests start as follows:

cy.viewport(1920, 1080);
cy.get('[data-testid="r3f"] canvas').as('canvas');
cy.get('@canvas').click({ x: 1390, y: 320 }); <--- Pos of object to drag & drop

With the above snippet I'm able to select object in the scene and enable the transform controls as follows:

Cypress测试拖放Three.js画布

I then want to select the yellow drag square and move the objects position for my test.

I've tried both using cypress trigger & cypress-real-events & a combination of the two with no sucsess

  cy.get('@canvas')
    .realMouseMove(1390, 340)
    .realMouseDown(1390, 340) <--- Mousedown not able to take take X/Y as params
    .realMouseMove(1100, 300)
    .realMouseUp({ force: true });

Using the above cypress-real-events seems to have got me closest to what I need, in the test replay realMouseMove is placing the mouse over the drag box, as follows:

Cypress测试拖放Three.js画布

However .realMouseDown(1390, 340) doesn't have the option of passing X&Y instead it defaults to the topLeft the selected element, so in my case the canvas @ 0,0. This then results in the orbit controls of the scene being triggered on the second realMouseMove rotating the scene and no drag and drop being perfomed. realMouseEnd working as expected Cypress测试拖放Three.js画布

  cy.get('@canvas')
    .trigger('mousemove', { clientX: 1394, clientY: 320, force: true })
    .trigger('mousedown', { clientX: 1394, clientY: 320, force: true, button: 0 })
    .trigger('mousemove', { clientX: 1100, clientY: 300, force: true })
    .trigger('mouseup');

Using the above cypress trigger method seems to be working less. mousemove doesn't show the active hover state over the transform controls as with realEvents.

Any help with this would be much appreciated. Feel like I'm getting nowhere with this

答案1

得分: 3

The cypress-real-events文档需要更新。

如果您查看这里的mouseDown.ts,您可以看到坐标是作为对象传递的,如此:{ x:123, y:456 }(相对于<canvas>而不是屏幕)。

mouseDown选项的类型定义

export interface realMouseDownOptions {
  ...
  cy.get("canvas").realMouseDown({ x: 100, y: 115 })

实现

const position =
    options.x && options.y ? { x: options.x, y: options.y } : options.position;

const { x, y } = getCypressElementCoordinates(
  subject,
  position,
  options.scrollBehavior,
);
...
await fireCdpCommand("Input.dispatchMouseEvent", {
  type: "mousePressed",
  x,
  y,
英文:

The cypress-real-events documentation needs some updating.

If you take a look here mouseDown.ts you can see that the coordinates are passed in as an object like this: { x:123, y:456 } (relative to the &lt;canvas&gt; not the screen).

Type definition for mouseDown options

export interface realMouseDownOptions {
  ...
  cy.get(&quot;canvas&quot;).realMouseDown({ x: 100, y: 115 })

Implementation

const position =
    options.x &amp;&amp; options.y ? { x: options.x, y: options.y } : options.position;

const { x, y } = getCypressElementCoordinates(
  subject,
  position,
  options.scrollBehavior,
);
...
await fireCdpCommand(&quot;Input.dispatchMouseEvent&quot;, {
  type: &quot;mousePressed&quot;,
  x,
  y,

huangapple
  • 本文由 发表于 2023年5月26日 00:39:49
  • 转载请务必保留本文链接:https://go.coder-hub.com/76334525.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定