使用 d3.js 创建的柏树图形进行测试

Question

我有一个用 d3.js 制作的二维图表，我应该用 cypress 测试它。首先我想让点移动

 <circle id="MYID" class="clickable handler" r="5" htmlTemplate="pippo" cx="1144.6314588049954" cy="298.9141325106507"></circle>

我尝试了这些解决方案（2 个中的一个被注释）但它不起作用：

  cy.get('[id="MYID"]')
       // .trigger('mousedown', { which: 1, force: true, view: window })
       // .trigger('mousemove', { position: 'top', view: window })
       // .trigger('mouseup', { position: 'top', force: true });
       .trigger('mousedown', {
         which: 1,
         force: true,
         view: window,
       })
       .trigger('mousemove', {
         clientX: 3000,
         clientY: 5000,
         force: true,
      })
       .trigger('mouseup', {
         force: true,
         view: window,
       });
   });

在评论的案例中，它似乎在移动，但它是毫米级的，我想重现球的真实和比例位移，但正如我所做的那样，它没有移动一毫米！

Answer 1

我是这样解决的：

 cy.window().then(window => {
   cy.get('[id="MYID"]')
     .trigger('mousedown', {
       which: 1,
       force: true,
       view: window,
     })
     .trigger('mousemove', {
       clientX: 300,
       clientY: 500,
       force: true,
     })
     .trigger('mouseup', {
       force: true,
       view: window,
     });
 });

使用 d3.js 创建的柏树图形进行测试

Test with cypress graphics created with d3.js

d3.js

cypress

cypress-component-test-runner