SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

JavaScriptでテストを書こう!

複数のブラウザで一度にJavaScriptのテストを行う

JavaScriptでテストを書こう! 第5回

  • このエントリーをはてなブックマークに追加

 本連載は、テストコードをこれから書こうと考えているJavaScript技術者を対象に、テストコードの意義からテスト駆動開発、JavaScriptでのテストコードの書き方、継続的インテグレーションなど、テスト全般にわたって解説します。また、原理原則だけでなくWhyから説明し、チームメンバーを巻き込みながら開発現場に活かせる考え方を総合的に解説します。第5回目の本稿は、JavaScriptのクロスブラウザのテスト方法をjs-test-driverを使って説明します。

  • このエントリーをはてなブックマークに追加

対象読者

  • JavaScriptの基本をある程度理解している方
  • テストコードをこれから書こうと考えている方

複数のブラウザでのJavaScriptのテスト

 前回までは、主にテストコードの書き方について説明してきました。今回からは、テストの実行環境についての説明をします。

 JavaScriptの実行環境は、クライアントサイドはブラウザ、サーバサイドは例えばnode.jsです。サーバサイドは実行環境を決めてしまえばその環境だけで動作しますが、クライアントサイドは多くのブラウザそしてバージョンが存在し、ユーザに選択権があります。また、それぞれの環境でJavaScriptの実行結果に差異があることもあり、ユーザが選択しうる環境それぞれで可能な限りテストを行う必要が出てきます。

 そこで、js-test-driverを使用すると、JavaScriptのテストコードを複数のブラウザで一気に実行できる環境を作ることができます。js-test-driverは、図1のとおり、サーバを立ち上げ各ブラウザから接続し、サーバ側でテスト実行コマンドを実行することで、接続したすべてのブラウザでテストが実行され、その結果をサーバ側で取得できます。処理の流れを要素ごとに見ていきましょう。

1)Sources

 JavaScriptのプロダクトコードとテストコードです。

2)Config

 js-test-driverの設定ファイルです。読み込むJavaScriptファイル、テストコード、サーバ情報などを設定できます。

3)Client

 コマンドラインでの実行を示しています。サーバの立ち上げとテストコードの実行はコマンドラインから行います。

4)Server

 js-test-driverのサーバです。テストを動作させるブラウザを接続し、テストを実行します。

5)Browsers Slaves

 テストを実行させるブラウザです。js-test-driverのサーバにURLを入力して接続し、処理画面を表示させておきます。表示させておくだけで、コマンドラインからテスト実行の指示が出されると、接続しているブラウザでテストを実行します。

図1 js-test-driverの実行構成図(公式サイト
図1 js-test-driverの実行構成図(公式サイト)

 通常ブラウザでのテスト実行は、テスト実行ページにアクセスし、実行結果を確認するというプロセスですが、js-test-driverを使用することにより、一度に複数のブラウザで実行でき、コマンドで実行結果を確認することができます。Jenkinsのようなツールと組み合わせ、継続的インテグレーション(CI)を行うことも可能になります。継続的インテグレーションとは、継続的にビルド(統合)を行っている状態をいい、コンパイルやサーバデプロイと共に自動テストも組み合わせて行います。また、js-test-driverにはカバレッジ取得など、プラグインで機能を追加できる仕組みも提供されています。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
js-test-driverでのテストの書き方

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
JavaScriptでテストを書こう!連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 安西剛 (ヤスニシ ツヨシ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7955 2014/08/21 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング