'Drag and drop not working with cypress automated script

this is the application html with drag and drop content

<li>
<a class='place_video help_fields_controller_place_video' data-kind='stimuli' data-type='place_video' href='#'>
Place Video
<b></b>
</a>
</li>
<li>
<a class='place_photo help_fields_controller_place_photo' data-kind='stimuli' data-type='place_photo' href='#'>
Place Photo
<b></b>
</a>
</li>
<li>
<a class='place_file help_fields_controller_place_file' data-kind='stimuli' data-type='place_file' href='#'>
Place File
<b></b>
</a>
</li>
<li>
<a class='place_link help_fields_controller_place_link' data-kind='stimuli' data-type='place_link' href='#'>
Survey Link
<b></b>
</a>
</li>
</ul>
<br style='clear:left'>

</div>
</div>
<div id='follow'>
<div class='box collapsable activity_controls js_collectors' href='/fields/new'>
<h3 class='clearfix box_header'>
<div class='controls'>
</div>
<a action='collapse' class='collapse' href='#'></a>
<span class='help_activities_controller_collectors'>
Collectors
</span>
</h3>
<div class='content'>
<ul id='sortable_collectors'>
<li>
<a class='paragraph_text help_fields_controller_paragraph_text' data-kind='collector' data-type='paragraph_text' href='#'>
Paragraph Text
<b></b>
</a>
</li>
<li>
<a class='single_line_text help_fields_controller_single_line_text' data-kind='collector' data-type='single_line_text' href='#'>
Single Line Text
<b></b>
</a>
</li>
<li>
<a class='website help_fields_controller_website' data-kind='collector' data-type='website' href='#'>
Website
<b></b>
</a>
</li>
<li>
<a class='date help_fields_controller_date' data-kind='collector' data-type='date' href='#'>
Date
<b></b>
</a>
</li>
<li>
<a class='request_photo help_fields_controller_request_photo' data-kind='collector' data-type='request_photo' href='#'>
Request Photo
<b></b>
</a>
</li>
<li>
<a class='request_file help_fields_controller_request_file' data-kind='collector' data-type='request_file' href='#'>
Request File
<b></b>
</a>
</li>
<li>
<a class='request_video help_fields_controller_request_video' data-kind='collector' data-type='request_video' href='#'>
Request Video
<b></b>
</a>
</li>
<li>
<a class='single_choice help_fields_controller_single_choice' data-kind='collector' data-type='single_choice' href='#'>
Single Choice
<b></b>
</a>
</li>
<li>
<a class='multiple_choice help_fields_controller_multiple_choice' data-kind='collector' data-type='multiple_choice' href='#'>
Multiple Choice
<b></b>
</a>
</li>
<li>
<a class='drop_down help_fields_controller_drop_down' data-kind='collector' data-type='drop_down' href='#'>
Drop Down
<b></b>
</a>
</li>
<li>
<a class='time help_fields_controller_time' data-kind='collector' data-type='time' href='#'>
Time
<b></b>
</a>
</li>
<li>
<a class='number help_fields_controller_number' data-kind='collector' data-type='number' href='#'>
Number
<b></b>
</a>
</li>
<li id='location-collector'>
<a class='location help_fields_controller_location' data-kind='collector' data-type='location' href='#'>
Location
<b></b>
</a>
</li>
</ul>
<br style='clear: left'>

</div>
</div>
</div>


</div>
</td>
<td class='work_area'>
<div id='activity_fields'>
<input type="hidden" name="activity[form_attributes][id]" id="activity_form_attributes_id" />
<ul class='empty_sort_table' id='sortable'>
<li class='blank-slate'>
Build your activity by drag and dropping stimuli and collectors from the palette.
</li>
</ul>
</div>
</td>
</tr>
</table>

I would like to drag the instructional text and drop on the activity builder area and the cypress code for it

it('Activity Builder: Activity Library, Activity & Scheduling', () => {
  const dataTransfer = new DataTransfer()
  //Activity Scheduling
  leftMenuNavigation.clickActivityScheduling()
  cy.findByRole('heading', { name: /activities & scheduling/i }).should(
    'be.visible'
  )
  //creating activity
  cy.findByText(/^New Activity$/i)
    .should('be.visible')
    .parent()
    .click()
  cy.findByText(/activity/i, {
    selector: '.goog-menuitem-content'
  }).click({ force: true })
  cy.findByRole('link', { name: /instructional text/i }).trigger(
    'dragstart',
    {
      dataTransfer
    }
  )
  cy.findByRole('cell', {
    name: /build your activity by drag and dropping stimuli and collectors from the palette\.
/i
  })
    .findByRole('listitem')
    .trigger('drop')
    .trigger('dragend')
})
})
})

cypress

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Drag and drop not working with cypress automated script

Sources

Related Questions