我正在从事一些 Puppeteer 支持的网站分析,确实需要在页面上列出所有事件。
使用“普通”JavaScript 很容易,所以我想我可以在 Puppeteer 中评估它并开始其他任务。
嗯 - 这不是那么容易,例如“getEventListeners”不起作用。所以下面的这段代码不起作用(但如果我采用被评估的代码,将其复制到浏览器的控制台并运行 - 它运行良好);
exports.getDomEventsOnElements = function (page) {
return new Promise(async (resolve, reject) => {
try {
let events = await page.evaluate(() => {
let eventsInDom = [];
const elems = document.querySelectorAll('*');
for(i = 0; i < elems.length; i++){
const element = elems[i];
const allEventsPerEl = getEventListeners(element);
if(allEventsPerEl){
const filteredEvents = Object.keys(allEventsPerEl).map(function(k) {
return { event: k, listeners: allEventsPerEl[k] };
})
if(filteredEvents.length > 0){
eventsInDom.push({
el: element,
ev: filteredEvents
})
}
}
}
return eventsInDom;
})
resolve(events);
} catch (e) {
reject(e);
}
})
}
我已经进一步调查,看起来这在 Puppeteer 中不起作用,甚至尝试使用旧的 JQuery 的 const events = $._data( element[0], 'events' );
但是它也不起作用。
然后我偶然发现了 Chrome DevTools Protocol (CDP),应该可以通过预先定义单个元素来获取它;
const cdp = await page.target().createCDPSession();
const INCLUDE_FN = true;
const { result: {objectId} } = await cdp.send('Runtime.evaluate', {
expression: 'foo',
objectGroup: INCLUDE_FN ?
'provided' : // will include fn
'' // wont include fn
});
const listeners = await cdp.send('DOMDebugger.getEventListeners', { objectId });
console.dir(listeners, { depth: null });
(来源:https://github.com/puppeteer/puppeteer/issues/3349)
但是当我想检查每个 DOM 元素的事件并将它们添加到数组时,这看起来太复杂了。我怀疑有比循环页面元素并为每个元素运行 CDP 更好的方法。或者更好地说 - 我希望 :)
有什么想法吗?
我只想拥有一个包含(JS)事件的所有元素的数组,例如:
let allEventsOnThePage : [
{el: "blutton", events : ["click"]},
{el: "input", events : ["click", "blur", "focus"]},
/* you get the picture */
];
最佳答案
我很好奇,所以我研究了扩展您找到的那个 CDP 示例,并想出了这个:
async function describe (session, selector = '*') {
// Unique value to allow easy resource cleanup
const objectGroup = 'dc24d2b3-f5ec-4273-a5c8-1459b5c78ca0';
// Evaluate query selector in the browser
const { result: { objectId } } = await session.send('Runtime.evaluate', {
expression: `document.querySelectorAll("${selector}")`,
objectGroup
});
// Using the returned remote object ID, actually get the list of descriptors
const { result } = await session.send('Runtime.getProperties', { objectId });
// Filter out functions and anything that isn't a node
const descriptors = result
.filter(x => x.value !== undefined)
.filter(x => x.value.objectId !== undefined)
.filter(x => x.value.className !== 'Function');
const elements = [];
for (const descriptor of descriptors) {
const objectId = descriptor.value.objectId;
// Add the event listeners, and description of the node (for attributes)
Object.assign(descriptor, await session.send('DOMDebugger.getEventListeners', { objectId }));
Object.assign(descriptor, await session.send('DOM.describeNode', { objectId }));
elements.push(descriptor);
}
// Clean up after ourselves
await session.send('Runtime.releaseObjectGroup', { objectGroup });
return elements;
}
它将返回一个对象数组,每个对象(至少)具有 node
和 listeners
属性,并且可以按如下方式使用:
/** Helper function to turn a flat array of key/value pairs into an object */
function parseAttributes (array) {
const result = [];
for (let i = 0; i < array.length; i += 2) {
result.push(array.slice(i, i + 2));
}
return Object.fromEntries(result);
}
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://chromedevtools.github.io/devtools-protocol', { waitUntil: 'networkidle0' });
const session = await page.target().createCDPSession();
const result = await describe(session);
for (const { node: { localName, attributes }, listeners } of result) {
if (listeners.length === 0) { continue; }
const { id, class: _class } = parseAttributes(attributes);
let descriptor = localName;
if (id !== undefined) { descriptor += `#${id}`; }
if (_class !== undefined) { descriptor += `.${_class}`; }
console.log(`${descriptor}:`);
for (const { type, handler: { description } } of listeners) {
console.log(` ${type}: ${description}`);
}
}
await browser.close();
})();
这将返回如下内容:
button.aside-close-button:
click: function W(){I.classList.contains("shown")&&(I.classList.remove("shown"),P.focus())}
main:
click: function W(){I.classList.contains("shown")&&(I.classList.remove("shown"),P.focus())}
button.menu-link:
click: e=>{e.stopPropagation(),I.addEventListener("transitionend",()=>{O.focus()},{once:!0}),I.classList.add("shown")}
关于javascript - 如何获取 Puppeteer 访问的页面的所有 DOM 元素上的所有事件 - 基本上是 getEventListeners,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67012242/