cy.trigger() 抛出 "cy.trigger() 只能在单个 element.in Cypress 上调用

Question

对于我的应用程序，我必须选择多个项目并执行拖放操作，但我得到了以下错误。

只能对单个元素调用

cy.trigger((。你的主题包含两个元素。

cy.get('item1').click();
cy.get('item2')
.click({ctrlkey:true})
.trigger('dragstart',{dataTransfer}))
.trigger('drag',{});
cy.get('targetelement')
.trigger('dragover', { dataTransfer })
.trigger('drop', { dataTransfer })
.trigger('dragend', { dataTransfer });

Answer 1

每次拖放都有一些变化，所以这可能不适用于您。请参阅问题：移动光标(拖放(#845

对此没有通用的答案-这取决于你的应用程序绑定到什么，以及它正在侦听什么事件和属性。

如果dragstart事件侦听器连接到document，则可以使用

cy.document()
.its('documentElement')
.trigger('dragstart', { dataTransfer: {} });

---

我使用这个CodePen鼠标拖放作为一个基本的多选拖放示例应用程序。

它有不同的事件，我在测试中用代替了你的事件

• dragover更改为dragenter
• drop改为dragleave

但您将使用适用于您的应用程序的事件。

希望cy.document().trigger('dragstart', { dataTransfer: {} })的关键原理也适用于您的应用程序。

我的测试

it('drags and drops multiple items', () => {
cy.visit('http://127.0.0.1:5500/dist/index.html') // CodePen exported and run locally
cy.contains('Item 0').click();                    // select 1st item
cy.contains('Item 2').click({ctrlKey:true});      // also select 3rd item
cy.document()
.its('documentElement')
.trigger('dragstart', { dataTransfer: {} })
cy.get('ol').eq(2)                                // get the target
// .trigger('dragover', { dataTransfer: {} })
.trigger('dragenter', { dataTransfer: {} })
// .trigger('drop', { dataTransfer: {} })
.trigger('dragleave', { dataTransfer: {} })
.trigger('dragend', { dataTransfer: {} });
cy.get('ol').eq(2).contains('Item 0');            // verify 1st item moved
cy.get('ol').eq(2).contains('Item 2');            // verify 3rd item moved

})

结果是项目0&第一个列表中的2个最终出现在第三个列表中。