Currently, I am coding a Puppeteer script to automate actions on Discord Web. Specifically, I need the script to open Discord Web, log in (including manual captcha and authorization steps), navigate to a channel, enter a message into the chat input field, and send it successfully.
This project stands out from others because it does not involve using a Discord Webhook or Application for message delivery.
The main challenge I am facing is that the element where the message is entered is a contenteditable div.
One potential issue could be that even though simulating the Enter key press appears to work visually, the message may not be sent because setting the innerText of the div does not effectively communicate the intended message to be sent. I have also observed that the placeholder text remains visible.
For reference, please see the screenshot illustrating the specific element: https://i.sstatic.net/YEk4H.png
The code segment responsible for sending the message looks like this:
const selector = 'div[contenteditable=true]:nth-child(2)';
page.goto('https://discord.com/channels/2358929835296835/39057203957203');
await page.waitForSelector(selector);
await page.focus(selector);
await page.$eval(selector, el => el.innerText = 'Hello, world!');
await page.keyboard.press((String.fromCharCode(13) as any));
I would greatly appreciate any suggestions you may have regarding alternative methods to successfully send the message. The current code successfully populates the message form with 'Hello, world' but encounters difficulties in sending it.
UPDATE: It seems that Discord employs a library called Slate for their messaging feature which constructs a nested span tree as messages are typed. While I have managed to edit the relevant span with text, I still face challenges triggering the message to be sent.
I have also reached out to the creator with the same inquiry, however, no solutions have been found yet.