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

Question

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

项目名称和价值是什么；就是这样（图）

我想获得它的价值，因为我将使用该价值进行处理。

例如元素名称和值；<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', ({ type, 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"]', 'Test'),
        // 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, eClass, id) {
    console.log(`You have clicked on: id: #${id} class: .${eClass} tagName: ${tagName}`);
    let selector = getSelector(tagName, eClass, id);
    console.log('selector: ', selector)
    elementClicked(selector, page)
}

标签： javascripttestinggoogle-chrome-devtoolspuppeteer

Answer 1

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

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, eClass, id) {
    console.log(`You have clicked on: id: #${id} class: .${eClass} tagName: ${tagName}`);
    let selector = getSelector(tagName, eClass, id);
    console.log('selector: ', selector)
    elementClicked(selector, page)
}