[Feature]: Support DOMDebugger.getEventListeners on ElementHandle

[chenstrace]

Bug description

Steps to reproduce the problem:

1. await page.goto('https://www.baidu.com');
2. const elementHandle = await page.$('#hotsearch-refresh-btn');
3. response = await client.send('DOMDebugger.getEventListeners', { objectId: elementHandle.remoteObject().objectId });

Complete Code to reproduce the problem

const puppeteer = require('puppeteer');

(async () => {

    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    const client = await page.target().createCDPSession();

    await page.goto('https://www.baidu.com');
    const elementHandle = await page.$('#hotsearch-refresh-btn');

    console.log(elementHandle.remoteObject().objectId); // objectId has valaue

    response = await client.send('DOMDebugger.getEventListeners', { objectId: elementHandle.remoteObject().objectId });
    console.log(response);


    await browser.close();
})();

Expect:

in step 3, response the returned normally

Actually：

there was a error.

3008355417396813112.3.2
/Users/chenjili/node_modules/puppeteer/lib/cjs/puppeteer/common/Connection.js:286
                error: new Errors_js_1.ProtocolError(),
                       ^

ProtocolError: Protocol error (DOMDebugger.getEventListeners): Could not find object with given id
    at /Users/chenjili/node_modules/puppeteer/lib/cjs/puppeteer/common/Connection.js:286:24
    at new Promise (<anonymous>)
    at CDPSession.send (/Users/chenjili/node_modules/puppeteer/lib/cjs/puppeteer/common/Connection.js:282:16)
    at /Users/chenjili/practise/python/test.js:19:29
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  originalMessage: 'Could not find object with given id'
}

Node.js v18.7.0

Puppeteer version

puppeteer@16.1.0

Node.js version

v18.7.0

npm version

8.15.0

What operating system are you seeing the problem on?

macOS

Relevant log output

3008355417396813112.3.2
/Users/chenjili/node_modules/puppeteer/lib/cjs/puppeteer/common/Connection.js:286
                error: new Errors_js_1.ProtocolError(),
                       ^

ProtocolError: Protocol error (DOMDebugger.getEventListeners): Could not find object with given id
    at /Users/chenjili/node_modules/puppeteer/lib/cjs/puppeteer/common/Connection.js:286:24
    at new Promise (<anonymous>)
    at CDPSession.send (/Users/chenjili/node_modules/puppeteer/lib/cjs/puppeteer/common/Connection.js:282:16)
    at /Users/chenjili/practise/python/test.js:19:29
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  originalMessage: 'Could not find object with given id'
}

Node.js v18.7.0

[OrKoN]

I believe that the objectId is session-specific. Since you are using a new session, you need to get the element handle through that session or use the ElementHandle's session to call getEventListeners.

[chenstrace]

I believe that the objectId is session-specific. Since you are using a new session, you need to get the element handle through that session or use the ElementHandle's session to call getEventListeners.

thanks for your reply. so how to get the session without create a new one? or how to use the ElementHandle's session? I did not see the related API.

[OrKoN]

@chenstrace this is no officially supported API, as re-using the internal Puppeteer session might break Puppeteer. What's your use case? do you only want to use getEventListeners and for what purpose? We could see if it'd make sense to create an API for the getEventListeners.

Alternatively, you can use Runtime.evaluate in your custom session (expression would be document.querySelector('#hotsearch-refresh-btn')) to get the objectId and use it for DOMDebugger.getEventListeners.

[chenstrace]

@chenstrace this is no officially supported API, as re-using the internal Puppeteer session might break Puppeteer. What's your use case? do you only want to use getEventListeners and for what purpose? We could see if it'd make sense to create an API for the getEventListeners.

Alternatively, you can use Runtime.evaluate in your custom session (expression would be document.querySelector('#hotsearch-refresh-btn')) to get the objectId and use it for DOMDebugger.getEventListeners.

@OrKoN thanks for your reply again. My use case is, get each element's event listeners, and then trigger the event, for example, click or drag. The steps I wanted may like below:

    const elements = await page.$$('*');
    for (let index = 0; index < elements.length; index++) {
        const element = elements[index];
        response = await client.send('DOMDebugger.getEventListeners', { objectId: element.remoteObject().objectId });
        
        //do something with the listeners in response
    }

I know the approach you mentioned above can work well, but in my case, I did not know the selector of the element. I mean when I got a ElementHandle or JSHandle, there is no API to get its selector.

[OrKoN]

In the meantime you can use elementHandle.client.send to reach into the internal session but note that it might change in the future. I will re-classify this issue as the feature request to support getEventListeners

[chenstrace]

In the meantime you can use elementHandle.client.send to reach into the internal session but note that it might change in the future. I will re-classify this issue as the feature request to support getEventListeners

OK, many thanks.