Node.jsでSeleniumを使ってテスト自動化する手順

公開日：2021.01.16

最終更新日：2021.01.16

カテゴリー:

#JavaScript

今回はSeleniumを使ってテストを自動化したいと思います。

Seleniumは様々な言語で動かすことができます。
JavaやRuby、Pythonなどなど...

JavaでSeleniumを動かした経験はありますが、
今回はNode.jsでSeleniumを実行し、Chromeを動かしたいと思います。

1.Seleniumとは

Seleniumはブラウザの操作を自動化するためのフレームワークです。

Webアプリケーションのテスト自動化するためのツールでしたが、
ブラウザ操作を模倣できるため、作業を自動化する用途でも使われているようです。

https://www.selenium.dev/

2.環境構築

それでは早速SeleniumをNode.jsで動かすための環境を用意します。

まずは適当な場所にディレクトリを用意してください。

$ mkdir test
$ cd test

手始めに、package.jsonを作成します。
package.jsonはプロジェクトの設定ファイルのようなものです。

$ npm init -y

次に、必要なパッケージのインストールをします。
　・selenium-webdriver
　・mocha

$ npm install selenium-webdriver mocha

そして、chromedriverをこちらからダウンロードしてください。
自身のChromeとバージョンを合わせてくださいね。

ダウンロード後、testディレクトリ内に配置してください。

これで環境構築自体は完了です。

3.テストコード記述

まず、testディレクトリ配下にjsファイルを作成します。

$ touch test.js

今回は当サイトトップページへアクセスし、ページタイトルが正しいか確認すると言う流れを実際に作っていきたいと思います。

まずはコード全文を記載します。

const { Builder } = require("selenium-webdriver")
const assert = require("assert")

let driver

describe("selenium test section 1", () => {
  before(() => {
    driver = new Builder().forBrowser("chrome").build()
  })

  after(() => {
    return driver.quit()
  })

  it("ページタイトルチェック", async () => {
    // ウィンドウ最大化
    driver.manage().window().maximize() 

    // サイトへ遷移
    await driver.get("https://rbell.jp")
    // タイトル取得
    const title = await driver.getTitle()

    // 比較検証
    assert.equal(title, "Top | rbell")
  })
})

簡単なコードなので解説するポイントはbefore()とafter()についてのみです。
beforeはテスト前に実行される処理で、afterはテスト後に実行される処理です。

4.テスト実行

いよいよテスト実行です。
まずは、mochaでテスト実行をするnpm scriptを追加するためにpackage.jsonを以下のように修正します。

修正前

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

修正後

"scripts": {
    "test": "mocha main.js --timeout 10000"
  },

以下のコマンドでテスト実行します。

$ npm run test

エラーが発生しなければ成功です。お疲れ様でした。

5.おわりに