angular - Cypress - 拖放 - Angular CDK

Question

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

基本上，拖放不会触发。

尝试过

• https://www.npmjs.com/package/@4tw/cypress-drag-drop
• https://docs.cypress.io/api/commands/trigger
• 即使在 stackoverflow 上找到了这个“已解决”问题的答案 How to implement drag and drop in cypress test?

但是什么都行不通。

Answer 1

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

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

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

因为我们的案例是一个复杂的拖放，您只能从“ handle ”拖动并且您将被限制在列表区域(因此只能在 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();