Re: フロントエンドに秩序を取り戻す方法 #nodefestBフロントエンドに秩序を取り戻す方法のこの辺で自分の発表資料が引用されてたので返信してみる。 E2Eテストから導入することに関しては正常系のシナリオのみのテストを書くことを想定しています。E2Eでレグレッションテストはおすすめしません #nodefestB // フロントエンドに秩序を取り戻す方法 https://t.co/Whzvrpvzhu
なぜSeleniumIDEを作ってるのか
この記事はFrontrend Advent Calendar 2014 - Qiita 1日目です。 今年の中頃から一人でSeleniumIDEのChrome版のようなものを作ってる。 kyo-ago/chrome-autopilot-tool これはほぼ趣味の活動だけど、せっかくなので目的とかを書いておこうと思う。 SeleniumIDEとは何かその前にSeleniumの説明がいるか。。。 Seleniumとは何かSeleniumとはオープンソースのE2Eテストフレームワークで、主に実ブラウザを動かしてWebサイトの検証を行うために使われる。 歴史は結構古くて2004年くらいに現Sauce Labs CTOのJason Hugginsが開発したらしい。 WebDriverとは何かSeleniumを語る上で外せないのがWebDriverだ。 WebDriverとはブラウザをリモートから共通
Chrome AppsでWebAppの開発に必要なN個のこと
※元ネタは「PerlでWebAppの開発に必要なN個のこと」 あるプログラミング言語で実際にWebAppを開発できるようになるまで、何が必要だろうか。言語仕様の習得は終えているとしよう。おそらく、最低限以下のような知識が必要だと思われる。とりあえずChrome Appsについて知っていることを書いた。 これはChrome Apps上でWebAppを開発するための資料なので、通常のChrome Appsを開発するために参照することはおすすめできない。 パッケージマネージャChrome Appsは基本的にChrome上で動くため、bowerを使用するのがいいだろう。 ただ、ChromeはNode.jsと同じV8環境なため、Node.jsのAPIに依存しないコードならnpm経由でインストールしたライブラリも使えるかもしれない。 Node.js形式のコードをブラウザ上で実行できるように変換するno
JavaScript書くのに入れとくといいもの
Chrome CanaryDevToolsも進化してるのでStableではなくCanaryを Local ProxyPCのみならDevToolsだけでもいいけど、スマホのWebView内解析とか考えるとLocal Proxyは必須 Windowsなら Fiddler （無料） Macなら Charles （有料） Macでお金払うのが嫌な場合 CocProxy for nginx （無料。CUI。Ruby版使うくらいならこちらを） JS製が良くてソース読みたいなら Klepto （無料。GUI。不安定） ソースの文字コード変更ChromeでJS、CSS開くと日本語が化けるので、初期文字コードをUTF-8に変更 （フォント設定（ chrome://settings/fonts ）の一番下を「Unicode (UTF-8)」に） “This Frame” Context Menuiframeの
Google AnalyticsにみるJSの非同期初期化処理
Google Analyticsが提供するJSは以下の様な初期化処理をおこなっている。 Google Analyticsに限らす外部JSを読み込むライブラリの場合、「初期化は非同期で行いたいが、APIの読み出しは同期で行いたい」という要望がある。 通常こういった要望を叶えるためには、メインのJSが読み込み済みかどうか監視して処理を呼び分けるような長い初期化処理を貼り付けタグとして発行し各サイトに埋め込んでもらう必要がある。 ただ、貼り付けタグが長くなるとコピペミスも増えるし、貼り付けタグ部分で問題が発生した時に対処できなくなるため、貼り付けタグはできるだけ短いほうが嬉しい。 そこで最初に紹介したGoogle Analyticsのタグを見ると、初期化処理は実質「var _gaq = _gaq || [];」だけということがわかる。 ではこの初期化処理だけでどうやって「初期化は非同期だけど、A
スマホ環境でのブラウザ、WebViewデバッグ方法
Local ProxyWindowsFiddler Web Debugger - A free web debugging tool MacCharles Web Debugging Proxy • HTTP Monitor / HTTP Proxy / HTTPS & SSL Proxy / Reverse Proxy CocProxy for nginx - #生存戦略 、それは - subtech CocProxyだとSSL通信のMitMが大変かもしれない。 （Fiddler、CharlesはMitM機能を持っている） pacLocal Proxyはstreaming通信を中継できないし、SSL認証で認証局エラーを確認している環境では通信できない。 そういった環境の検証にはpacを使うと不要な通信を除外できる （local_ip_adderは検証機から接続可能なIPを記述する） fu
CSSファイルをJSから非同期読込する方法
CSSファイルをクライアントサイドだけで動的なURLつけて非同期読み込みしたい場合、単純に以下のようなコードを書くと同期読み込みになって読み込み完了まで他のファイルの読み込みがブロックされる。 (function () { var href = 'style sheet url'; var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = href; var head = document.getElementsByTagName('head')[0]; head.appendChild(link); })(); これに関しては以下のように別のiframeを作成して読みこめば非同期で読み込めるので、他のファイルの読み込みをブロックしない。 （iOS, Androidで動作を確認） (fun
Google Analyticsのウェブテスト（A/Bテスト）をJSから使う方法
Google Analyticsのウェブテスト（A/Bテスト）とはGoogle アナリティクス公式サイト - ウェブ解析とレポート機能 – Google アナリティクスには「ウェブテスト」という名前でA/Bテストの機能が組み込まれており、この機能を使うと「AページとBページでどちらが成果が高いか」を判断することができます。 このA/Bテスト機能は元々Google Website Optimizerで提供されていましたが、Google Website OptimizerがGoogle Analyticsへ統合されたためA/Bテスト機能はGoogle Analyticsから設定するようになっています。 Google Analyticsのウェブテストの問題点ただ、Google AnalyticsにはGoogle Website Optimizerで言う「多変量（MVT）テスト」が存在せず、「A/
JSのUnitTest関連技術
ざっくり以下のようなツールが関連する CIサーバ系（Jenkins等） 何かのタイミングで自動的にテストを実行する場合に使用 「Swarm系」、「結合テスト系」を操作し、その結果を蓄積、報告する 結合テスト系 利点 IDEを使えばテストの定義が簡単実ブラウザでテストを実行するので検証が確実標準で画面遷移も含めた結合テストをサポートhtmlの切り出しが不要で実サービスを使ったテストが可能CIサーバとの連携が可能欠点 IDEを使ったテストは柔軟性に欠ける実ブラウザを使うので起動が遅い実ブラウザを使うので安定性に欠けるテストがUI（html, css）に依存するHeadLess系が使えない（多分）ブラウザのみでテストが完結しないある程度UIが安定しているサービスに対してのサーバも含めたブラックボックステストに向く Swarm系 利点 実ブラウザでテストを実行するので検証が確実UnitTest系の
SinonJSとJsTestDriverを使ったJSテスト手法に関して
最近SinonJSとJsTestDriverを組み合わせてこんな感じのコードをベースにテストを書いているので紹介したいと思います。 sinon.log = function (message) { jstestdriver.console.log(message); }; sinon.assert.expose(this, { 'includeFail' : false }); var oldTestCase = TestCase; TestCase = function (name, condition, opt_proto) { if ('function' !== typeof condition) { opt_proto = condition; condition = undefined; } Object.keys(opt_proto).forEach(function (ke
JavaScript UnitTest Patterns
ここでは以下の順番でSinonJSとJsTestDriverを使用したJavaScriptのUnitTest Patternsを紹介します。 初期化の遅延非同期実行の同期化html, cssのテストイベントのテストその他問題になりうるコード初期化の遅延UnitTestを行う場合、まずは初期化functionが自動的に実行されないようにしましょう。 初期化functionをこちらの任意のタイミングで実行できるようにすることにより事前に対象外のコードをstub化したり、必要なfunctionへspyを仕込んだ状態でfunctionを実行できるようになります。 UnitTestの場合のみ初期化を遅延する一番簡単な方法はUnitTest実行時のみ条件分岐で初期化を止める方法です。 $(function () { if (window.sinon) { init(); } }); この方法は簡単かつ
JsTestDriverとphantomjsとJenkinsを使ってのJSの継続的なテスト
JsTestDriverとphantomjsとJenkinsを使ってのJSの継続的なテストを行う方法を解説します。 Javaのインストール JsTestDriver、Jenkins共に実行にJavaが必要になるため、Javaのインストールを行いましょう。 すでにインストール済みの場合は必要ありません。 JsTestDriverのインストール JsTestDriverのjarを落としましょうダウンロードしたJsTestDriverを–portオプションで起動しましょう（ $ java -jar JsTestDriver[バージョン番号].jar –port 9876 ）設定ファイルのサンプルをダウンロードしてJsTestDriver.jarと同じディレクトリにJsTestDriver.confの名前で保存しましょうこれでJsTestDriver serverが起動します。 今回はテスト対象と
jQueryのliveやdelegateは実際何をやってるのか
jQueryにはイベント制御のAPIとして、clickやmouseoverの元になるbindの他に、同じような呼び出し方のliveやdelegateが提供されている。 bindはDOM APIで提供されているaddEventListenerのwrapperだが、liveは以下のような実装になっている。 1. 第一引数のイベント名でdocument objectにlive用のイベントハンドラーをbindする 2. 1で設定したイベントハンドラー内でdocument object内に存在する要素上で発生したイベントを全てキャッチする ・イベントの発生元要素がbind時に設定されたセレクタに一致する場合、第二引数に指定されたユーザーのイベントハンドラーを呼び出す これはもともと「多量の要素に対してbindするとUIをロックしてしまう」という問題の対策として知られていた手法だが、liveはそれをj
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
