Сортируемый js сценарий тестирования транспортира не работает

Question

Я пытаюсь настроить тестовый сценарий транспортира на основе кода с помощью https://github.com/kemokid/scripting-sortable (что я могу подтвердить, работает) для имитации перетаскивания в рамках тестового сценария. К сожалению, тест не проходит каждый раз, что говорит мне, что перетаскивание не работает. Мне было интересно, если три было что-то не так в моей реализации следующего файла: https://github.com/kemokid/scripting-sortable/blob/master/script_sortable_dnd.js. Я основал свои изменения кода на этом, но кажется, что в моем мире "транспортира" это не работает. Как лучше всего это исправить.

Помощник, который выполняет перетаскивание, выглядит следующим образом:

  static dragAndDropSortableItemByClassName(dragElementClassName: string, dropElementClassName: string) {
    return browser.executeScript(function (callback) {
      const DELAY_INTERVAL = 10;
      const MAX_TRIES = 10;
      const elementDrag = document.querySelector(arguments[0]);
      const elementDrop = document.querySelector(arguments[1]);
      const startingDropRectangle = elementDrop.getBoundingClientRect();
      let counter = 0;

      function checkRectanglesAreEqual(r1, r2) {
        return r1.top === r2.top && r1.right === r2.right && r1.bottom === r2.bottom && r1.left === r2.left;
      }

      function fireMouseEvent(type, targetElement) {
        const mouseEvent = document.createEvent('MouseEvents');
        mouseEvent.initMouseEvent(type, true, true, window, 1, 1, 1, 0, 0, false, false, false, false, 0, targetElement);
        targetElement.dispatchEvent(mouseEvent);
      }

      function drop() {
        fireMouseEvent('drop', elementDrop);
        fireMouseEvent('mouseup', elementDrop);
        if (callback) { callback(true); }
      }

      function dragover() {
        counter++;
        const currentDropRectangle = elementDrop.getBoundingClientRect();
        if (checkRectanglesAreEqual(startingDropRectangle, currentDropRectangle) && counter < MAX_TRIES) {
          fireMouseEvent('dragover', elementDrop);
          setTimeout(dragover, DELAY_INTERVAL);
        } else {
          if (checkRectanglesAreEqual(startingDropRectangle, currentDropRectangle)) {
            fireMouseEvent('drop', elementDrop);
            if (callback) {
              callback(false);
            }
          } else {
            setTimeout(drop, DELAY_INTERVAL);
          }
        }
      }

      fireMouseEvent('mousedown', elementDrag);
      fireMouseEvent('dragstart', elementDrag);
      setTimeout(dragover, DELAY_INTERVAL);
    }, dragElementClassName, dropElementClassName);
  }

В моих тестах он вызывается следующим образом:

  it('should display the pages sidebar menu and allow the user to reorder pages', () => {
    Helpers.clickOnElementByClassName('builder-sidebar-menu-pages-icon').then(function () {
      Helpers.getElementCountByClassName('page-row-option', 2);

      Helpers.getElementTextByClassName('builder-sidebar-pages-title-0').then(function (pageTitle) {
        expect(pageTitle).toEqual('Home');
      });

      Helpers.getElementTextByClassName('builder-sidebar-pages-title-1').then(function (pageTitle) {
        expect(pageTitle).toEqual('About');
      });

      Helpers.dragAndDropSortableItemByClassName('.page-row-option-item-1', '.page-row-option-item-0').then(() => {
        Helpers.getElementTextByClassName('builder-sidebar-pages-title-0').then(function (pageTitle) {
          expect(pageTitle).toEqual('About');
        });

        Helpers.getElementTextByClassName('builder-sidebar-pages-title-1').then(function (pageTitle) {
          expect(pageTitle).toEqual('Home');
        });
      });
    });
  });