소개

스크래핑을 할 때 puppeteer를 사용해 보면
라는 소리를 받았으므로, 메모를 하면서 만져 보고 싶습니다.

Puppeteer란?

Node에서 헤드리스 Chrome을 조작할 수 있는 패키지
→ 동적 페이지의 스크래핑 등에 매우 편리

환경 및 설치

❯ node -v
v12.6.0

❯ yarn -v
1.17.3

❯ yarn add puppeteer
yarn add v1.17.3

hello world

test.js

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

  await browser.close();
  console.log("スクリーンショットを保存しました");
})();

자주 사용하는(이번에 사용한)method

API 문서

Puppeteer

이름
meaning


launch()
브라우저 시작

브라우저

이름
meaning


newPage()
새 페이지 생성

페이지

이름
meaning


goto('URL')
URL에 액세스

$(selector)
태그 및 CSS 선택기로 필터링

focus(selector)
태그 및 CSS 선택기로 필터링 (첫 번째 요소 가져 오기)

type(selector, value)
선택기에 입력

click(selector)
선택기 클릭

waitForNavigation(waitOptions)
옵션 타이밍까지 기다리기

screenshot({path: 'path.png'})
path 이름으로 스크린샷 저장

샘플

아마존에서 상품 검색하기

test.js

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.amazon.co.jp/');
  await page.type('#twotabsearchtextbox', 'Nature Remo mini');
  await page.click('input[type="submit"][value="検索"]');
  await page.waitForNavigation({waitUntil:"networkidle0"});

  await page.screenshot({path: 'example.png'});
  await browser.close();
})();