赛普拉斯 - 拖放 - Angular CDK

Question

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

基本上，拖放不会触发。

尝试过

https://www.npmjs.com/package/@4tw/cypress-drag-drop
https://docs.cypress.io/api/commands/trigger
即使在 Whosebug 上找到了这个“已解决”问题的答案

但是没有任何效果。

Answer 1

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

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

在某些情况下，只需提供“buttons = 1”就足够了，但我们的情况并非如此。

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

到目前为止，对美国有效的唯一且最好的解决方案是以下一个：使用赛普拉斯插件 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();

赛普拉斯 - 拖放 - Angular CDK

Cypress - Drag & drop - Angular CDK

angular-material

angular

cypress

angular-cdk