如何測試Chrome擴展程序/ Firefox WebExtension代碼？

由於Firefox強制我，我正在重寫我的擴展使用WebExtension API，即Chrome的擴展API。我想要進行自動化測試。到目前爲止，我已經試過這樣：如何測試Chrome擴展程序/ Firefox WebExtension代碼？

我有一個package.json，使npm將安裝depedencies：

{ 
    "name": "extension-api-tests", 
    "version": "0.0.1", 
    "scripts": { 
    "test": "karma start" 
    }, 
    "devDependencies": { 
    "karma": "^1.3.0", 
    "karma-firefox-launcher": "^1.0.0", 
    "karma-mocha": "^1.3.0", 
    "karma-sinon-chrome": "^0.2.0", 
    "mocha": "^3.1.2", 
    "sinon-chrome": "^2.1.2" 
    } 
}

我有一個karma.conf.js設置一個測試運行：

module.exports = function(config) { 
    config.set({ 
    frameworks: ['mocha', 'sinon-chrome'], 
    files: ['test.js'], 
    reporters: ['dots'], 
    autoWatch: false, 
    browsers: ['Firefox'], 
    singleRun: true, 
    concurrency: Infinity, 
    }); 
};

而且我已經得到了基本測試：

describe('my frustration',() => { 
    it('works when it uses no APIs', done => { 
    done(); 
    }); 

    it('should respond to messages!', done => { 
    console.log('message test starting'); 
    chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { 
     console.log('received message'); 
     sendResponse(true); 
    }); 
    chrome.runtime.sendMessage({}, result => { 
     console.log('received response to message'); 
     done(); 
    }); 
    }); 

    it('should open a tab!', done => { 
    console.log('tab test starting'); 
    chrome.tabs.create({ 
     'active': true, 
     'url': 'http://www.example.com/', 
    }, tab => { 
     console.log('created a tab:', tab); 
     done(); 
    }); 
    }); 
});

這是當然是減少測試用例。當我運行npm test，我得到（略有刪節）：

> [email protected] test .../ext-test 
> karma start 

25 07 2017 11:57:10.395:INFO [karma]: Karma v1.7.0 server started at http://0.0.0.0:9876/ 
25 07 2017 11:57:10.397:INFO [launcher]: Launching browser Firefox with unlimited concurrency 
25 07 2017 11:57:10.404:INFO [launcher]: Starting browser Firefox 
25 07 2017 11:57:14.687:INFO [Firefox 54.0.0 (Ubuntu 0.0.0)]: Connected on socket iIjNRRQfzWj68_GNAAAA with id 42440302 
. 
LOG: 'message test starting' 
Firefox 54.0.0 (Ubuntu 0.0.0) my frustration should respond to messages! FAILED 
     Timeout of 2000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves. 
LOG: 'tab test starting' 
Firefox 54.0.0 (Ubuntu 0.0.0) my frustration should open a tab! FAILED 
     Timeout of 2000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves. 
Firefox 54.0.0 (Ubuntu 0.0.0): Executed 3 of 3 (2 FAILED) (3.998 secs/4.001 secs) 
npm ERR! Test failed. See above for more details.

我的測試中，其嘗試使用擴展API全部失敗。它沒有定義而不是（例如）chrome.runtime（但是，如果我從karma.conf.js中刪除'sinon-chrome'），所以我相信我已經設置了sinon。但API從不做任何事情，從不工作。我想測試的代碼是全部關於通過這些API傳遞數據（特別是作爲消息，穿過鉻/內容邊界）。

來源

2017-07-25 arantius

無法評論主要問題，但是當你解決它時，請注意'runtime.sendMessage'不會自Chrome 49以後發送到它自己的頁面/框架，並且顯然在Firefox的所有版本中。 – wOxxOm

我*猜測* sinon提供的假冒行爲不像真正的API，使測試成爲可能。 – arantius

確實，sinon文檔中的例子與您使用的直接調用完全不同。我不知道sinon，但不能說這是唯一支持的方法。 – wOxxOm

根據https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/runtime/sendMessage sendMessage返回一個Promise。根據你的日誌，在

chrome.runtime.sendMessage({}, result => { 
    console.log('received response to message'); 
    done(); 
});

您的成功處理程序不會被調用的時間比運行測試的主線程。你應該嘗試睡眠添加到主線程

function sleep (time) { 
    return new Promise((resolve) => setTimeout(resolve, time)); 
}

像這樣

chrome.runtime.sendMessage({}, result => { 
    console.log('received response to message'); 
}); 

sleep(500).then(() => { 
    done(); 
});

只要的sendMessage 500毫秒內返回，這應該工作。

來源

2018-02-07 23:37:29 Robert

如何測試Chrome擴展程序/ Firefox WebExtension代碼？

回答

相關問題