puffeteer - $$eval(), $eval()

Puppeteer는 Google이 개발한 Node.js 라이브러리로, 웹 브라우저를 제어하고 웹 페이지를 스크래핑하거나 자동화하는 데 사용되는 도구입니다. Puppeteer는 Chromium 기반의 Headless 브라우저(실제 브라우저 창을 표시하지 않는 브라우저)를 제어하며, 웹 페이지의 동작과 상호작용을 프로그래밍적으로 조작할 수 있게 해줍니다. 

 

주요 특징:

1. 브라우저 제어: Puppeteer는 브라우저의 열기, 페이지 로딩, 클릭, 폼 제출 등 다양한 브라우저 동작을 제어할 수 있습니다.
2. 스크래핑과 데이터 추출: Puppeteer를 사용하여 웹 페이지의 HTML, 텍스트, 이미지 등 다양한 데이터를 추출할 수 있습니다.
3. 스크린샷 및 PDF 생성: Puppeteer를 사용하여 웹 페이지의 스크린샷을 캡처하거나 PDF 파일로 저장할 수 있습니다.
4. 자동화: 웹 페이지 상에서의 자동화 작업을 수행할 수 있습니다. 예를 들어, 양식 작성, 버튼 클릭, 스크롤링 등을 자동으로 수행할 수 있습니다.
5. Headless 모드: 실제 브라우저 창을 표시하지 않는 Headless 모드로 동작할 수 있습니다. 이는 백그라운드에서 브라우저 작업을 처리할 때 유용합니다.
6. Chromium 기반: Puppeteer는 Chromium 브라우저의 기능을 활용하여 높은 호환성과 풍부한 기능을 제공합니다.

사용 사례:

1. 웹 스크래핑: 웹 사이트에서 데이터를 수집하거나 정보를 추출하는 데 사용됩니다. 예를 들어, 제품 가격 비교, 뉴스 기사 스크랩핑 등.
2. 자동화 테스트: 웹 애플리케이션의 테스트를 자동화하고 테스트 시나리오를 실행하는 데 활용됩니다.
3. SEO 분석: 웹 페이지의 랜더링 상태를 분석하고 SEO 최적화에 활용됩니다.
4. 봇과 크롤러 개발: 웹 상의 작업을 자동화하거나 데이터를 수집하는 봇이나 크롤러를 개발하는 데 활용됩니다.
5. SPA(싱글 페이지 애플리케이션) 테스팅: 복잡한 프론트엔드 기술을 사용하는 SPA의 동작을 테스트하는 데 유용합니다.

Puppeteer는 브라우저의 동작을 프로그래밍적으로 제어할 수 있어, 웹 스크래핑, 자동화 테스트, 데이터 수집 등 다양한 분야에서 활용됩니다. Node.js 환경에서 사용되며, puppeteer 라이브러리를 설치하여 사용할 수 있습니다.

 

$$eval() 과 $eval()

$$eval()과 $eval()은  각각 다수의 엘리먼트를 평가하거나, 단일 엘리먼트를 평가할 때 사용됩니다.

1. $$eval(): 이 함수는 페이지 내에서 특정한 함수를 실행하여 여러 엘리먼트의 값을 추출하거나 처리할 수 있습니다. 해당 엘리먼트들에 대한 정보를 배열로 반환합니다. 아래 예제에서 $$eval('h1', ...)은 페이지 내의 모든 <h1> 엘리먼트를 선택하고, 선택된 엘리먼트들을 처리하는 함수를 제공합니다. 이 함수는 h1Elements라는 인자로 엘리먼트들의 배열을 받아오며, map()을 사용하여 각 엘리먼트의 텍스트 콘텐츠를 추출합니다.

const puppeteer = require('puppeteer');

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

  await page.goto('https://example.com');

  const elements = await page.$$eval('h1', h1Elements => {
    return h1Elements.map(h1 => h1.textContent);
  });

  console.log(elements); // 출력 배열: ['Example Domain']
  
  await browser.close();
})();

2. $eval(): 이 함수는 페이지 내에서 특정한 함수를 실행하여 단일 엘리먼트의 값을 추출하거나 처리할 수 있습니다. 아의 예제에서 $eval('h1', ...)은 첫 번째로 발견된 <h1> 엘리먼트를 선택하고, 선택된 엘리먼트를 처리하는 함수를 제공합니다. 이 함수는 h1Element라는 인자로 엘리먼트 자체를 받아오며, 해당 엘리먼트의 텍스트 콘텐츠를 추출합니다.

const puppeteer = require('puppeteer');

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

  await page.goto('https://example.com');

  const textContent = await page.$eval('h1', element => {
    return element.textContent;
  });

  console.log(textContent); // 출력: 'Example Domain'

  await browser.close();
})();

요약하면, $$eval()은 여러 엘리먼트를 배열로 처리하고, $eval()은 단일 엘리먼트를 처리하는 데 사용됩니다.

 

위의 두 예제는 IIFE ( Immediately Invoked Function Expression) 으로 정의 된 것입니다.