Node.jsとSeleniumの環境構築の手順

それでは、JavaScript(Node.js)を使ってChromeブラウザでテストを実施するテストコードを作成していきます。この記事で解説するサンプルはGitHubからダウンロードできます。

事前にNode.jsをインストールし、コマンドラインを使う準備をしておいてください。

  1. 公式サイトからNode.jsをインストールします
    (バージョン8以上をインストールください)
  2. コマンドラインを起動します
    (macOSだと「ターミナル」、Windowsだと「コマンドプロンプト」)

テストコードを保存するフォルダーを任意の場所に作成し、コマンドラインでその場所に移動します。cdコマンドで任意のフォルダーまで移動しましょう。

 ▼ Windowsでの移動

cd C:¥Users¥MyName¥myproject

 ▼ macOSでの移動

cd /Users/MyName/myproject

続けて、次のコマンドを実行します。こちらを実行すると、プロジェクトの設定情報が記述されたpackage.jsonファイルが生成されます。

npm init -y

各種モジュールのインストール

本記事では、selenium-webdriverとあわせて、テスティングフレームワークのMochaを使ってテストコードを作成していきます。次のコマンドを実行し、インストールを行います。

npm i -D selenium-webdriver mocha

Seleinum Google Chrome Driver のダウンロード

下記のURLより最新バージョンのDriverを取得し、ダウンロードください(2018年5月時点の最新は2.38)。ダウンロードしたZIPファイルを展開すると、実行ファイルが出てきますので、プロジェクトフォルダーに格納します。

http://chromedriver.storage.googleapis.com/index.html

テストコードの作成

テストコードとして次のJavaScriptを記述したファイルformTest.jsを作成しましょう。

const {Builder, By} = require('selenium-webdriver');
const assert = require('assert');

let driver;

describe('入力フォーム デモ', () => {
  before(() => {
    driver = new Builder()
      .forBrowser('chrome')
      .build();
    process.on('unhandledRejection', console.dir);
  });

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

  it('名前欄の必須入力チェック その1', async () => {
    // テスト対象のページへアクセス
    await driver.get('http://ics-drive.jp/sandbox/demo/demo.html');

    // 何も入力せずにSubmitする
    await driver.findElement(By.id('submitButton')).click();

    // エラーメッセージを取得して、エラー文言が正しいかチェックする
    const errorMessage = await driver.findElement(By.id('error_name')).getText();
    assert.equal(errorMessage, '名前を入力してください。');
  });

  it('名前欄の必須入力チェック その2', async () => {
    // テスト対象のページへアクセス
    await driver.get('http://ics-drive.jp/sandbox/demo/demo.html');

    // 名前を入力してSubmitする
    await driver.findElement(By.id('name')).sendKeys('品川太郎');
    await driver.findElement(By.id('submitButton')).click();

    // エラーメッセージを取得して、エラー文言が空であるかチェックする
    const errorMessage = await driver.findElement(By.id('error_name')).getText();
    assert.equal(errorMessage, '');
  });
});

beforeメソッドとafterメソッドはそれぞれテスト前・後に実行される処理を記述します。上記のコードでは、テスト実施前にchromeWebDriverを起動し、テスト実施後に終了する処理を記述しています。

実際のテスト処理はitメソッドにそれぞれ記述しています。「driver.findElement」はHTMLのDOMにアクセスできるメソッドで、「By.id」を使ってDOMの中から指定したIDの要素を取得しています。By.idの他にもBy.nameBy.cssBy.tagNameなどが用意されており、それぞれname属性、cssのクラス、タグなどを指定して要素を取得することができます。

テストの合否の判定するAssertionの処理は、Node.jsに標準で付属しているAssertモジュールを使いassert.equal(xx, yy);と記述します。Assertionとは、期待値と合致しているかを検証するコマンドで、上記のコードでは取得したエラーコードの文言が正しいかを検証している処理になります。

テストコードの実行

  1. npm scriptsを使ってテストを実行するコマンドを準備します。package.jsonファイルのscriptsに、mochaを使ってテストを実行する次のコマンドを追加します。デフォルトのタイムアウト設定の場合、通信環境によってはタイムアウトになってしまう可能性があるため、実行時のオプション設定でタイムアウトの時間を10000ms(10秒)に変更しておきます。

    ▼package.json

    {
      "devDependencies": {
        "mocha": "^5.2.0",
        "selenium-webdriver": "^4.0.0-alpha.1"
      },
      "scripts": {
        "test": "mocha formTest.js --timeout 10000"
      },
      "license": "MIT",
      "private": true
    }
    
  2. 次のコマンドを入力し、作成したテストコードを実行します。
    npm test
    
  3. コマンドを実行するとテスト結果がコンソールに表示されます。緑のチェックが入っているものは「テストOK」、赤字になっているものは「テストNG」となります。

    サンプルコードの期待値を変更することで、テストNG時の挙動も確認できます。テストNG時の表示では、期待値と実際のエラー文言の内容が違うため、NGとなっていることが確認できます。

    ▼テストOK時の表示

    ▼テストNG時の表示

おわりに

慣れるまではテストコードを作るのに時間がかかり、手動でテストした方が早いのではと思うかもしれません。しかし、規模が巨大化すると、手動でのテスト工数は膨大な時間になり、自動化のメリットが大きくなります。また、一度テストコードを作成しておけば、機能改修や運用でのバグフィクス時にリグレッションテストを簡単に行えるため、プロジェクト全体を通して見ると、自動化するメリットがあります。

みなさまもご自身のプロジェクトのテスト手法を一度見直してみてはいかがでしょうか? 今回は導入手順の解説のみでしたが、次の続編記事もあわせてご覧ください。

(編集部注*この記事は、2015年3月公開当初はv2.44.0での手順を解説していましたが、2018年5月にv4.0.0-alpha.1を使用した手順に更新しています。それに伴い、selenium serverを起動する手順が不要となり削除しています。)