
【JavaScript入門】Webページの自動操作
ブラウザを⾃動で操り、フォーム入力・クリック・画⾯キャプチャ・PDF 化などをコードだけで実行できると、E2E テストや定型作業の省⼒化が一気に進みます。JavaScript で人気なのは Puppeteer と Selenium WebDriver。両者の違いをまず整理しましょう。
ツール | メンテナー | 操作できるブラウザ | 対応言語 | 特徴 |
---|---|---|---|---|
Puppeteer | Chrome DevTools チーム | Chromium / Chrome(+Firefox β) | Node.js | Chrome 専⽤ゆえ 高速 & 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 に保存しました
終了しました
何が起こる?
- 手元の Google Chrome を ヘッドレス(非表示) で起動
- Puppeteer の GitHub ページへ遷移
- ページ内コンソールログをホスト側へ転送し URL を出力
- 最初の外部リンクをクリックして別ページへ移動
- ヘッドレスならその時点の画面を A4 PDF として保存
まとめ
- Puppeteer は Chrome 専⽤ながら 高速・簡単。まずはここから始める。
- Selenium は マルチブラウザ・マルチ言語 が必要な場面で選択。
-最小スクリプトは「launch → newPage → goto → evaluate/click → close」の 5 ステップ。 - GUI ツールや CI と組み合わせれば、ユーザーフローの自動回帰テストや深夜のバッチ処理もラクラク自動化できる。