PuppeteerでCSSセレクタによる要素の検索方法

      const puppeteer = require('puppeteer');

async function run() {
    // 新しいブラウザインスタンスを起動
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    
    // 対象ウェブページへ移動
    await page.goto("https://httpbin.dev/html", { waitUntil: 'domcontentloaded' });

    // 最初に一致する要素を取得
    const firstParagraph = await page.$("p");
    console.log("最初の段落要素を発見:", firstParagraph);

    // 一致する要素をすべて取得
    const allParagraphs = await page.$$("p");
    console.log("見つかった段落の総数:", allParagraphs.length);

    // 最初の段落のテキスト内容を抽出してログ出力
    const firstParagraphText = await page.$eval("p", element => element.innerText);
    console.log("最初の段落のテキスト:", firstParagraphText);

    // 最初のアンカータグのhref属性を抽出・ログ出力
    const firstAnchorHref = await page.$eval("a", element => element.href);
    console.log("最初のアンカータグのhref:", firstAnchorHref);

    // 段落要素の総数をカウント
    const paragraphCount = await page.$$eval("p", elements => elements.length);
    console.log("段落要素の総数:", paragraphCount);

    // 最初の段落の内部テキストを変更
    await page.$eval("p", element => element.innerText = "最初の段落の新しいテキスト");
    console.log("最初の段落のテキストを変更しました。");

    // ブラウザを閉じる
    await browser.close();
}

// 関数を実行
run();