画面の無いWebブラウザ

こんにちは。システム開発部 GX推進グループの牛崎です。

Google Chrome 59やFirefox 56以降から、ヘッドレスモードがサポートされるようになりましたね。ヘッドレスモードというのは、画面を表示せずにWebブラウジングをするモードの事です。 ヘッドレスモードのGoogle Chromeを操作できるGoogle謹製のNode.jsモジュール「Puppeteer」がGitHubで60000以上のStartを集めており、その人気ぶりが伺えます。どんなものか、試してみました。

こんな感じ

今回は仮想環境でUbuntu 18.04を用意し、Linux版Node.jsとPuppeteerにバンドルされているChromiumを使いました。 なお、LinuxへのNode.jsやLinux用日本語フォント (無いとChromiumのマルチバイト文字が文字化けします)のインストール手順は割愛します。

Googleでマネックス証券を検索し、マネックス証券のホームページを開くまでの操作のスクリーンショットを取るコードを書いてみました。

const puppeteer = require('puppeteer');
const assert = require('assert');
 
(async() => {
  const browser = await puppeteer.launch({args: ['--no-sandbox']});
  const page = await browser.newPage();
 
  // Googleを開く。
  await page.goto('https://www.google.co.jp/', {waitUntil: 'domcontentloaded'});
  await page.type('#lst-ib', 'マネックス証券');
  await page.screenshot({path: '/vagrant/google.png', fullPage: true});
 
  // 検索ボタンをクリックする。
  await page.click('input[name="btnK"]');
  await page.waitForNavigation({timeout: 5000, waitUntil: 'domcontentloaded'});
  await page.screenshot({path: '/vagrant/seach.png', fullPage: true});
 
  // Googleの検索結果からマネックス証券のホームページのリンクをクリックする。
  await page.click('a[href="https://www.monex.co.jp/"]');
  await page.waitForNavigation({timeout: 5000, waitUntil: 'domcontentloaded'});
  await page.screenshot({path: '/vagrant/monex.png', fullPage: true});
 
  // マネックス証券の会社情報へのリンクとなるaタグの中のテキストを取得し、テキストが「会社情報」か否かを判定する。
  const company = await page.evaluate(() => {
    return document.querySelector('a[href="https://info.monex.co.jp/company/index.html"]').innerText;
  });
  assert.strictEqual(company, '会社情報');
 
  // 終了。
  await browser.close();
})();

実行してもターミナル上は何も変化がありませんが、裏ではChromiumがぐるぐる動いています。画面を表示したり、検索したり、スクリーンショットを取ったり。 きちんとスクリーンショットは取れていますし、DOMから取得した値をNode.js標準のassertモジュールで検証する事も可能でした。 まだ試していませんが、デバイスの指定も可能なようです。レスポンシブデザインやスマートフォン専用ページの確認もできそうですね。

Chromium・Chrome専用ツールですが、ドキュメントを見るとv5.5.0では試験的にFirefoxもサポートしているようです。今後様々なWebブラウザでE2Eテストが自動化出来たら便利ですね。

人材募集