Cypress Drag and Drop for Pseudo element

Question

Source element

<span class="Multiterm Multiterm-"> Ready Messages</span>

Before I drop source element to Target element , Target element looks like below

<div class="react-grid-layout LightTheme dashboardGridLayout" style="height: 5px;"></div>

After I drop source element to Target element , Target element looks like below

<div class="react-grid-layout LightTheme dashboardGridLayout" style="height: 365px;">
  <div id="1" class="react-grid-item LightTheme widget draggableArea react-draggable cssTransforms react-resizable" data-grid="[object Object]" data-coordinate="2:1" style="height: 265px; position: absolute; transform: translate(180px, 90px) !important; width: 355px !important;">
    <div class="widgetTopDiv">
      <span class="LightTheme widgetSpan">
        <span class="Multiterm Multiterm-"> Ready Messages</span>
      </span>
      <span class="LightTheme filterSpan">
        <img src="./static/media/filter_applied.4d67f99c.svg" class="LightTheme widgetFilterIcon" draggable="false">
      </span>
      <span class="actionDeleteSpan">
        <img id="1" src="./static/media/copy.5d595a98.svg" class="LightTheme widgetCopyIcon" draggable="false">
        <img src="./static/media/Edit_123.b70c7de2.svg" class="LightTheme widgetEditIcon" draggable="false">
        <img src="./static/media/close.ae62c28e.svg" class="LightTheme widgetDeleteIcon" draggable="false">
      </span>
    </div>
    <div id="chartWidget_1" class="chartDataItem">
      <span class="settingsIcon">
        <img class="LightTheme settingsIcon" src="./static/media/No data loaded.612d838a.svg" draggable="false">
      </span>
    </div>
    <span class="react-resizable-handle react-resizable-handle-se"></span>
  </div>
</div>

My spec file test.cy.js to test above mentioned scenario

cy.visit("link-to-site")
cy.get('#Username').type('user-name')
cy.contains('Continue').click()
cy.get('#Password').type('password')
cy.get("button[value='login']").click()
cy.wait(10000)
cy.get(".newDashboard.LightTheme.LiButton_DefaultClass").click()
cy.wait(3000)
cy.get("#menuExpanIcon").click()
const drag_source = "span[id='24_dashboardKpiMenu'] span span[class='Multiterm Multiterm-']"
const drag_target = ".react-grid-layout.LightTheme.dashboardGridLayout"
cy.wait(1000)

const dataTransfer = new DataTransfer();
cy.get(drag_source).trigger('dragstart', {
            dataTransfer
});
cy.get(drag_target).trigger('drop', {force: true}, {
            dataTransfer
})

the test runs perfectly fine on cypress and passes however drag operation doesn't occur in the UI

Cypress Drag and Drop for Pseudo element

0 Answers0