Node.jsとSeleniumを使ってChromeのコンソールログを確認する

# はじめに
Seleniumを使用してみる機会があったため，備忘録としてまとめようと思い，記事を書きました。
現在主にJavascriptを使用しているため，Node.jsを使ってSeleniumを動かそうと思います。
Node.jsの環境構築に関しては，[こちら](https://qiita.com/b-coffin/items/1dbb2f0328806b78103b)の手順で行なっています。

### Seleniumとは
**Webブラウザの操作を自動化する**ためのツール。
今回は，SeleniumをNode.js内で使用して，Webブラウザを操作してみたいと思います。


# 大まかな流れ
1. 必要なパッケージ・ドライバのダウンロード
2. 実行ファイル作成
3. 実行

以下で詳細に説明していきます。


# 必要なパッケージ・ドライバのダウンロード

### selenium-webdriverのインストール
```console
$ npm install --save selenium-webdriver
```
- `--save` : package.jsonのdependenciesに追加される

### 各ブラウザのDriverのダウンロード
主要なブラウザで動作させるには，上記のパッケージに加えて以下のドライバをダウンロードし，実行ファイルと同じパスに配置する必要があります．

|ブラウザ|ドライバ|
|---|---|
|Chrome|[chromedriver(.exe)](http://chromedriver.storage.googleapis.com/index.html)
|Internet Explorer|[IEDriverServer.exe](http://selenium-release.storage.googleapis.com/index.html)|
|Edge|[MicrosoftWebDriver.msi](https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/)|
|Firefox|[geckodriver(.exe)](https://github.com/mozilla/geckodriver/releases/)|
|Safari|[safaridriver](https://developer.apple.com/library/archive/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html#//apple_ref/doc/uid/TP40014305-CH11-DontLinkElementID_28)|

今回はChromeを使用するので，[上記表中のChromeドライバのページ](http://chromedriver.storage.googleapis.com/index.html?path=87.0.4280.20/)をクリックします．

![スクリーンショット 2020-11-17 12.37.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533014/7c07aec4-2886-a620-883b-b9a95f5734a8.png)

バージョン86を使用するので，対象バージョンの欄をクリックします．
（どのバージョンのドライバをダウンロードするかは[こちら](https://sites.google.com/a/chromium.org/chromedriver/downloads)のページを参照）

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3533333031342f38326630643232302d626261342d653765662d386639382d3339363433353133333639352e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533014/24acd22c-f782-8b06-d64e-d14260e78d2d.png)

Macのドライバ（chromedriver_mac64.zip）を選択し，ダウンロードします．
zip解凍後，Nodeの実行ファイルと同じパスに配置すれば，準備は完了です．

```console
$ cp ~/Downloads/chromedriver .
```


# 実行ファイル作成
今回は，Qiitaのトップページを開き，コンソールログを取得してみます。

### 実行ファイルの完成形
```javascript:selenium_app.js
// ライブラリを呼び出す
const webdriver = require("selenium-webdriver");
const chrome = require("selenium-webdriver/chrome");
const { Builder } = webdriver;
const { Preferences, Type, Level } = require("selenium-webdriver/lib/logging");

// await を使うため，async function 内で処理を記述する
(async function () {
  // オプション付きでブラウザを立ち上げる
  const capabilities = webdriver.Capabilities.chrome();

  const logPrefs = new Preferences();
  logPrefs.setLevel(Type.BROWSER, Level.ALL);
  capabilities.setLoggingPrefs(logPrefs);

  const options = new chrome.Options(capabilities);

  const driver = await new Builder().forBrowser("chrome").setChromeOptions(options).build();

  // Qiitaのトップページへ遷移
  await driver.get("https://qiita.com/");

  // 5秒待機
  await driver.sleep(5000);

  // コンソールログの取得
  const consoleLogs = await driver.manage().logs().get(Type.BROWSER);

  for (let i = 0; i < consoleLogs.length; i++) {
    console.log(consoleLogs[i]);
  }

  // 終了
  await driver.quit();

})();
```

以下で詳細を説明します．

### 実行ファイルの作成
まずは新規ファイルを作成します

```console
$ touch selenium_app.js
```

### webdriverを呼び出す
[公式のドキュメント](https://www.selenium.dev/documentation/en/webdriver/driver_requirements/#chromiumchrome)を参考に，実行ファイル内でchromeのwebdriverを呼び出します。
また，ログを取得するために必要なwebdriver内のライブラリも呼び出します。

```javascript:selenium_app.js
// ライブラリを呼び出す
const webdriver = require("selenium-webdriver");
const chrome = require("selenium-webdriver/chrome");
const { Builder } = webdriver;
const { Preferences, Type, Level } = require("selenium-webdriver/lib/logging");
```

### ブラウザを立ち上げる
コンソールログを取得するためのオプションを指定して，ブラウザを立ち上げます。

```javascript:selenium_app.js
// オプション付きでブラウザを立ち上げる
const capabilities = webdriver.Capabilities.chrome();

const logPrefs = new Preferences();
logPrefs.setLevel(Type.BROWSER, Level.ALL);
capabilities.setLoggingPrefs(logPrefs);

const options = new chrome.Options(capabilities);

const driver = await new Builder().forBrowser("chrome").setChromeOptions(options).build();
```
- 今回はコンソールログを取得するため，ログのタイプを`Type.BROWSER`と指定していますが，デベロッパツールのNetworkの情報を取得したい場合はこの箇所を`Type.PERFORMANCE`に変更すれば取得することができます。

### ページ遷移
操作したいページのURLを指定し，そのURLへ遷移させます。

```javascript:selenium_app.js
// Qiitaのトップページへ遷移
await driver.get("https://qiita.com/");
```

### コンソールログの取得
```javascript:selenium_app.js
// コンソールログの取得
const consoleLogs = await driver.manage().logs().get(Type.BROWSER);
```
- こちらも`Type.BROWSER`の箇所を`Type.PERFORMANCE`にすることで，デベロッパーツールのNetworkの情報を含むログ情報を取得することができます。

### ドライバーの終了
```javascript:selenium_app.js
// 終了
await driver.quit();
```


# 実行
実行ファイルが存在しているディレクトリに移動し，以下のコマンドを実行します。

```console
$ node selenium_app.js
```

以下のような結果が表示されれば成功

```console
Entry {
  level: Level { name_: 'DEBUG', value_: 700 },
  message: 'https://qiita.com/ - [DOM] Input elements should have autocomplete attributes (suggested: "current-password"): (More info: https://goo.gl/9p2vKq) %o',
  timestamp: 1610609498344,
  type: ''
}
```





# 参考
- [（公式）selenium-webdriver API Docs](https://www.selenium.dev/selenium/docs/api/javascript/index.html)
- [（公式）WebDriverについてのドキュメント](https://www.selenium.dev/documentation/en/webdriver/)
- [Node.js+Selenium WebDriverでブラウザのエラーログを取得する話](https://qiita.com/surimi_pan/items/c56eef8b29c5c5fb39cf)