Puppeteer란?

install

$ node -v
v10.11.0

$ npm i puppeteer

$ npm ls puppeteer
...
└── [email protected]

스크린샷 가져오기

// screen_shot.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();
})();

node screen_shot.js

결과

웹 화면의 PDF 생성

// create_pdf.js

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'create_pdf_sample.pdf', format: 'A4'});

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

node create_pdf.js

결과

GitHub 로그인

// ログイン情報を書いたファイルを準備
// $ cat creds.js
module.exports = {
    username: 'USERNAME',
    password: 'PASSWORD'
}

// ログイン処理本体
// $ cat github_login.js
const puppeteer = require('puppeteer');

(async () => {

  const browser = await puppeteer.launch({
    headless: false // 今回はあえてヘッドレスを解除して起動
  });
  const page = await browser.newPage();
  await page.goto('https://github.com/login');

  // github.com DOM要素セレクタ
  const USERNAME_SELECTOR = '#login_field';
  const PASSWORD_SELECTOR = '#password';
  const BUTTON_SELECTOR = '#login > form > div.auth-form-body.mt-3 > input.btn.btn-primary.btn-block';

  // ログイン情報の読み込み
  const CREDS = require('./creds');

  // セレクタをクリックして、ログイン情報をタイプ入力
  await page.click(USERNAME_SELECTOR);
  await page.keyboard.type(CREDS.username);

  await page.click(PASSWORD_SELECTOR);
  await page.keyboard.type(CREDS.password);

  // ログインボタンをクリック
  await page.click(BUTTON_SELECTOR);

  await page.waitForNavigation();

})();

// ファイルを実行するとChromeが起動して処理を実行。
node github_login.js

명령 실행 후 화면 동작

참조