赛普拉斯和谷歌地图拖动移动元素，而不是地图答案

【问题标题】：Cypress & Google Maps dragging moves elements, not the map赛普拉斯和谷歌地图拖动移动元素，而不是地图
【发布时间】：2021-10-12 17:13:36
【问题描述】：

我正在尝试在 Cypress (v8) 中编写测试：

地图加载后，我们点击端点/myFleet 来生成标记。
然后，用户拖动地图。而onDragEnd，我们会显示一个“搜索区域”按钮
当用户点击“拖动区域”时，我们再次cy.intercept/myFleet 端点。

当我尝试第 2 项时，搜索区域按钮和 Google 地图缩放控件在 X 轴上“向上”移动与我的 mousemove 事件相同的量，并且搜索按钮上的 click() 不会被触发。

cy.get('#live-view-map')
      .trigger('mousedown')
      .trigger('mousemove', { x: 261, y: 0 })
      .trigger('mouseup')
      .wait(500); // just to allow google maps tiles to resettle after drag

    cy.findByTestId('button-search-area').click();

这是一个 GIF：https://recordit.co/B6H5iWEyK5

这是“之后”的屏幕截图：

为什么我的按钮和谷歌缩放控件向上移动？我认为这会妨碍实际选择和单击元素。

我没有选择正确的元素来拖动 (cy.get('#live-view-map'))？

【问题讨论】：

标签： javascript reactjs google-maps google-maps-api-3 cypress

【解决方案1】：

它没有移动地图的原因似乎是地图没有完全加载。进一步审查后，用户界面中缺少缩放控件。因此，通过添加检查按钮来查找按钮，我们知道地图已经确定。

cy.findByRole('button', {
      name: /zoom out/i,
    });
    cy.get('#live-view-map')
      .trigger('mousedown', { which: 1 })
      .trigger('mousemove', { which: 1, x: 261, y: 0 })
      .trigger('mouseup')
      .wait(500);
    cy.findByTestId('button-search-area').click();

在新视频中，您可以看到 Cypress 渲染地图时带有一些弹跳元素，但现在它更加可预测了。

【讨论】：