'Puppeteer - Opening Discord Profile Popup

I am building a web application for a project and I would like to send a message in a discord server via Puppeteer without using the Discord.js library. I have my user logging etc.. and going into the correct server and chatroom but I'm stuggling to open the popup on a users last message in the server to send them a private message.

E.G

enter image description here

Here is some of my code that attempts to trigger the opening and reads the latest messages:

  DiscordPage.exposeFunction('puppeteerLogMutation', (latestMessageId, latestMessage, username, userProfileId, userProfile) => {
    sendUserAMessage(DiscordPage, latestMessageId, latestMessage, username, userProfileId, userProfile);
  });


  // This is the area where the chat messages are loaded.
  await DiscordPage.waitForSelector('ol.scrollerInner-2PPAp2');

  // Evaluate the page and feed through the latest messages.
  await DiscordPage.evaluate(() => {

const target = document.querySelector('.scrollerInner-2PPAp2');

const observer = new MutationObserver( mutations => {
  for (const mutation of mutations) {
    if (mutation.type === 'childList') {

        var message = document.querySelectorAll("li.messageListItem-ZZ7v6g:last-of-type");
        var latestMessage = message[0].querySelectorAll('.message-2CShn3')[0].querySelectorAll('.messageContent-2t3eCI')[0].innerHTML,
            latestMessageId = message[0].id,
            username = message[0].querySelectorAll('.message-2CShn3')[0].querySelectorAll('.contents-2MsGLg')[0].querySelectorAll('.header-2jRmjb')[0].querySelectorAll('.username-h_Y3Us')[0].innerText,
            userProfileId = message[0].querySelectorAll('.message-2CShn3')[0].querySelectorAll('.contents-2MsGLg')[0].querySelectorAll('.header-2jRmjb')[0].querySelectorAll('.headerText-2z4IhQ')[0].id;
            userProfile = message[0].querySelectorAll('.message-2CShn3')[0].querySelectorAll('.contents-2MsGLg')[0].querySelectorAll('.header-2jRmjb')[0].querySelectorAll('.headerText-2z4IhQ')[0].querySelectorAll('.username-h_Y3Us')[0].className.split(" ")[0];

        puppeteerLogMutation(latestMessageId, latestMessage, username, userProfileId, userProfile);

    }
  }
});

observer.observe(target, { childList: true });

});

}



 async function sendUserAMessage(DiscordPage, latestMessageId, latestMessage, username, userProfileId, userProfile) {

write_log(true, "Into sending message.");

var userProfileId = userProfileId.replace(/ /g,'');


// NEED TO OPEN THE POPUP.....

var lastMessage = await DiscordPage.$('li#'+latestMessageId + ' ' + 'img.avatar-2e8lTP');
await lastMessage.focus();
await DiscordPage.$eval('li#'+latestMessageId + ' ' + 'img.avatar-2e8lTP', (el) => el.click());


console.log('Username:', username);
console.log('Last Message ID:', latestMessageId);
// console.log('Last Message:', latestMessage);

}

It does select the latest message because I can see it gets highlighted but it doesn't open the popup.

Does anybody have any ideas?



Solution 1:[1]

Well after 5 hours of trying I've fixed it.

Turns out the following isn't the correct way for this instance

await DiscordPage.$eval('li#'+latestMessageId + ' ' + 'img.avatar-2e8lTP', (el) => el.click());

You need to just do

 var lastMessage = await DiscordPage.$('li#'+latestMessageId + ' ' + 'img.avatar-2e8lTP');
await lastMessage.focus();
await lastMessage.click();

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Codarz360