在Cypress.io测试中没有发生拖放 [英] Drag and drop is not happening in Cypress.io test

问题描述

我正在尝试拖动一个元素，然后将其拖放到放置区域区域，但测试没有在Cypress.io中执行拖放操作。如果有人可以在这里就潜在问题提出建议，那将会非常有帮助。投掷没有错误，但仍然没有发生拖放。

  describe（'验证拖放test'，function（）{
 
 it.only（'检查项目的拖放是否正常工作'，function（）{
 
 cy.visit（ 'http://www.seleniumeasy.com/test/drag-and-drop-demo.html'）
 
 const MyDataTransfer = function（）{}; 
 const dt = new MyDataTransfer （）; 
 dt.types = []; 
 
 // cy.wait（3000）; 
 
 cy.get（'＃todrag span'）
 .contains（'Draggable 1'）
 .trigger（draggable，{dataTransfer：dt}）; 
 
 cy.get（＃todrag span）
 .contains（'Draggable 1'）
 .trigger（'mousedown'，{which：1，pageX：600，pageY：600}）
 .trigger（'mousemove'，{which：1， clientX：330，clientY：35}）; 
 
 cy.wait（3000）; 
 
 cy.get（'＃mydropzone'）
 .trigger（ dropzone，{dataTransfer：dt}） ; 
}）; 
}）; 
  

解决方案

一些改变应该能达到你想要的效果。以下是解决此问题所采取步骤的细分...

首先，不要删除 MyDataTransfer ，只需构建一个新的

drag_n_drop_spec.js nofollow noreferrer> cypress-example-recipes repo 是一个有用的资源。

I am trying to drag an element and then drop it into a drop zone area, but the test is not performing the drag and drop action in Cypress.io. It would be really helpful if someone could advise about the potential issue here. There are no errors throwing, but still, the drag and drop is not happening here.

describe('Verify the drag and drop test', function() {

  it.only('Check whether the drag and drop of an item is working fine', function() {

  cy.visit('http://www.seleniumeasy.com/test/drag-and-drop-demo.html')  

    const MyDataTransfer = function () {};
    const dt = new MyDataTransfer ();
    dt.types = [];

    // cy.wait(3000);

    cy.get('#todrag span')
      .contains('Draggable 1')
      .trigger("draggable", {dataTransfer: dt});

    cy.get("#todrag span")
      .contains('Draggable 1')
      .trigger('mousedown', { which: 1, pageX: 600, pageY: 600 })
      .trigger('mousemove', { which: 1, clientX: 330, clientY: 35 });

    cy.wait(3000);

    cy.get('#mydropzone')
      .trigger("dropzone", {dataTransfer: dt});                     
  });   
});

解决方案

A few changes should achieve what you are looking for. Here's a breakdown of steps taken to solve this question...

First off, instead of stubbing out MyDataTransfer, just construct a new DataTransfer object, which comes packed with the necessary properties and methods needed for drag events:

const dataTransfer = new DataTransfer;

Next, it's best to trigger native drop and drag events, as opposed to draggable and dropzone. Selenium Easy is listening for dragstart, dragend, and drop (you can see this inside of their drag-and-drop-demo.js source file). Put these inside of a helper function, to be called later inside the test:

function dndIt() {
  cy.get('#todrag span:first-of-type')
    .trigger('dragstart', { dataTransfer });

  cy.get('#mydropzone')
    .trigger('drop', { dataTransfer });

  cy.get('#todrag span:first-of-type')
    .trigger('dragend');               // <-- seleniumeasy listens for this...
}                                      // otherwise, draggables are copied.    

A beforeEach block is helpful for setting the viewport and visiting the application:

beforeEach(function() {
  cy.viewport(1000, 600);
  cy.visit('https://www.seleniumeasy.com/test/drag-and-drop-demo.html');
});

And finally, the test block calls the helper function, and asserts that the item was dragged and dropped:

it('Check whether the drag and drop of an item is working fine', function() {
  dndIt();

  cy.get('#droppedlist')
    .should(($el) => {
      expect($el.children()).to.have.lengthOf(1)
    });
});

Here's the solution in its entirety:

describe('Verify the drag and drop test', function() {
  const dataTransfer = new DataTransfer;

  function dndIt() {
    cy.get('#todrag span:first-of-type')
      .trigger('dragstart', { dataTransfer });

    cy.get('#mydropzone')
      .trigger('drop', { dataTransfer });

    cy.get('#todrag span:first-of-type')
      .trigger('dragend');               // <-- seleniumeasy listens for this...
  }                                      // if left out, draggables are copied.

  beforeEach(function() {
    cy.viewport(1000, 600);
    cy.visit('https://www.seleniumeasy.com/test/drag-and-drop-demo.html');
  });

  it('Check whether the drag and drop of an item is working fine', function() {
    dndIt();

    cy.get('#droppedlist')
      .should(($el) => {
        expect($el.children()).to.have.lengthOf(1)
      });
  });
});

The drag_n_drop_spec.js provided in the cypress-example-recipes repo was a helpful resource.

这篇关于在Cypress.io测试中没有发生拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！