5

バックグラウンド

JS を使用してユーザー入力をシミュレートすることにより、作業中のアプリケーションで UI テストを実行します。JS は、テスト済みのアプリが実行されている iframe で一連のマウスとキーボードのトリガーを順番に実行し、ブレークを監視できます。定期的に現状のスクリーンショットを撮れるように設定したいです。

検討済み

これは重複した質問であることは承知しています。最近この分野で進展があった場合に備えて、もう一度質問します。

スクリーンショットを撮るためにhttp://html2canvas.hertzen.com/を調べましたが、ほとんどの場合は機能しますが、CSS3 と Web フォントの使用が多いと問題が発生するようです。

また、私は単一ページのバックボーン アプリに取り組んでおり、(ほとんどの場合) URL に基づいて状態を保存しないため、サーバー側の方法を自由に使用することもできません。

Mozilla 固有のbackground:-moz-element()プロパティも確認しましたが、必要なページが iframe にある場合は機能しません。

私が必要としているものに最も近いのは、ページを操作してスクリーンショットを撮ることができるphantomJSだと思います。他の方法で実行しているときにテストを表示する機能を使用するため、これは避けたいと思います。

それで、私がここで使えるものを知っている人はいますか？Windows 上で動作する限り、1 つのブラウザー (Firefox または Chrome) に限定することもできます。すべてのクライアントで実行する必要はなく、私のものだけなので、スクリーンショットを JS 経由で保存できる限り、特別な環境をセットアップする必要があっても問題ありません (ただし、Firefox または Chrome のみで、ActiveX はありません)。

TL;DR iframe で実行されているアプリのスクリーンショットを保存するには、Javascript または HTML5 API が必要です。有料のソリューションはありません。

4

3 に答える 3

4

私たちが開発したものを正確に必要としているようです。単一ページのアプリ (状態を含む) から完全に正確なスクリーンショットを作成できます。

http://usersnap.comをご覧ください。

完全な開示: 私は Usersnap の共同創設者です。

于 2013-09-19T10:17:19.980 に答える
3

最終的にphantomJSに行きました。html2canvas は基本的な使い方には優れていますが、大量の CSS3 や Web フォントがある場合はうまく機能しません。

phantomJS の安定版には、Web フォントに関する文書化された問題がいくつかあります - https://code.google.com/p/phantomjs/issues/detail?id=592

ありがたいことに、このユーザーは、すぐに使えるフォントサポートを備えたバージョンを構築しました - http://arunoda.me/blog/phantomjs-webfonts-build.html

また、独自のサーバー (ローカル) から Web フォントを提供している場合でも、失敗する可能性があることに注意してください。Google がホストする URL に切り替えると、通常はこれが修正されます。コンテンツタイプと関係があるかもしれません。

于 2013-08-15T13:39:30.933 に答える
1

特定のブラウザーを必要とするソリューションで問題ないので、Chrome 拡張機能を作成し、Tab APIのcaptureVisibleTabメソッドを使用できます。

chrome.tabs.captureVisibleTab(null, {}, function (image) {
   // You can add that image HTML5 canvas, or Element.
});

ソース: https://stackoverflow.com/a/4574782/2972

JavaScript から拡張機能を呼び出す方法については、この回答を参照してください: https://stackoverflow.com/a/8713547/2972

于 2013-03-16T09:22:17.297 に答える