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

Answer 2

点击链接后使用page.waitForNavigation()可以按区域进行过滤：

this

然后，您可以从$(document).ready(function(){ // The variables that need to be remembered throughout the app var index = 0; var records = []; // Function to set form values function displayRecord(){ var record = records[index]; $('#record_id').text(record.id); $('#date_added').text(record.reg_date); $('#est_name').val(record.name); } // Increment index when the skip button is clicked and display data document.getElementById('skip').addEventListener('click', function(){ index++; displayRecord(); }); $.getJSON(/**/ records = data; displayRecord(); /**/); });元素中抓取文本并记录结果：

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
...，但这不是必需的，因为看起来第一个和最后一个元素都不是grupos.slice(1, -1)。

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

2 个答案: