如何在 Puppeteer 中通过 CSS 选择器查找元素？

在进行网页抓取时，CSS 选择器是最有效的 HTML 页面解析方法之一。在 Node.js 和 Puppeteer 中，您可将 CSS 选择器与 page.$ 和 page.$$ 方法结合使用。这两大方法让您可以使用熟悉的 CSS 语法与网页元素进行交互。

以下示例代码展示了使用这两大方法查找网页元素的具体操作，并附有详细的注释，以帮助您理解每个操作步骤。

      const puppeteer = require('puppeteer');

async function run() {
    // Launch a new browser instance
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    
    // Navigate to the target webpage
    await page.goto("https://httpbin.dev/html", { waitUntil: 'domcontentloaded' });

    // Get the first matching element
    const firstParagraph = await page.$("p");
    console.log("First paragraph element found:", firstParagraph);

    // Get all matching elements
    const allParagraphs = await page.$$("p");
    console.log("Total paragraphs found:", allParagraphs.length);

    // Extract and log the text content of the first paragraph
    const firstParagraphText = await page.$eval("p", element => element.innerText);
    console.log("Text of the first paragraph:", firstParagraphText);

    // Extract and log the href attribute of the first anchor tag
    const firstAnchorHref = await page.$eval("a", element => element.href);
    console.log("Href of the first anchor tag:", firstAnchorHref);

    // Count the total number of paragraph elements
    const paragraphCount = await page.$$eval("p", elements => elements.length);
    console.log("Total number of paragraph elements:", paragraphCount);

    // Modify the inner text of the first paragraph
    await page.$eval("p", element => element.innerText = "New text for the first paragraph");
    console.log("Modified the text of the first paragraph.");

    // Close the browser
    await browser.close();
}

// Run the function
run();

在本示例中，我们执行了以下操作：