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

## はじめに

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

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

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

### 想定する環境

_▼システムバージョン_
```bash
% 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_

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

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

また、この記事ではHomebrewのインストールについては取り扱いません。導入していない方は[公式HP](https://brew.sh/index_ja)を参考にインストールしてください。

### 想定する読者

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

ソフトウェアのインストールには [npm](https://www.npmjs.com)と[Homebrew](https://brew.sh/index_ja)を利用します。

## Seleniumとは

[Selenium](https://www.selenium.dev/ja/)とは、Webブラウザーの操作を自動化するソフトウェア群のプロジェクト名です。

#### Selenium-Webdriverとは

[Selenium-Webdriver](https://www.selenium.dev/ja/documentation/webdriver/)とは、ネイティブのWebブラウザーを操作するドライバーソフトウェアと、そのドライバーを操作するAPIです。APIはJava、Python、C#、Ruby、JavaScript、Kotlinに対応しています。

https://www.npmjs.com/package/selenium-webdriver

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

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

https://www.selenium.dev/ja/documentation/webdriver/getting_started/install_drivers/

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

## Selenium-Webdriverのセットアップ

```
npm i -D selenium-webdriver
```

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

### geckodriverのインストール

```bash
brew update && brew install geckodriver
```

[`geckodriver`](https://github.com/mozilla/geckodriver)はFirefox用のブラウザードライバーです。

### chromedriverのインストール

```bash
brew update && brew install --cask chromedriver
```

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

## 最小限のテスト

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

_▼test/minimal.js_

```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で実行します。

```bash
node ./test/minimal.js
```

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

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

#### 初回起動時

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

![](https://www.evernote.com/l/AAnPTevzMGJHMokaF9LtcqRTUVXmw1QZBEgB/image.png)

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

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

![](https://www.evernote.com/l/AAlXs8F67LdKM5VNDiAZy-bux4PdB7ar9aoB/image.png)

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

#### 2回目起動時

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

## Selenium-Webdriverのメンテナンス

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

### chromedriverの更新

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

```bash
brew update && brew upgrade --cask chromedriver
```

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

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

## 参考記事

https://qiita.com/tonio0720/items/70c13ad304154d95e4bc

https://qiita.com/apukasukabian/items/77832dd42e85ab7aa568