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

Question

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

该代码可以在 devtools 控制台中运行，但不能在我的 Node 应用程序中运行。 I understand 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); 
});