Cypress&amp；Google地图拖动移动元素，而不是地图

我正在尝试用Cypress(V8)编写测试：

1. 加载地图时，我们命中终结点/myFleet以生成标记。
2. 然后，用户拖动地图。和onDragEnd，我们将显示一个按钮以搜索区域
(&QOOT；Search Area&Quot；)
3. 当用户单击"；拖动区域(&q；)时，我们再次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

这里是"；之后的"；的屏幕截图：

为什么我的按钮&；Google缩放控件上移？我认为它干扰了实际选择&；单击该元素。

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

解决方案

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

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渲染地图时使用了一些跳跃的元素，但现在更具可预测性。