Como encontrar elementos por seletor CSS no Puppeteer?

Os seletores CSS são uma das formas mais eficientes de analisar páginas HTML no Scraping de dados. No Node.js e no Puppeteer, você pode usar seletores CSS com os métodos page.$ e page.$$. Esses métodos permitem que você interaja com elementos na página usando a sintaxe CSS familiar.

Abaixo está um código de exemplo que demonstra como usar esses métodos para encontrar elementos em uma página, juntamente com comentários detalhados para ajudar você a entender cada etapa.

      const puppeteer = require('puppeteer');

async function run() {
    // Inicie uma nova instância do navegador
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    
    // Navegue até a página da web de destino
    await page.goto("https://httpbin.dev/html", { waitUntil: 'domcontentloaded' });

    // Obtenha o primeiro elemento correspondente
    const firstParagraph = await page.$("p");
    console.log("Primeiro elemento de parágrafo encontrado:", firstParagraph);

    // Obter todos os elementos correspondentes
    const allParagraphs = await page.$$("p");
    console.log("Total de parágrafos encontrados:", allParagraphs.length);

    // Extrair e registrar o conteúdo de texto do primeiro parágrafo
    const firstParagraphText = await page.$eval("p", element => element.innerText);
    console.log("Texto do primeiro parágrafo:", firstParagraphText);

    // Extrair e registrar o atributo href da primeira tag âncora
    const firstAnchorHref = await page.$eval("a", element => element.href);
    console.log("Href da primeira tag âncora:", firstAnchorHref);

    // Contar o número total de elementos de parágrafo
const paragraphCount = await page.$$eval("p", elements => elements.length);
console.log("Número total de elementos de parágrafo:", paragraphCount);

// Modificar o texto interno do primeiro parágrafo
    await page.$eval("p", element => element.innerText = "Novo texto para o primeiro parágrafo");
console.log("Modificou o texto do primeiro parágrafo.");

// Fechar o navegador
await browser.close();
}

// Executar a função
run();

Neste exemplo, realizamos as seguintes ações:

Inicie uma nova instância do navegador: isso inicia um novo navegador controlado pelo Puppeteer.
Navegue até a página da web de destino: o método goto navega até o URL especificado e aguarda até que o conteúdo DOM da página seja totalmente carregado.
Obter o primeiro elemento correspondente: o método page.$ recupera o primeiro elemento que corresponde ao seletor CSS p.
Obter todos os elementos correspondentes: o método page.$$ recupera todos os elementos que correspondem ao seletor CSS p.
Extrair e registrar o conteúdo de texto do primeiro parágrafo: o método page.$eval avalia uma função no contexto do primeiro elemento correspondente e retorna seu innerText.
Extrair e registrar o atributo href da primeira tag âncora: O método page.$eval recupera o atributo href da primeira tag a.
Contar o número total de elementos de parágrafo: O método page.$$eval avalia uma função no contexto de todos os elementos correspondentes e retorna a contagem total.
Modifique o texto interno do primeiro parágrafo: o método page.$eval altera o innerText do primeiro elemento p correspondente.
Feche o navegador: isso garante que a instância do navegador seja fechada corretamente após o término do script.

Observação:

É essencial aguardar o carregamento completo da página antes de tentar localizar elementos, especialmente para páginas com conteúdo dinâmico. Para obter mais informações, consulte Como aguardar o carregamento de uma página no Puppeteer?

Para obter outras maneiras de localizar elementos, você também pode consultar Como localizar elementos por XPath no Puppeteer?

Conclusão

O uso de seletores CSS com o Puppeteer torna as tarefas de Scraping de dados e automação simples e eficientes. Ao compreender e aproveitar esses métodos, você pode interagir de forma eficaz com os elementos da página da web e extrair dados valiosos.

Teste grátis Comece com o Google