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

JavaScript(Node.js)を使ってChromeブラウザでテストを実施するテストコードを作成しましょう。

まずNode.jsをインストールします。Node.jsは公式サイトのインストーラーを使って手順に従ってインストールします。インストール後コマンドラインでnode -vと実行し、Nodeのバージョンが表示されていればインストール成功です。

1. selenium-webdriver のインストール

コマンドライン(ターミナルやコマンドプロンプト)を立ち上げ、以下のコマンドを実行してselenium-webdriverをインストールします。

npm -g install selenium-webdriver

※macOSでエラーが出る場合は、管理者権限((sudo)で試してみてください。

2. ライブラリのインストール

本記事ではテスティングフレームワークとしてMochaを、アサーションライブラリとしてExpect.jsを使ってテストコードを作成していきます。コマンドラインを立ち上げ、以下のコマンドを実行してインストールします。

npm -g install mocha
npm -g install expect.js

※macOSでエラーが出る場合は、管理者権限(sudo)で試してみてください。

3. Selenium Server のダウンロード

下記のURLのよりSeleniumServerをダウンロードし、任意のフォルダに設置ください。

http://www.seleniumhq.org/download/

4. Seleinum Google Chrome Driver のダウンロード

下記のURLより最新バージョンのDriverを取得し、ダウンロードください(2015年3月時点の最新は2.14)。ダウンロードしたZIPファイルを展開すると、実行ファイルが出てきますので、任意の場所に設置します。

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

テストコードの作成

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

var webdriver = require('selenium-webdriver');
var t = require('selenium-webdriver/testing');
var expect = require('expect.js');
var driver;
var assert = require('assert');
var By = webdriver.By;

t.describe('入力フォーム デモ', function () {
  t.before(function () {
    driver = new webdriver.Builder().usingServer('http://localhost:4444/wd/hub').withCapabilities(webdriver.Capabilities.chrome()).build();
  });

  t.after(function () {
    driver.quit();
  });

  t.it('名前欄の必須入力チェック その1', function () {
    driver.get('http://ics-drive.jp/sandbox/demo/demo.html').then(function () {
      // 何も入力せずにSubmitする
      driver.findElement(By.id('sampleForm')).submit();

      // エラーメッセージを取得して、文言が正しいかチェックする
      driver.wait(driver.findElement(By.id('error_name')).getText(), 1000)
        .then(function (text) {
          expect(text).to.be('名前を入力してください。');
        });
    });
  });

  t.it('名前欄の必須入力チェック その2', function () {
    driver.get('http://ics-drive.jp/sandbox/demo/demo.html').then(function () {
      // 名前を入力してSubmitする
      driver.findElement(By.id('name')).sendKeys('品川太郎');
      driver.findElement(By.id('sampleForm')).submit();

      // エラーメッセージを取得して、文言が空であるか確認する
      driver.wait(driver.findElement(By.id('error_name')).getText(), 1000)
        .then(function (text) {
          expect(text).to.be('');
        });
    });
  });

});

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

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

20行目と42行目に記述されているexpect(xx).to.be('');が、テスト処理内で行なわれるAssertionの処理になります。Assertionとは、期待しているものと合致しているかを検証するコマンドで、上記のコードでは取得したエラーコードの文言が正しいかを検証している処理になります。

テストコードの実行

  1. テストを開始する前に Selenium Server を起動します。先程ダウンロードしたファイルを配置したディレクトリに移動し、以下のコマンドを実行します。
    java -jar selenium-server-standalone-2.44.0.jar -Dwebdriver.chrome.driver=chromedriver
    
  2. Selenium Server が起動したら、以下のコマンドを入力し、作成したテストコードを実行します。デフォルトのタイムアウト設定の場合、通信環境によってはタイムアウトになってしまう可能性があるため、実行時のオプション設定でタイムアウトの時間を10000msに変更しておきます。
    mocha tests/formTest.js --timeout 10000
    
  3. コマンドを実行するとテスト結果がコンソールに表示されます。緑のチェックが入っているものは「テストOK」、赤字になっているものは「テストNG」となります。「テストNG」のものはテスト結果の下に詳細が表示されます。下記の例では、期待値となるエラー文言と実際のエラー文言の内容が違うためエラーとなっていることがわかります。
    SeleniumTestResult

おわりに

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

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