Form.io Form builder automation using cypress

Question

I am trying to automate form builder drag and drop feature but getting no success in it.

const dataTransfer = new DataTransfer();

cy.get(`div [ref="sidebar-container"] span[data-type="textfield"]`).trigger('formio.dragstart', {
    dataTransfer
  })

cy.get(`div[ref="form"]`).trigger('formio.drop', 
{ clientX: 200, clientY: 500 },
{ force: true }
); 

Answer 1

Could you try this?

cy.get('.builder-components').then(($target) => {
  const coords = $target[0].getBoundingClientRect();
  cy.get('[data-type="textfield"]')
    .trigger('mousedown', { which: 1 })
    .trigger('mousemove', { clientX: coords.x, clientY: coords.y })
    .trigger('mouseup', { force: true });
});