Question

我不熟悉使用puppeteer和chrome-dev-tools API。我试图从浏览器上下文中获取当前单击的元素，即event.Target到Node / Puppeteer实例，以便我可以将其转换为JSON以供以后使用。我已经尝试了以下方法，但是似乎没有一种方法可以解决我的问题。

方法1：我试图使用page.exposeFunction（）和page.evaluate（）函数的组合来获取元素，但是打印到节点控制台中的值似乎像其他窗口子对象而不是WebElement，但是浏览器控制台能够打印此元素像Webelement一样完美的价值

const pptr = require('puppeteer-core');
const EventEmitter = require("events");
const myEventTracker = new EventEmitter();

const runScript = async function(){

    const browser = await pptr.launch({
        headless:false,
        executablePath:'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
    });

    const page = await browser.newPage();
    await page.goto('<APPLICATION URL>');
    await page.evaluate(async function(){
        document.addEventListener('click',async function(e){
            fetchElement(e.target);
        })
    })

    await page.exposeFunction('fetchElement',async function(args){
        console.log(await args);
    })

    myEventTracker.on(Event,function(e){
        console.log(e);
    })
}

runScript();

在上述方法中，fetchElement（）打印的输出如下：

{ __zone_symbol__ngModelChangefalse:
   [ { type: 'eventTask',
       state: 'scheduled',
       source: 'HTMLInputElement.addEventListener:ngModelChange',
       zone: 'angular',
       runCount: 0 } ],
  __zone_symbol__keydownfalse:
   [ { type: 'eventTask',
       state: 'scheduled',
       source: 'HTMLInputElement.addEventListener:keydown',
       zone: '<root>',
       runCount: 0 } ],
  __zone_symbol__inputfalse:
   [ { type: 'eventTask',
       state: 'scheduled',
       source: 'HTMLInputElement.addEventListener:input',
       zone: 'angular',
       runCount: 0 } ],
  __zone_symbol__blurfalse:
   [ { type: 'eventTask',
       state: 'scheduled',
       source: 'HTMLInputElement.addEventListener:blur',
       zone: 'angular',
       runCount: 0 } ],
  __zone_symbol__compositionstartfalse:
   [ { type: 'eventTask',
       state: 'scheduled',
       source: 'HTMLInputElement.addEventListener:compositionstart',
       zone: 'angular',
       runCount: 0 } ],
  __zone_symbol__compositionendfalse:
   [ { type: 'eventTask',
       state: 'scheduled',
       source: 'HTMLInputElement.addEventListener:compositionend',
       zone: 'angular',
       runCount: 0 } ] }

而不是在浏览器的控制台中完美打印的下方：

<h4 id="the-observer-pattern-for-our-event-emitter">The Observer Pattern for Our Event Emitter</h4>

方法2：

我尝试使用EventEmiter的第二种方法，但是无论如何我都没有运气，而且无论如何我都会遇到无法处理的诺言拒绝。

请帮助/建议我可以从实时chrome实例中获取目标/单击的WebElement的任何其他方法。在此先感谢：）

如何使用puppeteer和NodeJS API获取当前目标（或当前单击的）UI元素

0 个答案: