文系プログラマによるTIPSブログスマートフォン用の表示で見る文系プログラマによるTIPSブログ文系プログラマ脳の私が開発現場で学んだ事やプログラミングのTIPSをまとめています。grid、Nightwatchを使ったE2Eテスト(ブラウザテスト)の環境構築からテスト実行、VNCでテスト実行の様子を確認するところまでやってみようと思います。v7.2.0なぜNightwatchなのか沢山あるE2Eテストフレームワークの中で今回Nightwatchを選択したのですが、理由は以下の通りです。javascriptでテストを記述できること。使い方が簡単であること。環境構築が楽であること。assertの仕組みが内蔵されていること。高機能でなくていいので、コード記述量が少なく済むこと。言うと、「簡単に環境構築できて、簡単に動作すること」です。記述言語はjavascriptに限定しました。webdriverでゴリゴリしていましたが、辛いです。いちいちコンパイルが必要だったり、環境面も優しくありませんでした。カジュアルに記述できて、コンパイル無しで動くものにしました。Protractorもいい感じに見えたのですが、Angular.jsのために作られたものだそうで、個人的には特定のFWに依存していたりする事が嫌だったのと、nightwatchと比較するとコード記述料が多いため、見送りました。install」一発で環境を用意する事ができます。テストもjsでさっくり記述でき、コンパイル無しで即実行可能なので、相当楽に動かす事ができます。Gridの環境構築は非常に難しく、メンテナンスコストも高いものでした。Docker時代となった今、大変簡単に環境構築ができてしまいます。dockerとnode.jsさえあればすぐテスト実行できちゃいます。windowsをインストールして下さい。https://docs.docker.com/docker-for-windows/node.jsmacならnodebrew、windowsならnodist等を使い、node.jsをインストールして下さい。v7.2.0テストの準備nightwatchを実行するための準備をします。upしてみたのですが、以下のように127エラーが起きてしまいました。linux)上ではdocker-machine無しで上手くいきました。0.0.0.0:4444->4444/tcpエラーが出てしまうので、ちょっと嫌ですがdocker-machineで専用ホストを作成します。selenium)vmwarefusionを持っている場合、-dの引数を「vmwarefusion」に変えて下さい。vmwarefusionの方が1.5倍程高速です。clone例によって既にすぐテストできるプロジェクト一式をgithubにアップしています。https://github.com/treetips/selenium-grid-nightwatch-example.gitgithub.comnode_moduleの依存package.jsonを用意してあるので、以下のコマンド一発で依存モジュール類が揃います。今回はnightwatchはglobalにインストールせず、ローカルにインストールする形にしました。installnightwatchの設定nightwatch.conf.jsを開き、「selenium_host」にdockerのホストを設定して下さい。ホストは以下のコマンド確認することができます。selenium172.16.53.136docker-hubdocker-hubのイメージを使用するので、アカウントが無い方はアカウントを作成して下さい。loginでログインしておきます。loginは不要になります。/Users/tree/.docker/config.jsonNightwatchでテストを実行するローカルでテストする場合ローカルの場合はいちいちVNC経由で動作を確認したくないので、selenium-standaloneを使ってローカルにインストールされたchrome,firefoxを直接実行したいですね。いう場合は以下のように実行して下さい。localもしchrome、firefoxを単独で実行したい場合は以下のようにして下さい。Gridを使って並列で一気にテストする場合は以下のようにして下さい。Gridのdockerコンテナを起動します。Gridの動作確認ブラウザから起動を確認します。http://${dockerホスト}:4444/grid/console以下ように起動しているノードが全て表示されます。Gridに対して、chromeとfirefoxのブラウザテストを並列実行する事ができます。Seleniumの実行状況をVNCで確認するローカルの場合はローカルにインストールされたchromeとfirefoxが起動するので、実行している様子を確認する事ができました。Gridの場合は、linux等のサーバ上のchrome・firefoxが起動されます。サーバ側で実行されているchromeとfirefoxを閲覧するため、VNCを利用します。今回使用するchromeとfirefoxのdockerイメージは、最初からVNCサーバがインストールされているものを使っているので、VNCクライアントさえあればすぐ確認できます。「サーバに接続」をクリックすると、以下のように表示されます。テキストボックスに以下の2つをそれぞれ入力し、接続先を追加します。4502は、docker-compose.ymlのports要素で指定しています)接続ボタンをクリックするとパスワードが聞かれます。パスワードは「secret」です。起動すると、以下のように表示されます。この状態でnightwatchでテストを実行すると、ここにブラウザが表示され、画面遷移する様子が視覚的に確認できます。実際にnightwatchを実行し、VNCでそれを確認した様子は↓こんな感じです。コンソールには、以下のようにカラフルに結果が表示されます。VNCクライアントを2つ(firefox用とchrome用)起動しておけば、両方同時に確認する事ができます。nightwatchの実行時にエラーが発生した場合は、「selenium-grid-nightwatch-example/screenshots/test/Display-yahoo-->-search-->-assert_FAILED_Nov-24-2016-004001-GMT+0900.png」のようにスクリーンショットが保存されます。Gridを初めて使ってみたわけですが、以外な程あっさり環境構築できました。Nightwatchについても環境構築は簡単でした。Seleniumでブラウザを操ると、ローカルでは問題無いのに、Gridの場合だけ特定ブラウザだけクラッシュしたりする事があったりしました。したらlinux版のfirefox・chromeの問題なのかもしれませんが、定かではありません。seleniumは扱いが難しく職人芸的な面もあるので、あまりやりすぎるとメンテできなくなって使われなくなる(実体験)ので、程々にするとよいです。ちなみに私の場合は正直ほとんどメンテしたくないと考えているので、とりあえずTOPから目的の画面までの画面遷移のみしかテストしていません。週間)昔は業務系SIer、今はベンチャー企業でプログラムを書いています。INFILEを実行できるようにするmacのAutomatorでhomebrewのコマンドをFinderのサービスから実行できるようにするReactオススメ書籍React自体の基礎、AtomicDesignの適用、CSSの運用手法の歴史的な経緯とメリットデメリット、Reduxの基礎、redux-sagaによる非同期処理、サーバサイドレンダリング、テスト、lint、を学ぶ事ができます。単行本(ソフトカバー)この商品を含むブログを見るAngularオススメ書籍Angularを学ぶなら絶対以下がおすすめです!バインディング、ディレクティブ、パイプ、フォーム、コンポーネント、サービス、ルーティング、httpClientによる非同期httpリクエスト、テスト、angular-cli、を非常に丁寧な説明で網羅的に解説しています。大型本この商品を含むブログを見るSEOオススメ書籍SEOを学ぶなら絶対以下がおすすめです!クローラに対して何をどうすればサイトの巡回効率・速度を上げる事ができるのか、どういったマークアップをする事が標準仕様なのか。巷に溢れる業者による経験則に基づくオレオレSEO情報は一切無く、全てGoogle等のオフィシャルな情報に基づいて何をすべきか、どんな手段があるのかを解説されています。プログラマな私が業務で行った施策が多く書かれており、プログラマ寄りで高度な内容となっており、巷のビギナー向けの曖昧な情報集とは一線を画しています。Amazonアソシエイト・プログラムの参加者です。reserved.スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。