Developers開発の実験等々、クイックサーブのメンバーが好き好きに書き込んでいく場所です。4.1.2PhantomJSとはJavaScriptでかけるヘッドレスブラウザ。レンダリングエンジンには、safariなどか多くのソフトウェアで用いられているWebKitが搭載されているため、基本的なJavaScriptを動かすことができる。CasperJSとはPhantomJSの用いてテストを作成できるテストフレームワーク。CasperJSはPhantomJSの他にも、SlimerJSというヘッドレスブラウザにも対応しているが、今回はPhantomJSと組み合わせることにする。できること一言で言うなら、Webアプリケーションの自動テストが効率的に行える。PhantomJSの機能を用いてウェブブラウザの動作をしシュミレートし、各画面遷移が正常に行えるか、正しい値が表示されているかなどを、CasperJSの機能を用いて検証する。これによって、従来は手作業でブラウザを操作し、正常動作しているかを検証していたものを自動化・高速化させることができるようになり、機能追加による既存機能のデグレーションをすぐに検知することができる。(基本編)テストについては一旦後回しにして、まずはPhantomJSを用いたWebスクレイピングの例を以下に示す。casper開始casper.run();実行。boketeのトップページに掲載されるボケはランダムなので、実行ごとに結果が異なる。ちなみに画像は取得していないため、回答だけ見るとモヤモヤする。test.js事故物件の地縛霊が可愛い最も重要なのが、this.evaluateのブロックだ。this.evaluateで指定した関数内は、現在開いているWebページをスコープにしている。関数内で書いたスクリプトは、Webページを対象に実行される。そのため、document.querySelector(‘h3’).innerText;で対象Webページ内のDOMを取得することができる。(応用編)もう一つブラウザの例を以下に示す。ここでは、Twitterにアクセスし、ログインフォームにID/PWを入力してログインし、適当な文字列をツイートするところまでを自動化する。casperを開始casper.run();実行すると、ちゃんと「CasperJSのテスト投稿」とツイートされることが確認できる。このように、フォームへの入力や、POSTなども通常のブラウザと同じように行うことができる。テストブラウザテストを行う前に、簡単な単体テストの例を以下に示す。test.done();});上記のコードは、常に’A’を戻すという仕様の関数getAに対する単体テストである。test.assertメソッドがテストの本体で、そこに真偽値の式と、テスト名を記述する。これを実行すると、以下のようになる。テストを行う場合はcasperjsコマンドとファイル名の間に”test”を挟む必要があるので注意。skipped.単体テストが成功したことがわかる。次に、getA関数に下記のように意図的にバグを混入してもう一度テストする。'B';};以下のようにテストは失敗となり、バグが発生していることを確認することができる。Aが返却されるブラウザテスト最後に、ブラウザ操作とテストを組み合わせたブラウザテストの例を示す。});});テストを実行すると、前述の3種類のテストが全て通っていることが確認できる。skipped.上記の例のように、test.asertの他にも、test.assertHttpStatusや、test.assertTitleなど、よく用いられるアサーションが幾つか用意されている。これらを用いて、Webページが正しく表示できているかを検証することができる。CasperJSによるブラウザテストを試してみたが、使いやすいと思う部分、使いづらいと思う部分ともにいくつかあった。感じた部分は以下の通り。コメントをキャンセルメールアドレスが公開されることはありません。