title: DevTools Programmatically input text and trigger keypress, keydown, keyup events
body: <p>In DevTools, I am trying to programmatically populate a login form (as an experiment into personal time-saving dev techniques).</p>
  <p>The input form is on the screen, and in DevTools I can populate the input field like this:</p>
  <pre><code>document.getElementsByTagName('input').item(0).value = &quot;myLoginID&quot;;
  </code></pre>
  <p>But this doesn't trigger the keypress/keydown/keyup events that React needs to set the state variable.</p>
  <p>How would I do that (trigger those events)?</p>
  <p>I tried this, but nothing appeared in the input field:</p>
  <pre><code>document.getElementsByTagName('input').item(0).dispatchEvent(new KeyboardEvent('keypress', {'key': 'm'}));
  </code></pre>
  <p><strong>References:</strong></p>
  <p><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection/item" rel="nofollow noreferrer">MDN HTMLCollection.item</a></p>
  <p><a href="https://www.geeksforgeeks.org/trigger-a-keypress-keydown-keyup-event-in-js-jquery/" rel="nofollow noreferrer">Trigger a keypress/keydown/keyup event in JS</a></p>
  <p><a href="https://developer.chrome.com/docs/devtools/javascript/" rel="nofollow noreferrer">Chrome Developer Tutorial on Debugging JavaScript</a></p>