NodeJS/Puppeteer - 按标签名称获取元素列表

Question

我需要收集所有的 h1 标签，然后弹出第一个和最后一个。

代码在 devtools 控制台中有效，但在我的 Node 应用程序中无效。 page.evaluate does not work directly with DOM，但是我照了几个例子，都没有成功。

这是我想要的结果：

这是我的代码：

const puppeteer = require('puppeteer');

//process.on("unhandledRejection");

let liga = async () => {
    const browser = await puppeteer.launch({ headless: true });
    const page = await browser.newPage();
    page.on('console', consoleObj => console.log(consoleObj.text()));
    const URL = 'http://dummy.org.br/grupo';


    //Pegar o dia da semana atual
   ...irrelevant...

    //Vai até a página
    await page.goto(URL, {waitUntil: 'load'});
    console.log('On: ' + page.url());


    //Escolher o estado/região
    const estado = 'RIO DE JANEIRO';
    const selectEstado = await page.$('select[name="busca_grupo_estado"]');
    await selectEstado.type(estado);

    const cidade = 'RIO DE JANEIRO';
    const selectCidade = await page.$('select[name="busca_grupo_cidade"]');
    await selectCidade.type(cidade);

    const btn = await page.$('#frm_busca_uf > div.col-xs-4.no-padding-right > div > div.col-xs-2 > a');
    btn.click();

    //     PROBLEM STARTS HERE

    //Pegar grupos do dia
    //body > div.content-home > div > div.box > div > div:nth-child(2) > div.col-md-12.no-padding > div:nth-child(4) > div:nth-child(2) > div.col-xs-12 > div:nth-child(1) > div:nth-child(1) > h1
    //==xpath: /html/body/div[3]/div/div[2]/div/div[2]/div[2]/div[4]/div[2]/div[3]/div[1]/div[1]/h1

    //........NOT WORKING:
    //this code works fine in chrome console
    /* const grupos = await page.evaluate( () => {
        var data = [];
        var nomes = document.querySelectorAll('h1'); //chrome returns a notelist with 118 elements
        //i don't want the 1s and the last one is undefined
        for(var c = 1; c <= nomes.length-1; c++ ) {
            console.log(nomes[c].textContent);
            data.push(nomes[c].textContent);
            console.log(data[c]);
        }
        return data;
    });

    console.log(grupos[0]);
    console.log(grupos[1]);
    console.log(grupos[2]); */

    //........NOT WORKING:
    //const grupos = await page.$$('h1');

    //........NOT WORKING:
    /* const grupos = await page.evaluate( () => Array.from( document.querySelectorAll( 'h1' ), element => element.textContent) );
    console.log(grupos[0]);
    console.log(grupos[1]); */

    //browser.close();
}

liga().then((value) => {
    console.log(value); 
});

Answer 1

您实际上需要等待页面重新加载搜索结果。请参阅下面修改后的当前工作代码：

const puppeteer = require('puppeteer');

let liga = async () => {
    const browser = await puppeteer.launch({ headless: true });
    const page = await browser.newPage();
    page.on('console', consoleObj => console.log(consoleObj.text()));
    const URL = 'http://na.org.br/grupo';

    //Vai ate a pagina
    await page.goto(URL, {waitUntil: 'load'});
    console.log('On: ' + page.url());

    //Escolher o estado/regiao
    const estado = 'RIO DE JANEIRO';
    const selectEstado = await page.$('select[name="busca_grupo_estado"]');
    await selectEstado.type(estado);

    const cidade = 'RIO DE JANEIRO';
    const selectCidade = await page.$('select[name="busca_grupo_cidade"]');
    await selectCidade.type(cidade);

    const btn = await page.$('#frm_busca_uf > div.col-xs-4.no-padding-right > div > div.col-xs-2 > a');
    btn.click();

    // Wait for the page to reload with results
    await page.waitForNavigation();

    const grupos = await page.evaluate( () => Array.from( document.querySelectorAll( 'h1' ), element => element.textContent) );

    browser.close();

    return grupos;
}

liga().then((value) => {
    console.log(value); 
});

Answer 2

点击link后使用page.waitForNavigation()按地区过滤：

const btn = await page.$('#frm_busca_uf a');
await btn.click();

await page.waitForNavigation();

然后，您可以从 h1 元素中抓取文本并记录结果：

const grupos = await page.evaluate(() => Array.from(document.getElementsByTagName('h1'), e => e.textContent));

console.log(grupos[0]); // Encontre uma reunião
console.log(grupos[1]); // Trindade
console.log(grupos[2]); // Paraiso

Note: If you would like to remove the first and last element of the array, you can use grupos.slice(1, -1):
const new_grupos = grupos.slice(1, -1);
... but this should not be necessary, as it appears that the first and last elements are not undefined.

NodeJS/Puppeteer - 按标签名称获取元素列表

NodeJS/Puppeteer - Get list of elements by tag name

node.js

puppeteer