How to implement the Drop or Trigger properly inside of Cypress?

[hvaandres]

I'm currently working with Salesforce with the "Drag File Here" component and it seems that if I work with the "Drag and Drop" NPM dependency it will do it without any errors but the screen will never pop up.

Note: After we drop a file, we should see a pop-up window with all the file options to store that file.

If I do it with the "Trigger Action" I will get the following error message:

My code is the following:

describe("Checklist - Drag and Drop Functionality", function () {
  beforeEach(() => {
    cy.login();
  });

  it("Drag and Drop Files", () => {
    cy.viewOpportunityRecord();
    cy.wait(10000);
    // Click to view  More Tabs inside of the opportunity
    cy.get('button[title="More Tabs"]', { delay: 1000, force: true }).click({multiple: true, force: true});

    cy.get("span.slds-truncate")
      .contains("Checklist (beta)")
      .dblclick({ multiple: true });

    cy.wait(10000)

    const filePath = 'html-cheat-sheet.csv'
    
    cy.xpath('//*[@id="tab-18"]/slot/flexipage-component2/slot/flexipage-aura-wrapper/div/section[1]/h2/div[2]/button[3]').click({force: true})

    cy.wait(10000)
    cy.xpath('/html/body/div[4]/div[1]/section/div[1]/div[2]/div[2]/div[1]/div/div/div/div/div/one-record-home-flexipage2/forcegenerated-adg-rollup_component___force-generated__flexipage_-record-page___-opportunity_-record_-page___-opportunity___-v-i-e-w/forcegenerated-flexipage_opportunity_record_page_opportunity__view_js/record_flexipage-record-page-decorator/div[1]/records-record-layout-event-broker/slot/slot/flexipage-record-home-with-subheader-template-desktop2/div/div[3]/div[1]/slot/slot/flexipage-component2[1]/slot/flexipage-tabset2/div/lightning-tabset/div/slot/slot/slot/flexipage-tab2[16]/slot/flexipage-component2/slot/flexipage-aura-wrapper/div/div[1]/div[1]/ul/li[1]/section/div[2]/div[2]/div[4]').trigger('drop', {filePath})

  })

})

Also, to run the drag the file, I thought that I can do this:

const fileLocated = cy.xpath('/html/body/div[4]/div[1]/section/div[1]/div[2]/div[2]/div[1]/div/div/div/div/div/one-record-home-flexipage2/forcegenerated-adg-rollup_component___force-generated__flexipage_-record-page___-opportunity_-record_-page___-opportunity___-v-i-e-w/forcegenerated-flexipage_opportunity_record_page_opportunity__view_js/record_flexipage-record-page-decorator/div[1]/records-record-layout-event-broker/slot/slot/flexipage-record-home-with-subheader-template-desktop2/div/div[3]/div[1]/slot/slot/flexipage-component2[1]/slot/flexipage-tabset2/div/lightning-tabset/div/slot/slot/slot/flexipage-tab2[16]/slot/flexipage-component2/slot/flexipage-aura-wrapper/div/div[1]/div[1]/ul/li[1]/section/div[2]/div[2]/div[4]')
    
    cy.xpath('//*[@id="tab-18"]/slot/flexipage-component2/slot/flexipage-aura-wrapper/div/section[1]/h2/div[2]/button[3]').click({force: true})

    cy.wait(10000)
    cy.xpath('//*[@id="fileTable"]').xpath('//*[@id="fileTable"]/tbody/tr[1]/td[1]/div/button').contains('12 Month Payment History').drag(fileLocated, { force: true})

I'm currently working with Salesforce with the "Drag File Here" component and it seems that if I work with the "Drag and Drop" NPM dependency it will do it without any errors but the screen will never pop up.

Note: After we drop a file, we should see a pop-up window with all the file options to store that file.

If I do it with the "Trigger Action" I will get the following error message:

enter image description here

My code is the following:

describe("Checklist - Drag and Drop Functionality", function () {
beforeEach(() => {
cy.login();
});

it("Drag and Drop Files", () => {
cy.viewOpportunityRecord();
cy.wait(10000);
// Click to view More Tabs inside of the opportunity
cy.get('button[title="More Tabs"]', { delay: 1000, force: true }).click({multiple: true, force: true});

cy.get("span.slds-truncate")
  .contains("Checklist (beta)")
  .dblclick({ multiple: true });

cy.wait(10000)

const filePath = 'html-cheat-sheet.csv'

cy.xpath('//*[@id="tab-18"]/slot/flexipage-component2/slot/flexipage-aura-wrapper/div/section[1]/h2/div[2]/button[3]').click({force: true})

cy.wait(10000)
cy.xpath('/html/body/div[4]/div[1]/section/div[1]/div[2]/div[2]/div[1]/div/div/div/div/div/one-record-home-flexipage2/forcegenerated-adg-rollup_component___force-generated__flexipage_-record-page___-opportunity_-record_-page___-opportunity___-v-i-e-w/forcegenerated-flexipage_opportunity_record_page_opportunity__view_js/record_flexipage-record-page-decorator/div[1]/records-record-layout-event-broker/slot/slot/flexipage-record-home-with-subheader-template-desktop2/div/div[3]/div[1]/slot/slot/flexipage-component2[1]/slot/flexipage-tabset2/div/lightning-tabset/div/slot/slot/slot/flexipage-tab2[16]/slot/flexipage-component2/slot/flexipage-aura-wrapper/div/div[1]/div[1]/ul/li[1]/section/div[2]/div[2]/div[4]').trigger('drop', {filePath})

})

})

Also, to run the drag the file, I thought that I can do this:

const fileLocated = cy.xpath('/html/body/div[4]/div[1]/section/div[1]/div[2]/div[2]/div[1]/div/div/div/div/div/one-record-home-flexipage2/forcegenerated-adg-rollup_component___force-generated__flexipage_-record-page___-opportunity_-record_-page___-opportunity___-v-i-e-w/forcegenerated-flexipage_opportunity_record_page_opportunity__view_js/record_flexipage-record-page-decorator/div[1]/records-record-layout-event-broker/slot/slot/flexipage-record-home-with-subheader-template-desktop2/div/div[3]/div[1]/slot/slot/flexipage-component2[1]/slot/flexipage-tabset2/div/lightning-tabset/div/slot/slot/slot/flexipage-tab2[16]/slot/flexipage-component2/slot/flexipage-aura-wrapper/div/div[1]/div[1]/ul/li[1]/section/div[2]/div[2]/div[4]')

cy.xpath('//*[@id="tab-18"]/slot/flexipage-component2/slot/flexipage-aura-wrapper/div/section[1]/h2/div[2]/button[3]').click({force: true})

cy.wait(10000)
cy.xpath('//*[@id="fileTable"]').xpath('//*[@id="fileTable"]/tbody/tr[1]/td[1]/div/button').contains('12 Month Payment History').drag(fileLocated, { force: true})

The main issue with this is that I'm getting the following issue:

CypressError
Cypress detected that you returned a promise from command while also invoking one or more cy commands in that promise.

The command that returned the promise was:

  > cy.wrap()

Does anyone have any idea of how to solve this problem?

[omfasom]

Hi, I am also getting the same error yet when I close the page, it works. However, I am not able to select even one element on SF via Cypress. Is there any specific setup for that?