Question 347215 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – how to automate dragndrop using cypress plugin

not able to drag the first task in my list to 3 task

cy.get('div[data-columns="columns"]')
      .find('div[data-columnContainer="columnContainer"]')
      .each(($column) => {
        if ($column.text().includes("Hamza Malik")) {
          cy.get('div[data-taskDraggable="taskDraggable"]:nth-child(1)').drag('div[data-taskDraggable="taskDraggable"]:nth-child(3)', { force: true });
        }
      });
Tags:

2

Answers


  1. 0

    You can try the cypress-drag-drop plugin:

    describe('Dragtest', () => {
  it('should dragndrop', () => {
    cy.visit('/yourpage')

    cy.get('.sourceitem').drag('.targetitem', options)
  })
})
    Login or Signup to reply.
  2. 0

    There is the trigger() command for simple situations, the example is here

    cy.get('div[data-columns="columns"]')
  .contains('div[data-columnContainer="columnContainer"]', 'Hamza Malik')
  .find('[data-cy=draggable]')
  .trigger('mousedown', { which: 1, pageX: 600, pageY: 100 })
  .trigger('mousemove', { which: 1, pageX: 600, pageY: 600 })
  .trigger('mouseup')

    But this means some calculation of x-y points which is not ideal, and can break if the page layout changes.

    Since you already use cypress-drag-drop, I suggest the selectors need changing. The code that finds your name is not affecting the drag operation.

    I think using .within() gives you better results:

    cy.get('div[data-columns="columns"]')
  .contains('div[data-columnContainer="columnContainer"]', 'Hamza Malik')
  .within(() => {

    // Now queries operate within the specified container column

    cy.get('div[data-taskDraggable="taskDraggable"])
      .then(draggables => {
        cy.wrap(draggables.eq(0))   // drag first over third
          .drag(draggables.eq(2))
      })
  })
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search