web-dev-qa-db-ja.com

テストする方法chrome拡張機能？

これを行う良い方法はありますか？コンテンツスクリプトとしてWebサイトと対話し、localstorageを使用してデータを保存する拡張機能を作成しています。この動作をテストするために使用できるツール、フレームワークなどはありますか？ javascriptをテストするための一般的なツールはいくつかありますが、拡張機能をテストするには十分ですか？単体テストは最も重要ですが、他の種類のテスト（統合テストなど）にも興味があります。

unit-testinggoogle-chromegoogle-chrome-extension
145
swampsjohn

はい、既存のフレームワークは非常に便利です。

最近では、すべてのテストをアプリケーションに埋め込まれた「テスト」ページに配置しましたが、物理的に入力しないと到達できません。

たとえば、chrome-extension://asdasdasdasdad/unittests.htmlでアクセスできるページ内のすべてのテストがあります

テストではlocalStorageなどにアクセスできます。コンテンツスクリプトにアクセスするには、理論的にはテストページに埋め込まれたIFRAMEを介してテストできますが、これらはより統合レベルのテストであるため、ユニットテストではそれを抽象化する必要がありますlocalStorageへのアクセスでも同様に、実際のページから依存しないようにします。

ページを直接テストする場合は、拡張機能を調整して新しいタブを開きます（chrome.tab.create（{"url"： "someurl"}）。コンテンツスクリプトを実行する新しいタブごとに、使用できますテストフレームワークを使用して、コードが実行すべきことを実行したことを確認します。

フレームワークに関しては、 JsUnit またはより最近の Jasmine は正常に動作するはずです。

105
Kinlan

いくつかのchrome拡張機能で作業しました sinon-chromemocha、nodejsを使用して単体テストを実行できるプロジェクトおよびphantomjs。

基本的に、すべてのchrome.* AP​​Iのsinonモックを作成し、事前定義されたjson応答を配置できます。

次に、ノードのvm.runInNewContextをバックグラウンドページに使用し、phantomjsをレンダリングポップアップ/オプションページに使用して、スクリプトをロードします。

そして最後に、必要な引数を使用してchrome apiが呼び出されたと断言します。

例を見てみましょう：
シンプルなchromeボタンバッジで開いているタブの数を表示する拡張機能があるとします。

背景ページ：

chrome.tabs.query({}, function(tabs) {
  chrome.browserAction.setBadgeText({text: String(tabs.length)});
});

テストするには、次のものが必要です。

  1. chrome.tabs.queryをモックして、定義済みの応答を返します。 2つのタブ。
  2. モックされたchrome.* apiを何らかの環境に注入します
  3. この環境で拡張コードを実行します
  4. ボタンバッジが「2」に等しいことを表明する

コードスニペットは次のとおりです。

const vm = require('vm');
const fs = require('fs');
const chrome = require('sinon-chrome');

// 1. mock `chrome.tabs.query` to return predefined response 
chrome.tabs.query.yields([
  {id: 1, title: 'Tab 1'}, 
  {id: 2, title: 'Tab 2'}
]);

// 2. inject our mocked chrome.* api into some environment
const context = {
  chrome: chrome
};

// 3. run our extension code in this environment
const code = fs.readFileSync('src/background.js');
vm.runInNewContext(code, context);

// 4. assert that button badge equals to '2'
sinon.assert.calledOnce(chrome.browserAction.setBadgeText);
sinon.assert.calledWithMatch(chrome.browserAction.setBadgeText, {
  text: "2"
});

これをmochaのdescribe..it関数にラップして、ターミナルから実行できます。

$ mocha

background page
  ✓ should display opened tabs count in button badge

1 passing (98ms)

完全な例 here を見つけることができます。

さらに、sinon-chromeでは、chromeイベントを事前に定義された応答でトリガーできます。

chrome.tab.onCreated.trigger({url: 'http://google.com'});
57
vitalets

Chromeの既存のツールについて：

  1. chrome開発者ツールには、ローカルストレージのリソースのセクションがあります。

    開発者ツール>リソース>ローカルストレージ

    そこのlocalstorageの変更を参照してください。

  2. Console.profileを使用して、パフォーマンスをテストし、実行時呼び出しスタックを監視できます。

  3. fileSystemの場合、このURLを使用して、ファイルがアップロードされているかどうかを確認できます。filesystem：chrome-extension：/// temporary /

コンテンツスクリプトとローカルストレージを一緒にバックグラウンドページ/スクリプトなしで使用し、メッセージを渡すことなく使用している場合、ローカルストレージはそのサイトからのみアクセスできます。そのため、これらのページをテストするには、これらのタブにテストスクリプトを挿入する必要があります。

2
Nafis Ahmad

sinon.jsはうまく機能しているようで、単純なJasmineを使用してChrome必要なコールバックをモックすることもできます。例：

モック

chrome = {
  runtime: {
    onMessage : {
      addListener : function() {}
    }
  }
}

テスト

describe("JSGuardian", function() {

  describe("BlockCache", function() {

    beforeEach(function() {
      this.blockCache = new BlockCache();
    });

    it("should recognize added urls", function() {
      this.blockCache.add("http://some.url");
      expect(this.blockCache.allow("http://some.url")).toBe(false);
    });
} // ... etc

デフォルトを変更するだけです SpecRunner.html コードを実行します。

1
serv-inc

いくつかの以前の答えを確認するために、JasmineはChrome拡張機能で動作するようです。バージョン3.4.0を使用しています。

Jasmine spies を使用して、さまざまなAPIのテストダブルを簡単に作成できます。独自にゼロから構築する必要はありません。例えば：

describe("Test suite", function() {

  it("Test case", function() {

    // Set up spies and fake data.
    spyOn(chrome.browserAction, "setPopup");
    spyOn(chrome.identity, "removeCachedAuthToken");
    fakeToken = "faketoken-faketoken-faketoken";
    fakeWindow = jasmine.createSpyObj("window", ["close"]);

    // Call the function under test.
    logout(fakeWindow, fakeToken);

    // Perform assertions.
    expect(chrome.browserAction.setPopup).toHaveBeenCalledWith({popup: ""});
    expect(chrome.identity.removeCachedAuthToken).toHaveBeenCalledWith({token: fakeToken});
    expect(fakeWindow.close.calls.count()).toEqual(1);

  });

});

それが役立つ場合、いくつかの詳細：

別の回答で述べたように、テストを実行するブラウザー拡張機能の一部としてHTMLページを作成しました。 HTMLページには、Jasmineライブラリ、拡張機能のJavaScriptコード、テストスイートが含まれています。テストは自動的に実行され、結果はフォーマットされます。テストランナーや結果フォーマッタを作成する必要はありません。 インストール手順 に従い、そこに記載されているHTMLを使用してテストランナーページを作成し、ページにテストスイートも含めます。

別のホストからJasmineフレームワークを動的に取得できるとは思わないので、拡張機能にJasmineリリースを含めました。もちろん、本番用の拡張機能を構築するときは、テストケースも省略します。

コマンドラインでテストを実行する方法は検討していません。これは、自動展開ツールに便利です。

0
Jon A

Selenium web driverを使用して、プリインストールされた拡張機能で新しいブラウザインスタンスを起動し、 pyautogui を使用してクリックできることを確認しました。クリック後、スクリーンショットを作成し、「予想される」スクリーンショットと比較して、95％の類似性を期待できます（異なるブラウザーでは、数ピクセルまでのマークアップ移動が許容されるため）。

0
Vitaly Zdanevich