node.jsでブラウザーテストをするselenium-webdriverのセットアップ

はじめに

この記事はnode.jsでE2Eテストを構築する、Selenium-Webdriverのセットアップと更新の方法を記録、共有するためのものです。

Seleniumは幅広い環境をサポートしていますが、この記事ではnode.jsでのセットアップのみを取り扱います。

Seleniumは幅広い環境とシナリオを対象にブラウザーテストを提供していますが、情報量が多すぎて特定環境でのセットアップ手順が調べにくいです。この記事はnode.jsに限ってSeleniumの構築方法を解説します。

想定する環境

▼システムバージョン

% sw_vers
ProductName:	macOS
ProductVersion:	12.6.1
BuildVersion:	21G217

% brew --version
Homebrew 3.6.19
Homebrew/homebrew-core (git revision e8a1e49d82b; last commit 2023-01-18)
Homebrew/homebrew-cask (git revision 1ad9e8bc70; last commit 2023-01-18)

▼package.json

"devDependencies": {
  "selenium-webdriver": "^4.7.0",
}

OSやソフトウェアのバージョンが異なる場合、この記事の内容がそのまま適用できないかもしれません。記事を読む前にお手元の環境をご確認ください。

また、この記事ではHomebrewのインストールについては取り扱いません。導入していない方は公式HPを参考にインストールしてください。

想定する読者

• node.jsを使っている
• macOSを使っている
• ローカルでE2Eテストを実行したい
• テストしたいブラウザーはChrome, Firefox, Safari

ソフトウェアのインストールには npmとHomebrewを利用します。

Seleniumとは

Seleniumとは、Webブラウザーの操作を自動化するソフトウェア群のプロジェクト名です。

Selenium-Webdriverとは

Selenium-Webdriverとは、ネイティブのWebブラウザーを操作するドライバーソフトウェアと、そのドライバーを操作するAPIです。APIはJava、Python、C#、Ruby、JavaScript、Kotlinに対応しています。

npmで公開されているselenium-webdriverは、node.jsからブラウザーを操作するためのモジュールです。このモジュールとブラウザードライバーを組み合わせて、node.js上でE2Eテストを構築します。

ブラウザードライバーとは

ブラウザードライバーとはブラウザーを操作するための実行ファイルです。この実行ファイルに操作権限を与えてテストを自動化します。

Selenium-Webdriverのセットアップ

npm i -D selenium-webdriver

各ブラウザー用のドライバーをインストールします。Safariにはドライバーが内蔵されているので追加インストールは必要ありません。FireFoxとChrome用のブラウザードライバーインストールします。

geckodriverのインストール

brew update && brew install geckodriver

geckodriverはFirefox用のブラウザードライバーです。

chromedriverのインストール

brew update && brew install --cask chromedriver

chromedriverはGoogle Chrome用のブラウザードライバーです。こちらはgeckodriverと異なりHomebrew caskで配布されています。--caskオプションを忘れるとインストールできませんのでお気をつけください。

最小限のテスト

複数のブラウザでgoogle.comを開くという、最小限のテストを作成します。

▼test/minimal.js

const { Builder, Capabilities, logging } = require("selenium-webdriver");

const pref = new logging.Preferences();
pref.setLevel(logging.Type.BROWSER, logging.Level.DEBUG);

/**
 * google.comを開いて、成功したらブラウザーを終了します。
 * @param driver
 * @returns {Promise<void>}
 */
const testOpenPage = async (driver) => {
  try {
    await driver.get(
      "https://www.google.com/"
    );
  } catch (e) {
    console.log(e);
  } finally {
    driver && (await driver.quit());
  }
};

const testWithBrowserCapabilities = (capabilities) =>{
  capabilities.setLoggingPrefs(pref);
  const driver = new Builder().withCapabilities(capabilities).build();
  testOpenPage(driver);
}
testWithBrowserCapabilities(Capabilities.chrome());
testWithBrowserCapabilities(Capabilities.firefox());
testWithBrowserCapabilities(Capabilities.safari());

テストをnode.jsで実行します。

node ./test/minimal.js

ブラウザードライバーの許可

ブラウザードライバーはApp Store以外からインストールされた実行ファイルのため、初回起動時にmacOSの「セキュリティとプライバシー」機能が停止させます。ユーザーが以下の手順でブラウザードライバーの実行を許可しなければいけません。

初回起動時

初回起動時には「"ドライバー名"は、開発元を検証できないため開けません。」というダイアログが表示されます。

キャンセルボタンを押してダイアログを閉じます。

つぎにシステム環境設定の「セキュリティとプライバシー」を開き、ウィンドウ左下の鍵アイコンをクリックします。

パスワードの入力を求められるので、ログインパスワードを入力してください。鍵アイコンが開錠に変わったら「このまま許可」ボタンを押します。

2回目起動時

2回目の起動時には「"ドライバー名"の、開発元を検証できません。開いてもよろしいですか？」というダイアログが表示されます。「開く」ボタンを押せばテストが始まります。

Selenium-Webdriverのメンテナンス

ブラウザーの更新に合わせてSelenium-Webdriverのメンテナンスが必要になります。

chromedriverの更新

Google Chromeのメジャーバージョンが更新されると、chromedriverもそれに合わせたバージョンに更新しなければいけません。chromedriverの更新には以下のコマンドを実行してください。

brew update && brew upgrade --cask chromedriver

chromedriverを更新すると、インストール時と同様に開発元が検証されます。ブラウザードライバーの許可を参考に、chromedriverをもう一度許可してください。

以上、ありがとうございました。

参考記事