如何在 puppeteer 中使用单击事件侦听器查找元素名称和值

如何解决如何在 puppeteer 中使用单击事件侦听器查找元素名称和值

我将使用 puppeteer 中的单击事件侦听器获取元素名称和值。

物品名称和价值是什么； That's it (Photo)

我想得到它的值，因为我会用那个值来处理。

例如元素名称和值； <input type="text" name="username" autofocus="" class="form-control" placeholder="Username" title="" required="" id="id_username">

稍后，我将单击具有该值的按钮或将值打印到输入中。

这是我的代码：

const puppeteer = require("puppeteer");
(async () => {
const browser = await puppeteer.launch(
    {
        "headless": false,defaultviewport: null,args: ['--start-maximized'],"slowMo": 1
    });
const page = (await browser.pages())[0];
///////////////////////////////////////////////////////////////////// Here is my code:
await page.exposeFunction('onClick',({ type,detail }) => {
    console.log(`Event fired: ${type},detail: ${detail}`);
});

await page.evaluateOnNewDocument(() => {
    window.addEventListener('click',detail }) => {
        window.onClick({ type,detail });
    });
});
///////////////////////////////////////////////////////////////////////
await page.goto('https://auth.pleaseignore.com/login/',{ waitUntil: 'networkidle2' });
try {
    await Promise.all([
                    //(The received value will be written here:[type="text"])  -------Notice------
        await page.type('[type="text"]','Test'),await page.type('[type="password"]',// await page.evaluate(() => { document.querySelector('.btn.btn-primary.pull-right').click(); }),page.waitForNavigation({ waitUntil: 'networkidle0',timeout: 10000 }),]);

} catch (error) {
    console.log("ERROR!")
}

})();

我应该得到点击项的值

我解决了，这是我的代码：

    await page.exposeFunction('onClick',onClick);  

 // Listening for click events on the window
await page.evaluateOnNewDocument(() => {
    window.addEventListener('click',(event) => {
        let tagName = event.target.tagName
        let eClass = event.target.getAttribute("class")
        let id = event.target.getAttribute("id")
        window.onClick(tagName,eClass,id);
    });
});

await page.goto('https://auth.pleaseignore.com/login/',{ waitUntil: 'networkidle2' });

function onClick(tagName,id) {
    console.log(`You have clicked on: id: #${id} class: .${eClass} tagName: ${tagName}`);
    let selector = getSelector(tagName,id);
    console.log('selector: ',selector)
    elementClicked(selector,page)
}

解决方法

我解决了。这是我的代码：

await page.exposeFunction('onClick',onClick);

// Listening for click events on the window
await page.evaluateOnNewDocument(() => {
    window.addEventListener('click',(event) => {
        let tagName = event.target.tagName
        let eClass = event.target.getAttribute("class")
        let id = event.target.getAttribute("id")
        window.onClick(tagName,eClass,id);
    });
});

await page.goto('https://auth.pleaseignore.com/login/',{ waitUntil: 'networkidle2' });

function onClick(tagName,id) {
    console.log(`You have clicked on: id: #${id} class: .${eClass} tagName: ${tagName}`);
    let selector = getSelector(tagName,id);
    console.log('selector: ',selector)
    elementClicked(selector,page)
}