Как имитировать ввод сообщения в WhatsApp Web?

Question

[Надим]

Просто ввести сообщение и отправить его пользователю не проблема:

document.querySelector('div#main div[contenteditable="true"]').innerHTML = 'Проверка...';
document.querySelector('div#main div[contenteditable="true"]').dispatchEvent(new Event('input', { bubbles: true }));
document.querySelector('span[data-icon="send"]').click();

Однако, как заставить сработать событие ввода? Чтобы собеседник видел надпись печатает...?

Answer 1

[Mikhail Osher]

Задержки добавить между нажатиями клавиш. Сейчас это выглядит, будто моментально нажимается.
Средний words per minute = 40, это где-то 200 символов. 60 / 200 = 0.3 секунды на кнопку.
Пробуйте 0.2-0.3 секунды задержку между событиями. Так же, должно список событий на нажатие клавиши должен быть таким:
- keydown
- keypress
- input
- keyup

Comments

[Надим]

Помогло) Написал функцию для имитации ввода, на удивление теперь все заработало. Спасибо человече!)

function textEnter(text) {
	
	var text_array = text.split('');
	
	var div = document.querySelector('div#main div[contenteditable="true"]');
	
	div.focus();
	
	var enter_emulator = setInterval(function() {
		
		if (text_array.length > 0) {
			
			var symbol = text_array.shift();
			div.textContent = div.textContent + symbol;
			
			div.dispatchEvent(
				new KeyboardEvent('keydown', {
					bubbles: true
				})
			);
			
			div.dispatchEvent(
				new KeyboardEvent('keypress', {
					bubbles: true
				})
			);
			
			div.dispatchEvent(
				new KeyboardEvent('keyup', {
					bubbles: true
				})
			);
			
			div.dispatchEvent(
				new InputEvent('input', {
					bubbles: true
				})
			);
			
		}
		
		else {
			
			clearInterval(enter_emulator);
			document.querySelector('span[data-icon="send"]').click();
			
		}
		
	}, 100);

}

textEnter('Проверка события ввода сообщения в мессенджере WhatsApp. Смотрим отсылается ли информация о том, что собеседник в данный момент печатает сообщение.');

[Mikhail Osher]

Надим Закиров, Можете подсмотреть, как оно работает в библиотеке для тестирования и эмуляции событий пользователя https://github.com/testing-library/user-event/blob...

[Надим]

Mikhail Osher, нечитаемо, у меня опыта не хватает, чтобы в такой код сходу врубаться. Да и нужды уже нет)

Answer 2

[Надим]

Написал функцию для эмуляции ввода сообщения в WhatsApp Web:

// Вызываем функцию для набора текста и отправки:

textEnter('Проверка события ввода сообщения в мессенджере WhatsApp. Смотрим, отсылается ли информация о том, что собеседник в данный момент печатает сообщение.');

// Функция для имитации ввода сообщения и его отправки:

function textEnter(text) {
	
	var array = text.split(''); // Разбиваем текст по символам в массив
	
	// Ищем поле вввода сообщения и записываем ссылку на него в переменную:
	
	var div = document.querySelector('div#main div[contenteditable="true"]');
	
	div.focus(); // Передаём фокус на поле ввода
	
	// Запускаем эмулятор посимвольного ввода:
	
	var emulator = setInterval(function() {
		
		// Пока есть символы в сообщени:
		
		if (array.length > 0) {
			
			// Вводим символ:
			var symbol = array.shift();
			div.innerHTML = div.innerHTML + symbol;
			
			// Передаём клавиатурные события отвечающие за ввод:
			div.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true }));
			div.dispatchEvent(new KeyboardEvent('keypress', { bubbles: true }));
			div.dispatchEvent(new KeyboardEvent('keyup', { bubbles: true }));
			div.dispatchEvent(new InputEvent('input', { bubbles: true }));
			
		}
		
		// Если все символы введены:
		
		else {
			
			clearInterval(emulator); // Отключаем эмулятор ввода
			
			// Ищем и жмем кнопку отправки сообщения собеседнику:
			document.querySelector('span[data-icon="send"]').click();
			
		}
		
	}, 100);

}

Наверняка многим пригодится. Спасибо Mikhail Osher за наводку на правильный алгоритм действий)