Puppeteer에서 XPath로 요소를 찾는 방법?

Puppeteer를 사용하면 page.$x() 함수를 활용하여 CSS 선택자 대신 XPath로 요소를 쉽게 찾을 수 있습니다. 이는 복잡한 HTML 구조를 탐색할 때 특히 유용합니다. 다음은 Puppeteer에서 XPath를 더 상세하고 효율적으로 사용하는 방법입니다.

다음 스크립트는 Puppeteer를 사용하여 XPath로 요소를 찾고 상호작용하는 방법을 보여줍니다:

      const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();

  // Bright Data 웹사이트 열기
  await page.goto('https://brightdata.com');

  // XPath를 사용하여 첫 번째 h2 요소 찾기
  const [firstH2] = await page.$x('//h2');
  if (firstH2) {
    const h2Text = await page.evaluate(el => el.textContent, firstH2);
    console.log('첫 번째 H2 텍스트:', h2Text);
  } else {
    console.log('H2 요소 없음');
}

// XPath를 사용하여 특정 클래스를 가진 모든 앵커 요소 찾기
const allLinks = await page.$x('//a[@class="specific-class"]');
  const linkTexts = await Promise.all(
    allLinks.map(link => page.evaluate(el => el.textContent, link))
);
console.log('특정 클래스를 가진 모든 링크:', linkTexts);

// 브라우저 닫기
await browser.close();
})();

설명

브라우저 실행:
- 이 스크립트는 헤드리스 모드가 아닌 상태로 Puppeteer 브라우저를 실행하여 브라우저 동작을 실시간으로 확인할 수 있게 합니다.
웹사이트로 이동:
- 스크립트는 page.goto()를 사용하여 Bright Data 웹사이트로 이동합니다.
XPath로 요소 찾기:
- 첫 번째 H2 요소: 스크립트는 page.$x('//h2')를 사용하여 첫 번째 h2 요소를 찾습니다. 그런 다음 해당 텍스트 콘텐츠를 추출하여 로그에 기록합니다.
- 특정 클래스를 가진 모든 앵커 요소: 스크립트는 page.$x('//a[@class="specific-class"]')를 사용하여 specific-class 클래스를 가진 모든 앵커(<a>) 요소를 찾습니다. 해당 요소의 텍스트 콘텐츠를 추출하여 로그에 기록합니다.
브라우저 닫기:
- 마지막으로, 스크립트는 browser.close()를 사용하여 브라우저를 닫습니다.

클래스로 요소를 선택하는 XPath 사용법에 대한 자세한 내용은 이 유용한 가이드를 참고하세요.

이 방법은 Puppeteer에서 XPath를 활용해 복잡한 HTML 구조 내 요소들을 효과적으로 탐색하고 상호작용할 수 있도록 하여, 웹 스크래핑 및 자동화 역량을 강화합니다.

무료 체험 시작하기 Google 번역으로 시작하세요

시작할 준비가 되셨나요?

무료 체험 시작하기