Перетаскивание Cypress и Google Maps перемещает элементы, а не карту

avatar
Phil Lucks
8 августа 2021 в 21:10
1033
1
0

Я пытаюсь написать тест на Cypress (v8):

  1. Когда карта загружается, мы нажимаем конечную точку /myFleet для создания маркеров.
  2. Затем пользователь перетаскивает карту. И onDragEnd, мы отображаем кнопку "Область поиска"
  3. Когда пользователь нажимает «Область перетаскивания», мы снова cy.intercept конечную точку /myFleet.

Когда я пытаюсь выполнить пункт 2, кнопка "Область поиска" и элементы управления масштабированием Google Maps перемещаются "вверх" по оси 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();

Вот гифка: https://recordit.co/B6H5iWEyK5

и вот скриншот "ПОСЛЕ": enter image description here

Почему моя кнопка и элемент управления масштабированием Google перемещаются вверх? Я думаю, что это мешает возможности выбрать и щелкнуть элемент.

Я выбрал не тот элемент для перетаскивания (cy.get('#live-view-map'))?

Источник

Ответы (1)

avatar
Phil Lucks
9 августа 2021 в 17:24
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 визуализирует карту с некоторыми подпрыгиваниями элементов, но теперь это более предсказуемо.