如何在 Cypress 中正确实现 Drop 或 Trigger？

Question

我目前正在使用“将文件拖到此处”组件与 Salesforce 合作，似乎如果我使用“拖放”NPM 依赖项，它会在没有任何错误的情况下完成，但屏幕永远不会弹出.

注意：删除文件后，我们应该会看到一个弹出窗口 window，其中包含用于存储该文件的所有文件选项。

如果我使用“触发操作”执行此操作，我将收到以下错误消息：

我的代码如下：

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})

  })

})

另外，要运行拖拽文件，我想我可以这样做：

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})

主要问题是我遇到了以下问题：

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

The command that returned the promise was:

  > cy.wrap()

有人知道如何解决这个问题吗？

Answer 1

我不知道这是否解决了问题，但你不能这样做

const fileLocated = cy.xpath(<horrendously-long-xpath-selector>)
...
cy.xpath(<another-long-xpath-selector>).drag(fileLocated, { force: true})

因为 fileLocated 不会是一个元素（这是你需要的放置目标），它将是一个 Chainer。

相反，这样做

cy.xpath(<horrendously-long-xpath-selector>)
  .then( targetItem => {

    ...
    cy.xpath(<another-long-xpath-selector>).drag( targetItem, { force: true})
  })

Answer 2

为消除此问题，我们能够将数据属性添加到元素所在的 HTML 页面。之后，我能够从该元素获取 xpath，并且能够附加文件。

示例：

cy.xpath('//*[@id="cy-dropzone"]').attachFile('latestLead.json', {subjectType: 'drag-n-drop'})

现在，问题已经解决了！

如何在 Cypress 中正确实现 Drop 或 Trigger？

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

javascript

drag-and-drop

automated-tests

cypress

salesforce-lightning