QUnit とTAP を用いた JavaScript のテスト環境構築の話です。 前提として、QUnit でテストを実行出来る環境が構築できていることとします。 QUnit の実行のやり方等は以下のエントリが詳しくてマジ最高なので、ご参照下さい。 QUnitの基本的な使い方 - Block Rockin’ Codes さて、今回例として扱うディレクトリの構成としてはこんな感じです。 . ├── lib │ ├── qunit.css │ └── qunit.js ├── main.js ├── test.html └── test.js main.js: テストの対象となる JavaScript ファイル test.html: テストの結果を表示するための html ファイル test.js: JavaScript のテストコード lib以下: QUnit 本体 この段階でtest.htm
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさんこんにちは！ スマホ版Ameba担当の川口です。 ちょうど一年前、同じようにJavaScriptを使ったテスト手法について記事を書かせていただいたのですが、今回も懲りずにまた同じようなテーマで再登場いたしました。 JavaScriptのテスト手法 さて、スマホ版Amebaの全面リニューアルから早くも１年経ったのですが、今回はそんなスマホ版Amebaで日々自動テストツールとして活躍してもらっているPhantomJSを紹介させていただきます。 長い記事になるため、今回は前編・後編に分けて以下のような構成でお送りいたします。 ●前編 ・Phanto
I am trying to use PhantomJS on a page with basic always auth, for example, this page http://alexturpin.net/auth (test:rosebud) Using the following code var webpage = require('webpage'); page = webpage.create(); page.settings = { userName: "test", password: "rosebud" }; page.open("http://alexturpin.net/auth/", function(status) { console.log(status); var retval = page.evaluate(function() { return "
JSer.info #100 - Firebug 1.11.0がリリースされました。 Firebugのコンソール上で利用できる $() や $$() がquerySelector相当になったりinclude()でjsファイルを取り込んだり出来るようになったりしています。 また、postMessageや関数呼び出しのログ表示やSPDY対応等も含まれています。 Firebug 1.11 New Features ✩ Mozilla Hacks – the Web developer blog Navigation Timing APIやNavigation Timing APIでブラウザの処理時間を可視化するツール作ったのようなwindow.performanceのグラフィカル表示にも対応しています JavaScript アプリケーションのメモリー・リークを理解するという記事で、Chromeの
phantomjsでキャプチャをとる時に、ページがあまりにも大きいとCPUを長時間食いまくるので、単純なサムネイル的にキャプチャ取りたいだけならサイズを制限してレンダリングした方がよいです。 Backbone.jsのサイトとかキャプチャしようとすると、死にます。 WIDTH = 1024 HEIGHT = 768 OUTPUT_PATH = '/tmp/cap.png' page.viewportSize = { width: WIDTH, height: HEIGHT } page.open address, (status) -> if status isnt 'success' console.log 'Unable to load the address!' phantom.exit 1 else window.setTimeout (-> page.clipRect = {lef
Seleniumを使ったテストは遅いという話をよく聞きます。理由として考えられるのは以下の3つです。 テスト対象のWebアプリケーションが遅いため 遅いテストを書いているため 実際にWebブラウザを動かしているため 1つ目と2つ目は、環境やコードの書き方を変えることで改善可能です。しかし、3つ目はどうでしょうか。実際のブラウザを高速化することなど、そのブラウザの開発者でもない限り不可能です。となると、できることは、可能な限り高速なブラウザを選択することです。 PhantomJSはヘッドレスブラウザです。ヘッドレスブラウザというのはGUIのないブラウザのことで、GUIの描画処理を行わない分、通常のブラウザに比べて高速に動作するという特徴があります。そのため、時間が掛かりがちなWebアプリケーションのGUIテストを高速化するためのソリューションとして注目されています。また、マルチプラットフォー
2013年02月08日 phantomjsでfacebookに近況を投稿してみよう こんにちは、SEの孟です。 今日のブログネタはphantomjsにしたいと思います。http://phantomjs.org/ phantomjsはヘッドレスのwebkitツールで、コマンドラインから普通のブラウザと変わらない挙動でjavascriptのapiやcss,domなどを利用することができます。またjqueryをinjectJSして利用したり、サイトのスクリーンショットを取得することもできます。 phantomjsはクローラやjavascriptのテストツールとして多く使われているそうです。 ちなみに、インストールは簡単です。（この記事書いた時点での最新版は1.8.1です）http://phantomjs.org/download.html まずは、インストールに必要なライブラリを入れておきましょ
WebOverlayっていうツールを作った．指定されたURLのページを開いて，要素を囲んでラベルを載せて，スクリーンショットを保存してくれる便利ツール． GitHub - hitode909/web-overlay: Annotate A Web Page and Take a Screenshot with PhantomJS. ためしにAppleのトップページの画像を囲んだ様子． こういう設定ファイルをWebOverlayに渡して実行するとimgタグが赤い線で囲まれてそれぞれ右下にimageっていうラベルがついたスクリーンショットが出てくる． { "url": "http://apple.com", "overlays": [ { "selector": "img:visible", "label": "image", "type": "all" } ] } 例だから画像を全部囲んでみ
RailsでJavascript/CoffeeScriptをテストするときの決定版（にしたい）！Konachaの続き。 最初はブラウザリロードすればいいんだから、わざわざやらなくていいか、と思ったけど、当該環境がファントムとかポルターガイストとか中二病の諸症状を悪化させる瘴気にまみれていたため、やらざるを得なくなりました。 ところでヘッドレスとは、ただ単にGUIじゃないよ、というだけで、かっこつけてんじゃねーよとか最初は思ったけど冷静になってみると、別にそんなかっこよくもねーか、ということでとにかくそういうことで。 Rails前提の話です。 PhantomJSのインストール http://phantomjs.org/ PhantomJSが、そのヘッドレスブラウザの本体。 macだとhomebrewで入る。 brew install phantomjsウィンドウズのかたはゲイツとかにインスト
Capybara-Webkit＋Cucumber＋Sinon.JSでJavaScriptのテストはここまで変わる：フレームワークで実践！ JavaScriptテスト入門（5）（1/3 ページ） しっかりとJavaScriptをテストするために、今注目のJavaScript用のテストフレームワークをいくつか紹介し、その概要から実践的な使い方まで解説する連載。今回は、RubyでWebKitをヘッドレス化するフレームワーク、受け入れテストの記述が日本語でできるツール、スタブやモック、スパイが使えるライブラリを組み合わせたテスト方法などを紹介。 Capybara-WebkitとCucumberとSinon.JSを利用したJavaScriptのテスト 本連載の最終回となる今回は、これまでの連載のようなJavaScriptのロジックを単体テストするのではなく、Webブラウザ上の操作と、それによって動作
みなさん仕事でPhantomJS使っていますか？僕は使っていません。でもそろそろ使ってみたいので、仕事でよく使うCentOSにPhantomJSをインストールする方法を調べてみました。 環境 今回はVirtualBoxes – Free VirtualBox® Imagesで公開されているCentOS-6.2のイメージを利用します。 http://virtualboxes.org/images/centos/http://sourceforge.net/projects/virtualboximage/files/CentOS/6.2/CentOS-6.2-i386.7z PhantomJSをインストールする前に、あらかじめ次のコマンドでライブラリを更新と開発ツールのインストールを行います。依存関係などが面倒なので、開発ツールは全部インストールします。 sudo yum upgrade s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く