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