JS dispatchEvent не работает

Question

Обычно я не задаю такой специфический вопрос в SO, но я борюсь с этой проблемой в течение нескольких дней, поэтому я ищу здесь некоторую помощь.

Я создаю приложение для автоматизации задачи в веб-версии Whatsapp (https://web.whatsapp.com/).. Моя цель - щелкнуть по кнопке в интерфейсе, чтобы отобразить некоторые параметры, а затем снова щелкнуть по этой же кнопке, чтобы скрыть это.

Чтобы смоделировать, что я хочу сделать вручную:

1 - Откройте WhatsApp Web.

2 - Нажмите кнопку «Присоединить» в правом верхнем углу интерфейса, как показано на рисунке ниже.

3 - опции прикрепления будут показаны, как показано на рисунке ниже:

4 - Нажмите кнопку «Присоединить» еще раз, и параметры подключения будут скрыты.

Вот и все, но я хочу сделать это программно, используя Javascript (чистый JS, без JQuery).

Чтобы выполнить задачу на шаге 2, я успешно использую приведенный ниже код:

var nodes = document.getElementsByTagName('span');
if (typeof lastElementId == 'undefined')
    var lastElementId = 0;
var result = undefined;
for (var i = 0; i < nodes.length; i++) {
    var h = nodes[i].outerHTML;
    var flag = false;
    flag = (h.toLowerCase().indexOf('data-icon="clip') > -1);
    if (flag) {
        result = h;
        lastElementId = i;
        break;
    }
}
if (result !== undefined) {
    function triggerMouseEvent(node, eventType) {
        var clickEvent = document.createEvent('MouseEvents');
        clickEvent.initEvent(eventType, true, true);
        node.dispatchEvent(clickEvent);
    }
    triggerMouseEvent(nodes[i], "mouseover");
    triggerMouseEvent(nodes[i], "mousedown");
} else {
    console.log('Not found');
}
;

Приведенный выше код будет работать для выполнения шага 2, но не будет работать для шага 4. Вручную, когда я нажимаю кнопку «Присоединить» после отображения параметров, параметры будут скрыты. Но не использую мой код JS.

Что мне здесь не хватает?

Заранее спасибо!

Answer 1

Чтобы устранить проблему закрытия:

1. Щелкните правой кнопкой мыши на элементе прикрепления.
2. Выберите inspect element в браузере Chrome
3. На правой панели выберите вкладку Event Listeners и найдите mousedown раздел
4. Щелкните код обработчика и определите, что нам нужно передать определенные screenX и screenY вудовлетворить эту конкретную бизнес-логику и перейти к n.uie.requestDismiss() части, которая, очевидно, делает то, что говорит.

Итак, теперь у нас достаточно информации, чтобы попробовать возможное решение, которое, по-видимому, пока работает.Вот как это выглядит:

const toggleAttach = () => {
  // select the span with reliable identification like data-*
  const clipNode = document.querySelector('[data-icon="clip"]');
  // take its element, i.e. the button itself
  const clipButtonNode = clipNode.parentNode;
  // extract the current offset position relative to the document
  // more info here https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
  // we can use this for filling in the non-0 screenX and screenY
  const clipButtonNodeClientRect = clipButtonNode.getBoundingClientRect();

  clipButtonNode.dispatchEvent(new MouseEvent("mousedown", {
    bubbles: true,
    cancelable: true,
    screenX: clipButtonNodeClientRect.x,
    screenY: clipButtonNodeClientRect.y
  }));
}

Теперь, чтобы понять, почему первый mousedown работает для открытия:

Это гораздо сложнее для обратного инжиниринга, но что мне удалось найтиесли вы установите расширение React DevTools (так как WhatsApp написан на React) и откроете его вкладку в DevTools, вы увидите:

И вот вамнайдет:

Таким образом, мы можем сделать очень расплывчатый вывод, что открытие и закрытие обрабатывается в отдельных функциях.Остальное решать вам.

Надеюсь, это помогло.