【JavaScript入門】Webページの自動操作

 ブラウザを⾃動で操り、フォーム入力・クリック・画⾯キャプチャ・PDF 化などをコードだけで実行できると、E2E テストや定型作業の省⼒化が一気に進みます。JavaScript で人気なのは PuppeteerSelenium WebDriver。両者の違いをまず整理しましょう。

ツールメンテナー操作できるブラウザ対応言語特徴
PuppeteerChrome DevTools チームChromium / Chrome(+Firefox β)Node.jsChrome 専⽤ゆえ 高速 & API がシンプル。ヘッドレス⇔有⼈確認の切替も 1 行
Seleniumオープンソース (SeleniumHQ)Chrome, Edge, Firefox, Safari ほかJS / Java / Python…多ブラウザ検証 が必須ならこちら。サーバーモードで並列テストも容易

まず Chrome だけで流れを掴み、マルチブラウザ保証が必要になったら Selenium へスケールアップ、が定番ルートです。

Puppeteer-Core で“手元 Chrome”を操作してみる

インストール (Chromium 同梱なしで軽量)

mkdir pptr-demo
cd pptr-demo
npm init -y
npm i puppeteer-core

index.js — シンプル自動操作スクリプト

// index.js
const puppeteer = require('puppeteer-core');
const chromePath = 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe'; 
const HEADLESS   = true;

(async () => {
  const browser = await puppeteer.launch({
    executablePath: chromePath,
    headless: HEADLESS,
    defaultViewport: { width: 1024, height: 768 },
    slowMo: 300
  });

  const page = await browser.newPage();
  await page.goto('https://github.com/puppeteer/puppeteer', { waitUntil: 'networkidle0' });

  page.on('console', msg => console.log('[PAGE]', msg.text()));

  // ページ内スクリプトを実行
  await page.evaluate(() => console.log(`現在URL: ${location.href}`));

  // 外部リンクをクリックしてナビゲーションする場合
  // もし新しいタブではなく同一タブで遷移したいなら、click+waitForNavigation
  await Promise.all([
    page.waitForNavigation({ waitUntil: 'networkidle0' }),
    page.click('a[href^="https"]')
  ]);

  console.log('ナビゲーション先:', page.url());

  // ヘッドレスモード時だけ PDF 保存
  if (HEADLESS) {
    await page.pdf({ path: 'page.pdf', format: 'A4' });
    console.log('PDF を page.pdf に保存しました');
  }

  await browser.close();
  console.log('終了しました');
})();

デバックコンソールの出力

node .
[PAGE] 現在URL: https://github.com/puppeteer/puppeteer
ナビゲーション先: https://github.com/puppeteer/puppeteer
PDF を page.pdf に保存しました
終了しました

何が起こる?

  1. 手元の Google Chrome を ヘッドレス(非表示) で起動
  2. Puppeteer の GitHub ページへ遷移
  3. ページ内コンソールログをホスト側へ転送し URL を出力
  4. 最初の外部リンクをクリックして別ページへ移動
  5. ヘッドレスならその時点の画面を A4 PDF として保存

まとめ

  • Puppeteer は Chrome 専⽤ながら 高速・簡単。まずはここから始める。
  • Seleniumマルチブラウザ・マルチ言語 が必要な場面で選択。
    -最小スクリプトは「launch → newPage → goto → evaluate/click → close」の 5 ステップ。
  • GUI ツールや CI と組み合わせれば、ユーザーフローの自動回帰テストや深夜のバッチ処理もラクラク自動化できる。