Node.jsとSeleniumでWebアプリのUIテストを自動化(2018年版)

29
29
389

Webアプリケーションを開発する際、みなさんはどのようにテストを行っていますか? Webアプリケーションは、ユーザーごとに異なるブラウザを使用しており、ユーザー操作も必要となるため、手作業でテストをされている方も多いと思います。また、機能改修やバグフィクス後に、リグレッションテスト(改修により既存機能への影響がないかを確認する回帰テスト)が必要となりますが、時間が取れずしっかりとテストができていない方も多いのではないでしょうか。

本記事では、これらのテストを自動化することのできる「Selenium Webdriver」(セレニウム ウェブドライバー)について紹介します。

入力フォームのバリデーション機能をチェックするデモ

簡単な入力フォームのバリデーション機能をチェックするデモを動画で紹介しましょう。入力値に対して期待するエラー文言が表示されているかのテストを実施しています。Selenium Webdriverでできることがイメージできると思います。

Selenium Webdriver とは

Seleniumは、Webアプリケーションのテストを自動化するオープンソースソフトウェアです。2011年に、Google開発していた「WebDriver」と統合し、「Selenium WebDriver」としてリリースされました。「Selenium WebDriver」の大きな特徴としては、複数言語対応とマルチブラウザ対応の2点が挙げられます。

複数言語対応

さまざまな言語でSeleniumのテストコードを作成できます。現在(2018年5月)時点では以下の言語に対応しているため幅広いユーザーに使いやすくなっています。

  • Java
  • C#
  • Ruby
  • Python
  • JavaScript(Node.js)

マルチブラウザー対応

サードパーティーが公開しているドライバーを使用することで、さまざまなブラウザーで利用できます。現在(2018年5月)時点では以下の通り、PCのブラウザーだけでなくiPhoneやAndroidのモバイルブラウザーに対応したドライバーも公開されています。また、Appium(Selenium for Application)というツールを使えば、Webブラウザーのテストだけでなく、モバイルアプリのテストも実施できます。

  • Chrome
  • Firefox
  • Internet Explorer
  • Microsoft Edge
  • Opera
  • iOS Safari
  • Android標準ブラウザ

Selenium Webdriverでできること

Selenium Webdriver は、ユーザー操作でできることはほとんど実行できます。クリックやスクロール・文字入力などはもちろん、ウィンドウサイズの調整やCookieやセッション情報の書き換えも可能です。また、スクリーンショットを撮ることもできるため、レスポンシブレイアウト等の表示確認やテスト実施時のテストエビデンス(*1)として画面を残しておくことができるため、テストの用途だけでなく、自動化ツールとしても使用できます。Selenium Webdriver は、Webサイトの管理画面やユーザーのマイページ、SinglePageApplication(SPA)などのテストにとくに向いていると思います。

*1 テストエビデンスとは、テスト実施の記録(証拠)となるもので、テストを実施時のスクリーンショットなどが使われます。

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を起動する手順が不要となり削除しています)

※この記事が公開されたのは4年4ヶ月前ですが、 平成30年5月29日に内容をメンテナンスしています。