Как корректно кликать по формам JQuery?

Question

[Gansterito]

Добрый день.

Встала задача автозаполнения форм. Можно сказать скоростного автозаполнения. Этакая специальная дисциплина...

Формы - обычные заявки, куда нужно ввести кучу реквизитов, поставить пару десятков галочек в чекбоксах и т.д. Все это дело запилено через JQuery.

Сделал на базе Python + Selenium. Работает медленно, чуть медленнее, чем вручную. Есть куда оптимизировать, но все равно связка работает долго.

Решил попробовать сделать на JS, который через консоль в виде скрипта инжектируется в тело страницы, после чего выполняет нужные заполнения. Здесь и возникли проблемы - если поставить галочку на INPUT-е не составляет проблем (все работает на ура), то заполнить поле из выпадающего списка на JS не получается совсем.

Через Selenium это делалось просто - ищем нужный элемент, кликаем на нем, в дереве DOM динамически подгружаются новые элементы, ищем нужный, кликаем на нем. Всё. Результат визуально отображается в браузере.

Через JS клик не работает. Есть подозрение, что JQuery сам выступает диспетчером событий, программный клик по контролам его не устраивает и эти события он игнорирует. Пробовал перед кликом делать фокус - не помогает. Отслеживал в отладчике браузеров (FF, Chrome) последовательности эвентов при ручном клике, программно делал 1-в-1, без толку.

Подскажите, есть ли какие-то шансы средствами JS реализовать эмуляцию кликов и заполнений форм?

Answer 1

[zkrvndm]

Если вызываете на элементе событие, то делайте его всплывающим. Например, после ввода текста в поле:

input = document.querySelector('input');

input.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true }));
input.dispatchEvent(new KeyboardEvent('keypress', { bubbles: true }));
input.dispatchEvent(new KeyboardEvent('keyup', { bubbles: true }));
input.dispatchEvent(new InputEvent('input', { bubbles: true }));
input.dispatchEvent(new InputEvent('change', { bubbles: true }));

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

Comments

[Gansterito]

Спасибо, видимо, оно.
С IE 5.5 испытывал негативные чувства к JS и веб-программированию. Пожалуй, за 20+ лет все серьезно поменялось и нужно бы пересмотреть свое отношение!

Answer 2

[Антон Шаманов]

тебе не click нужен, а input и/или change