英文:
Drag and Drop works visually in Cypress Test Runner, but it's not actually having an effect
问题
我正在使用4tw/cypress-drag-drop插件将可拖动的元素移动到一个div中。当元素被正确拖动和释放时，它应该触发一些其他元素的出现（例如，可拖动元素上的X以将其移除）。这是在Vue.js中使用VueDraggable。
在Cypress中，我的测试用例包括：
cy.get([可拖动的元素]).drag([div区域])
在测试运行器中，我可以看到元素被移动，但当它被“释放”时没有任何效果。
我尝试过添加 {force:true} 但没有效果。
我还尝试过使用以下不同的迭代版本，但在这种情况下，测试运行器甚至没有抓取元素来拖动它：
const dataTransfer = new DataTransfer
cy.get(源元素)
.trigger('dragstart', { dataTransfer })
cy.get(目标元素)
.trigger('drop', { dataTransfer, force: true })
Cypress版本：v10.7
4tw/cypress-drag-drop版本：v2.2.1（我尝试过不同的版本）
欢迎任何帮助或建议！
英文:
I'm using the 4tw/cypress-drag-drop plugin to move a draggable element into a div. When the element is properly dragged and dropped, it should trigger some other elements to appear (such as an X on the draggable element to remove it). This is in Vue.js using VueDraggable.
In Cypress, my test case includes:
cy.get([draggable element]).drag([div area])
In the Test Runner, I can SEE the element being moved, but when it's "dropped" there's no effect.
I've tried adding {force:true} but that has no effect.
I have also tried using various iterations of the below, but in this case, the Test Runner never even grabs the element to drag it:
<!-- language: js -->
const dataTransfer = new DataTransfer
cy.get(source)
.trigger('dragstart', { dataTransfer })
cy.get(target)
.trigger('drop', { dataTransfer, force: true })
Cypress version: v10.7
4tw/cypress-drag-drop: v2.2.1 (I've tried with various versions)
Any help or suggestions are appreciated!
答案1
得分: 3
以下是翻译的代码部分：
这是一个使用VueDraggable演示页面的工作示例。
可拖动元素似乎都有`data-draggable="true"`属性，所以我使用它作为选择器 + 文本内容（卡片上的名称）。
也许你需要在拖动后提供一个**断言来确认效果**。否则，测试会结束得太快，测试运行器永远不会更新到最终页面状态。
cy.viewport(1200,1200)
cy.visit('https://sortablejs.github.io/vue.draggable.next/#/simple');
// 拖动之前检查顺序
const listBeforeDrag = [
{ "name": "John", "id": 0 },
{ "name": "Joao", "id": 1 },
{ "name": "Jean", "id": 2 }
]
cy.contains('h3', 'List')
.next('pre')
.then($el => JSON.parse($el.text()))
.should('deep.eq', listBeforeDrag)
// 执行拖动
cy.get('[data-draggable]:contains(John)')
.drag('[data-draggable]:contains(Jean)')
// 拖动之后检查顺序
const listAfterDrag = [
{ "name": "Joao", "id": 1 },
{ "name": "Jean", "id": 2 },
{ "name": "John", "id": 0 }
]
cy.contains('h3', 'List')
.next('pre')
.then($el => JSON.parse($el.text()))
.should('deep.eq', listAfterDrag)
希望这对您有所帮助。如果您有其他问题或需要进一步的帮助，请随时提问。
英文:
Here's a working example using VueDraggable demo page.
The draggable elements seem to all have data-draggable="true" attribute, so I use that as selector + text content (name on the card).
It may be that all you need to do is provide an assertion after the drag (to confirm the effect). Otherwise, the test ends too soon and the test runner never updates to the final page state.
cy.viewport(1200,1200)
cy.visit('https://sortablejs.github.io/vue.draggable.next/#/simple');
// Check order before the drag
const listBeforeDrag = [
{ "name": "John", "id": 0 },
{ "name": "Joao", "id": 1 },
{ "name": "Jean", "id": 2 }
]
cy.contains('h3', 'List')
.next('pre')
.then($el => JSON.parse($el.text()))
.should('deep.eq', listBeforeDrag)
// perform drag
cy.get('[data-draggable]:contains(John)')
.drag('[data-draggable]:contains(Jean)')
// Check order after the drag
const listAfterDrag = [
{ "name": "Joao", "id": 1 },
{ "name": "Jean", "id": 2 },
{ "name": "John", "id": 0 }
]
cy.contains('h3', 'List')
.next('pre')
.then($el => JSON.parse($el.text()))
.should('deep.eq', listAfterDrag)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论