Блог

Я получу имя и значение элемента, используя прослушиватель событий click в 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)
}
 

Я решил. вот мой код:

 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)
}