0

My JS skills are limited and i'm starting my studies on React.

I want to do a simple task : just access the web version of Whatsapp (https://web.whatsapp.com), and fill the input to search a contact. I want to do via JS the same thing i do when i manually enter the input and type a contact name : Whatsapp will search for this contact and show the results.

Because the page has only one input, my first try was to simple set the value of this input :

document.getElementsByTagName('input')[0].value = 'contact name';

This will fill the input, but not trigger the event that would make Whatsapp actually search the contact ; see the image below :

enter image description here

So i tried another approach, as suggested in an answer to a similar question i made last week :

var setValue = Object.getOwnPropertyDescriptor(
  window.HTMLInputElement.prototype,
  "value"
).set
var modifyInput = (value) => {
  const input = document.getElementsByTagName('input')[0]
  setValue.call(input, value)
  input.dispatchEvent(new Event('input', { bubbles: true}))
}

modifyInput('contact name')

In this case, nothing happens at all, no errors but the input is not filled.

What approach should i take to achieve this task ?

Antoni
  • 1,316
  • 2
  • 16
  • 42
delphirules
  • 6,443
  • 17
  • 59
  • 108
  • 1
    because you don't know when the search event fires. you change the input value, but maybe the search is triggered on keydown event or when something else happens. – oshell Nov 08 '19 at 13:23
  • @oshell How can i find out this ? – delphirules Nov 08 '19 at 13:24
  • 2
    you can use functions like getEventListeners(domElement), but even then code is most likely minified and won't tell you much. if you do not have access to the real codebase you will just have to play around. create keydown, keyup and change event manually and trigger them on the input. – oshell Nov 08 '19 at 13:28
  • https://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript – oshell Nov 08 '19 at 13:29
  • another approach would be not to use js to change the value on the dom element, but use tools like puppeteer to actually type in the value. you will probably have more reliable results and achieve your goal much faster. – oshell Nov 08 '19 at 13:30
  • Thanks, i know about puppeteer, i'm just trying to understand how things work under the hood... – delphirules Nov 08 '19 at 13:32
  • @Aprillion , could you help me again on this one , please ? :D – delphirules Nov 08 '19 at 14:31

1 Answers1

2

At the time of writing, the page is using React, so the workaround for setting value is probably still needed. But the element also needs to gain focus before the search is active:

var setValue = Object.getOwnPropertyDescriptor(
  window.HTMLInputElement.prototype,
  "value"
).set
var modifyInput = (value) => {
  const input = document.getElementsByTagName('input')[0]
  input.dispatchEvent(new Event('focus', { bubbles: true}))
  setValue.call(input, value)
  input.dispatchEvent(new Event('input', { bubbles: true}))
}

modifyInput('contact name')

For similar investigations, event listeners can be inspected in browser dev tools, e.g. in Firefox:

firefox dev tools

Aprillion
  • 21,510
  • 5
  • 55
  • 89
  • Could you please help me doing the same thing, but in a DIV ? https://stackoverflow.com/questions/59918078/how-to-modify-div-and-dispatch-event-on-react – delphirules Jan 26 '20 at 12:11