Cypress 与 OpenLayers - 如何模拟 ctrl + 鼠标拖动答案

【问题标题】：Cypress with OpenLayers - how to simulate ctrl + mouse dragCypress 与 OpenLayers - 如何模拟 ctrl + 鼠标拖动
【发布时间】：2020-06-10 12:13:09
【问题描述】：

我正在尝试使用 Cypress 在 OpenLayers 地图上模拟 ctrl + 鼠标拖动。

我设法让 OpenLayers 注册点击/赛普拉斯事件（例如，点击以创建功能）的唯一方法是使用 .click() 例如

cy.get('#map').click(845, 710);

如果我使用.trigger() 和pointerdown/mousedown/dragstart，它要么静默失败，要么引发错误。无论哪种方式，它都不起作用。

因为.click() 也会发出pointerdown/pointerup 事件，所以我似乎无法使用它来模拟 ctrl + 鼠标拖动。

此外，要按 ctrl，我使用以下命令：cy.get('body').type('{ctrl}', {release: false}) - 这有效。

我不知道下一步该尝试什么。 .click() 有没有我失踪的财产？或者这是 OpenLayers 或 Cypress 的潜在错误/问题？

编辑：我使用的是 Cypress 4.8.0 和 OpenLayers 6.3.1

【问题讨论】：

您可以分享任何我们可以处理的 sn-p 吗？
嗨！我的回答是否帮助您解决了问题？

标签： javascript openlayers cypress openlayers-6

【解决方案1】：

您有两种可能性：一，这是赛普拉斯中的一个错误，或者二，您处理错误的事件。

赛普拉斯的基本工作方式是通过浏览器内的 API 运行事件，而不是模拟实际的键盘或鼠标操作 (source from a Cypress employee)，因此您只能模拟浏览器侦听的单个事件。所以我看了一下赛普拉斯的做法，发现人们过去有过problems with it。您可以在该链接中的 Github 讨论结束时尝试 sn-p，我不确定这是否会起作用。

在这种情况下，您正在模拟一个将 Event.ctrlKey 设置为 true 的 Click 事件。（或者至少：这就是你想要发生的事情。）为了进一步调试，我会记录事件本身，并检查是否设置了 event.ctrlKey：

如果它是假的 - 你去，这是赛普拉斯的一个错误。
如果是真的，那么 Cypress 工作正常，您只是在以不寻常的方式收听 ctrl/click 事件，如果您切换到 this 之类的东西，您会很好。

祝你好运，让我知道进展如何！

【讨论】：

【解决方案2】：

如果您有正确的 DnD 源和目标元素设置，那么trigger 将起作用：

describe('DnD simulation test', () => {
  it('finds the content "type"', () => {
    cy.visit('https://zikro.gr/dbg/so/62303304/dnd-with-cypress.html');

    // #dz-a -> Dropzone A, which the #drag is inside when page loads
    // #dz-b -> Dropzone B, which the #drag element will be inside after DnD simulation

    cy.get('#drag').trigger('dragstart', { ctrlKey: true });
    cy.get('#dz-b').trigger('drop', { ctrlKey: true });
    cy.get('#drag').trigger('dragend', { ctrlKey: true });

    // We just test if the destination element has 1 child after the DnD simulation.
    // When the page loads it has no children at all, but after DnD simlation it has exactly 1 element
    cy.get('#dz-b').children().should('have.length', 1);
  });
});

URL https://zikro.gr/dbg/so/62303304/dnd-with-cypress.html 中的页面已启动，并且它具有 DnD 功能，您可以使用上述代码并测试并检查控制台中的日志，该日志也将检测 Ctrl 键。它在事件模拟之后测试放置目标目标是否具有子元素。当然，您可以执行任何其他测试来证明源已从 A 下降到 B 目标。

【讨论】：