Cypress - 拖放 - Angular CDK

Question

使用 cypress 简单实现 Angular CDK 拖放。拥有所有软件包的最新版本，所有问题和解决方案都不起作用。

基本上，拖放操作不会触发。

尝试过

• https://www.npmjs.com/package/@4tw/cypress-drag-drop
• https://docs.cypress.io/api/commands/trigger
• 即使有 stackoverflow 上这个“已解决”问题的答案如何在赛普拉斯测试中实现拖放？

但没有任何作用。

Answer 1

当我们发现问题时，我们就会设法找到解决方案。

简而言之，问题在于角度材料 - cdk，在最新版本中，出于可访问性的目的，它们阻止了屏幕阅读器的“拖放”。没关系，问题是发布的库/解决方案，它们被视为“屏幕阅读器”，因为事件中的“按钮”为 0。

在某些情况下，只需提供“buttons = 1”就足够了，但这不是我们的情况。

因为我们的案例是一个复杂的拖放操作，您只能从“手柄”拖动，并且您将受到列表区域的限制（因此只能在 Y 轴上移动），因此这些解决方案将不起作用。

到目前为止，对美国有效的唯一且最好的解决方案是以下一个：使用 cypress 插件cypress-real-events

const selectorForDraggingElementOrHanlde = 'whatever css selector u need'
const selectorWhereToDropTheElement = 'whatever other css selector u need'

cy.get(selectorForDraggingElementOrHanlde)
        .realMouseDown({ button: 'left', position: 'center' })
        .realMouseMove(0, 10, { position: 'center' });
cy.wait(200) // In our case, we wait 200ms cause we have animations which we are sure that take this amount of time
cy.get(selectorWhereToDropTheElement ).realMouseMove(0, 0, { position: 'center' }).realMouseUp();