ブラウザを自動で操作する例｜Selenium（Node.js）を利用する方法

Seleniumはブラウザ操作を自動化できるライブラリ。

今回は、Seleniumを利用できるnpmのパッケージで、Google Chromeを操作する簡単な例となります。

また、操作するブラウザのChromeと、npmはすでにインストールされている前提としています。npmのインストールやコマンドについては以下のリンク先を参考にしてみてください。

npmのコマンドまとめ｜パッケージのインストール・削除・確認など【Node.js】

【npm】Seleniumでブラウザ操作を自動化する例

以下、Node.jsでSeleniumを利用し、ブラウザ操作を自動化する流れとなります。

package.jsonを作成

作業フォルダをプロジェクトとして作成します。

そして、プロジェクトの直下にcdコマンドで移動し、以下のコマンドでpackage.jsonを作成します。

npm init -y

selenium-webdriverをインストール

Seleniumを利用できるnpmパッケージ「selenium-webdriver」を、以下のコマンドでインストールします。

npm install selenium-webdriver

ブラウザを自動操作するスクリプトを作成

ブラウザを自動操作するスクリプトを作成します。

例では、ファイル名をtest.jsとしてプロジェクトの直下に配置し、次のスクリプトを記述します。

const {Builder, Browser, By, Key, until} = require('selenium-webdriver');

(async function example() {
  let driver = await new Builder()
    .forBrowser(Browser.CHROME)
    .build();
  try {
    await driver.get('https://www.google.com/');
    await driver.findElement(By.name('q')).sendKeys('テスト', Key.RETURN);
    await driver.wait(until.titleIs('テスト - Google 検索'), 1000);
  } finally {
    await driver.quit();
  }
})();

上記の例では、次のようにブラウザの自動操作を行っています。

Chromeを起動してGoogleで「テスト」と検索し、検索結果ページが表示された1秒後にChromeのプロセスを終了します。

npm-scriptsを利用してファイルを実行

npmでは、コマンドをnpm-scriptsとして定義して実行できます。

例では、npm-scriptsを利用して作成したファイルを実行するため、次のようにpackage.jsonファイル内の"scripts"の値を追加します。

"scripts"の値はオブジェクトとなり、キーに任意のコマンド名を指定し、値に実行するコマンドを指定します。

"scripts": {
	"selenium": "node test.js"
}

そして、定義したnpm-scriptsを、以下のコマンドで実行します。

npm run selenium

それにより、ブラウザの自動操作が実行されます。

VSCodeでnpm-scriptsを実行する場合

コードエディタのVSCodeでは、npm-scriptsをサイドバーのメニューから簡単に実行できます。詳しくは以下のリンク先を参考にしてみてください。

【VSCode】npm-scriptsをサイドバーから実行する方法｜表示・非表示の設定