How can i type text in javascript?

Question

How can I type text in javascript?

Background-Info

I'm trying to create a python selenium bot to comment on various TikTok posts. Now the issue is when trying to comment on the post, it won't let you insert text because the comment box isn't an input element but a DIV element. I am aware you can edit the span value that's inside of the DIV with javascript but if you interact with it using code it won't let me leave mentions or tagging people. All of this was discussed here but I didn't get any feedback from anyone and this is a separate question so that's why I made a second post.

---

My issue

So after some thinking, I think I found a solution. So originally I was using pyautogui to just type the text I needed so I could mention people. So I thought "what if I get this working but with javascript because you can call javascript functions with selenium". So I was wondering how I could make javascript type on a webpage.

---

What I've tried

• I've tried document.write('') but the issue with this, is that it just clears the entire page and only shows the value provided

• I tried researching my question but was unable to find anything

---

My goal

My goal is to simply be able to type text with java script, I don't want to update a value I want to simulate keystrokes.

Answer 1

Following Dermo909's comment, here is some js code to active events, and set focus (that will simulate a real typing effect to the browser).

Edit: JavaScript is the best way to interact with the browser. I'm not familier with a python solution for triggering events on the web. This code will make the js code work in the python selenium enviroment (read more):

from selenium import webdriver
driver = webdriver.Firefox(executable_path="C:\\geckodriver.exe")

solution

// Choose the desired span, and add your text into it
driver.execute_script("document.quarySelectorAll('span[data-offset-key]')[0].innerHTML = '@userName' ");

// try setting focus on the span to active the popup list
driver.execute_script("document.quarySelectorAll('span[data-offset-key=\"eap17-0-0\"]')[0].focus()")

// try setting a change event on the span to active the popup list
driver.execute_script("document.quarySelectorAll('[data-offset-key=\"eap17-0-0\"]')[0].dispatchEvent(new Event('change', { 'bubbles': true }))")

// try typing with keyBoard events (make sure to select the span first):
driver.execute_script("document.quarySelectorAll('span[data-offset-key=\"eap17-0-0\"]')[0].focus()")
driver.execute_script("document.quarySelectorAll('span[data-offset-key]')[0].innerHTML= '@'");
driver.execute_script("document.dispatchEvent(new KeyboardEvent('keypress', {'key': 'u'}))");

how does this work?

Lets break it down:

1. selecting the span

mySpan = document.quarySelectorAll('span')[0]
// quarySelectorAll returns a list of elements from your webpage according to the the description in the (...)
// then chooses the first (and hopfully the only one) using [0].

2. change the span's text:

mySpan.innerHTML = '@userName'

3. setting the focus on the span to simulate a real user interface

mySpan.focus()

4. Telling the browser that the span has changed (when done progrematiclly sometimes he is unaware of that)

mySpan.dispatchEvent(new Event('change', { 'bubbles': true }))