entityMap|blocks|key|2bagk|text|是的，现有的框架非常有用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|p1po|最近，我将所有的测试放在一个“测试”页面上，该页面嵌入到应用程序中，但除非以物理方式输入，否则无法访问。|amubu|例如，我将一个页面中的所有测试都放在|coe5v|测试将可以访问|d3ul2|为了访问内容脚本，理论上你可以通过测试页面中嵌入的IFRAMEs来测试它，然而这些是更多的集成级测试，单元测试将要求你从实际页面中抽象出来，这样你就不需要依赖它们了，就像访问localStorage一样。|2lcvd|如果您想要直接测试页面，您可以编排您的扩展来打开新的选项卡(chrome.tab.create({"url“："someurl"})。对于每个新选项卡，您的内容脚本都应该运行，并且您可以使用您的测试框架来检查您的代码是否完成了它应该做的事情。|6d6bm|至于框架，|cj5jk|JsUnit|bm7r7|或更新的|dp1rc|茉莉|5vmrn|应该工作得很好。^0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|W|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|X|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|Y|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|Z|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|10|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|11|9|@]|A|@]|B|$]]|$2|M|4|N|6|7|8|12|9|@]|A|@]|B|$]]|$2|O|4|P|6|7|8|13|9|@]|A|@]|B|$]]|$2|Q|4|R|6|7|8|14|9|@]|A|@]|B|$]]|$2|S|4|T|6|7|8|15|9|@]|A|@]|B|$]]|$2|U|4|V|6|7|8|16|9|@]|A|@]|B|$]]]]

Yes, the existing frameworks are pretty useful..

In the recent past, I have placed all my tests on a "test" page that was embedded in to the application but not reachable unless physically typed.

For instance, I would have all the tests in a page accessible under <code>chrome-extension://asdasdasdasdad/unittests.html</code>

The tests would have access to <code>localStorage</code> etc. For accessing content scripts, in theory you could test that through embedded IFRAMEs in your test page, however these are more integration level testing, unit tests would require you to abstract that away from real pages so that you don't depend on them, likewise with access to localStorage.

If you want to test pages directly, you can orchestrate your extension to open new tabs (chrome.tab.create({"url" : "someurl"}). For each of the new tabs your content script should run and you can use your testing framework to check that your code has done what it should do.

As for frameworks, <a href="https://github.com/pivotal/jsunit" rel="noreferrer">JsUnit</a> or the more recent <a href="https://github.com/jasmine/jasmine" rel="noreferrer">Jasmine</a> should work fine.

entityMap|blocks|key|5102e|text|关于Chrome中已经存在的工具：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|e0ml6|在chrome+developer工具中，有一个用于本地存储的参考资料部分。|falvb|开发人员工具>资源>本地存储|5inil|查看本地存储的更改。|2k2j9|您可以使用console.profile测试性能并监视运行时调用堆栈。|48ed6|对于fileSystem，您可以使用此URL检查您的文件是否已上载:filesystem:chrome-extension:/temporary/|f4tlj|如果您同时使用内容脚本和本地存储，而没有后台页面/脚本和消息传递，则只能从站点访问本地存储。因此，要测试这些页面，您必须在这些选项卡中注入您的测试脚本。^0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|O|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|P|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|Q|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|R|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|S|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|T|9|@]|A|@]|B|$]]|$2|M|4|N|6|7|8|U|9|@]|A|@]|B|$]]]]

About already existing tool in Chrome: 

<ol>
<li>In the chrome developer tool, there is section for Resources For local storage. 

Developer Tools > Resources > Local Storage 

See the changes of localstorage there. </li>
<li>You can use console.profile to test performance and watch run time call stack. </li>
<li>for fileSystem You can use this URL to check your file is upload-ed or not: 
filesystem:chrome-extension:///temporary/ </li>
</ol>

If you are use content script and local-storage together without background page/script and without message passing, local-storage will be accessible from that site only. 
So, to test those pages, you have to inject your test script in those tabs.

entityMap|blocks|key|5ueu2|text|在做几个chrome扩展时，我想到了|type|unstyled|depth|inlineStyleRanges|entityRanges|data|9jd4|允许使用以下命令运行单元测试的项目|aoca4|5hp76|和|3r7e4|..。|8lv10|基本上，它创建了所有的sinon+mock|ev31g|API，您可以在其中放置任何预定义的json响应。|bc2nv|接下来，使用node的|5m5ho|对于背景页和|1lu2g|用于渲染弹出/选项页面。|baodr|最后，您断言使用所需的参数调用了chrome+api。|atqcj|让我们举个例子：|9m1qu|假设我们有一个简单的chrome扩展，它在按钮标记中显示打开的标签数量。|8krvo|背景页：|5pm7b|chrome.tabs.query({},+function(tabs)+{
++chrome.browserAction.setBadgeText({text:+String(tabs.length)});
});|code-block|syntax|javascript|6ut3m|要测试它，我们需要：|5b8p|模拟|9ctkm|返回预定义的响应，例如两个选项卡。|7p2od|注入我们的mocked|asmlk|api引入到某些环境中|emh3k|在此环境中运行我们的扩展代码|5issi|断言按钮徽章等于'2‘|46fqj|代码片段如下：|27g64|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"
});|clp4e|现在我们可以把它包进摩卡咖啡里了|9kto5|函数，并从终端运行：|1p6va|$+mocha

background+page
++✓+should+display+opened+tabs+count+in+button+badge

1+passing+(98ms)|c5u74|你可以找到完整的例子|3nmfd|这里|dcc9d|3jnn|此外，sinon-chrome允许使用预定义的响应触发任何chrome事件，例如|8utjv|chrome.tab.onCreated.trigger({url:+'http://google.com'});^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|23|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|24|9|@]|A|@]|B|$]]|$2|E|4|-4|6|7|8|25|9|@]|A|@]|B|$]]|$2|F|4|G|6|7|8|26|9|@]|A|@]|B|$]]|$2|H|4|I|6|7|8|27|9|@]|A|@]|B|$]]|$2|J|4|K|6|7|8|28|9|@]|A|@]|B|$]]|$2|L|4|M|6|7|8|29|9|@]|A|@]|B|$]]|$2|N|4|O|6|7|8|2A|9|@]|A|@]|B|$]]|$2|P|4|Q|6|7|8|2B|9|@]|A|@]|B|$]]|$2|R|4|S|6|7|8|2C|9|@]|A|@]|B|$]]|$2|T|4|U|6|7|8|2D|9|@]|A|@]|B|$]]|$2|V|4|W|6|7|8|2E|9|@]|A|@]|B|$]]|$2|X|4|Y|6|7|8|2F|9|@]|A|@]|B|$]]|$2|Z|4|10|6|7|8|2G|9|@]|A|@]|B|$]]|$2|11|4|12|6|13|8|2H|9|@]|A|@]|B|$14|15]]|$2|16|4|17|6|7|8|2I|9|@]|A|@]|B|$]]|$2|18|4|19|6|7|8|2J|9|@]|A|@]|B|$]]|$2|1A|4|1B|6|7|8|2K|9|@]|A|@]|B|$]]|$2|1C|4|1D|6|7|8|2L|9|@]|A|@]|B|$]]|$2|1E|4|1F|6|7|8|2M|9|@]|A|@]|B|$]]|$2|1G|4|1H|6|7|8|2N|9|@]|A|@]|B|$]]|$2|1I|4|1J|6|7|8|2O|9|@]|A|@]|B|$]]|$2|1K|4|1L|6|7|8|2P|9|@]|A|@]|B|$]]|$2|1M|4|1N|6|13|8|2Q|9|@]|A|@]|B|$14|15]]|$2|1O|4|1P|6|7|8|2R|9|@]|A|@]|B|$]]|$2|1Q|4|1R|6|7|8|2S|9|@]|A|@]|B|$]]|$2|1S|4|1T|6|13|8|2T|9|@]|A|@]|B|$14|15]]|$2|1U|4|1V|6|7|8|2U|9|@]|A|@]|B|$]]|$2|1W|4|1X|6|7|8|2V|9|@]|A|@]|B|$]]|$2|1Y|4|I|6|7|8|2W|9|@]|A|@]|B|$]]|$2|1Z|4|20|6|7|8|2X|9|@]|A|@]|B|$]]|$2|21|4|22|6|13|8|2Y|9|@]|A|@]|B|$14|15]]]]

Working on several chrome extensions I came up with <a href="https://github.com/vitalets/sinon-chrome" rel="noreferrer"><code>sinon-chrome</code></a> project that allows to run unit-tests using <code>mocha</code>, <code>nodejs</code> and <code>phantomjs</code>.

Basically, it creates sinon mocks of all <code>chrome.*</code> API where you can put any predefined json responses.

Next, you load your scripts using node's <code>vm.runInNewContext</code> for background page and <code>phantomjs</code> for render popup / options page.

And finally, you assert that chrome api was called with needed arguments.

Let's take an example: 
Assume we have simple chrome extension that displays number of opened tabs in button badge.

background page:

<pre><code>chrome.tabs.query({}, function(tabs) {
 chrome.browserAction.setBadgeText({text: String(tabs.length)});
});
</code></pre>

To test it we need:

<ol>
<li>mock <code>chrome.tabs.query</code> to return predefined response, e.g. two tabs.</li>
<li>inject our mocked <code>chrome.*</code> api into some environment</li>
<li>run our extension code in this environment</li>
<li>assert that button badge equals to '2'</li>
</ol>

The code snippet is following:

<pre><code>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"
});
</code></pre>

Now we can wrap it into mocha's <code>describe..it</code> functions and run from terminal:

<pre><code>$ mocha

background page
 ✓ should display opened tabs count in button badge

1 passing (98ms)
</code></pre>

You can find full example <a href="https://github.com/acvetkov/sinon-chrome/tree/76cbfc1c64355a94eb29e2de2119449956d6c2e5/example" rel="noreferrer">here</a>.

Additionally, sinon-chrome allows to trigger any chrome event with predefined response, e.g.

<pre><code>chrome.tab.onCreated.trigger({url: 'http://google.com'});
</code></pre>

entityMap|blocks|key|d7b5p|text|而|type|unstyled|depth|inlineStyleRanges|entityRanges|data|8tdb3|似乎工作很好，你也可以只使用普通的茉莉和模拟你需要的Chrome回调。示例：|dme52|模拟|78st5|chrome+=+{
++runtime:+{
++++onMessage+:+{
++++++addListener+:+function()+{}
++++}
++}
}|code-block|syntax|javascript|4ccle|测试|e6bjr|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|dep3u|只需修改默认设置|55gt8|来运行你的代码。^0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|T|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|U|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|V|9|@]|A|@]|B|$]]|$2|G|4|H|6|I|8|W|9|@]|A|@]|B|$J|K]]|$2|L|4|M|6|7|8|X|9|@]|A|@]|B|$]]|$2|N|4|O|6|I|8|Y|9|@]|A|@]|B|$J|K]]|$2|P|4|Q|6|7|8|Z|9|@]|A|@]|B|$]]|$2|R|4|S|6|7|8|10|9|@]|A|@]|B|$]]]]

While <code>sinon.js</code> seems to work great, you can also just use plain Jasmine and mock the Chrome callbacks you need. Example:

<a href="https://github.com/serv-inc/JSGuardian/blob/master/test/src/mockExt.js" rel="nofollow noreferrer">Mock</a>

<pre><code>chrome = {
 runtime: {
 onMessage : {
 addListener : function() {}
 }
 }
}
</code></pre>

<a href="https://github.com/serv-inc/JSGuardian/blob/master/test/spec/LibSpec.js" rel="nofollow noreferrer">Test</a>

<pre><code>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
</code></pre>

Just modify the default <a href="https://github.com/serv-inc/JSGuardian/blob/master/test/SpecRunner.html" rel="nofollow noreferrer"><code>SpecRunner.html</code></a> to run your code.

entityMap|blocks|key|3mrpo|text|我发现我可以使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|7343h|Selenium+web驱动程序|15jtm|用于启动带有预安装扩展的新浏览器实例和|8jej9|pyautogui|6de06|用于点击--因为Selenium不能驱动扩展的“视图”。点击后，你可以制作截图，并将它们与“预期”的截图进行比较，期望95%25的相似性(因为在不同的浏览器上，标记移动到几个像素是可以接受的)。^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|K|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|L|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|M|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|N|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|O|9|@]|A|@]|B|$]]]]

I found that I can use Selenium web driver for starting fresh browser instance with preinstalled extension and <a href="https://github.com/asweigart/pyautogui" rel="nofollow noreferrer">pyautogui</a> for clicks - because Selenium cannot drive "view" of the extension. After clicks you can make screenshots and compare them with 'expected' ones, expecting 95% of similarity (because on different browsers it is acceptable markup movements to a few pixels).

entityMap|blocks|key|bffei|text|为了证实之前的几个答案，Jasmine似乎可以很好地与Chrome扩展一起工作。我使用的是3.4.0版本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|cdjr1|您可以使用|138gu|茉莉间谍|36eme|为各种API轻松创建测试替身。不需要从头开始构建自己的应用程序。例如：|cljrj|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);

++});

});|code-block|syntax|javascript|ffdf|更多细节，如果有帮助的话：|bjkv7|正如在另一个答案中提到的，我创建了一个HTML页面作为运行测试的浏览器扩展的一部分。HTML页面包括Jasmine库、我的扩展的JavaScript代码以及我的测试套件。测试将自动运行，并为您格式化结果。不需要构建测试运行程序或结果格式化程序。只需遵循|fftft|安装说明|4anb2|，并使用那里记录的HTML创建您的测试运行程序页面，并在页面中包含您的测试套件。|fjasr|我不认为您可以从另一个主机动态获取Jasmine框架，所以我只是在我的扩展中包含了Jasmine版本。当然，当我构建用于生产的扩展时，我将省略它以及我的测试用例。|9giva|我还没有研究如何在命令行中执行我的测试。对于自动化部署工具来说，这将是非常方便的。^0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|Z|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|10|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|11|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|12|9|@]|A|@]|B|$]]|$2|I|4|J|6|K|8|13|9|@]|A|@]|B|$L|M]]|$2|N|4|O|6|7|8|14|9|@]|A|@]|B|$]]|$2|P|4|Q|6|7|8|15|9|@]|A|@]|B|$]]|$2|R|4|S|6|7|8|16|9|@]|A|@]|B|$]]|$2|T|4|U|6|7|8|17|9|@]|A|@]|B|$]]|$2|V|4|W|6|7|8|18|9|@]|A|@]|B|$]]|$2|X|4|Y|6|7|8|19|9|@]|A|@]|B|$]]]]

To confirm a couple previous answers, Jasmine seems to work well with Chrome extensions. I'm using version 3.4.0.

You can use <a href="https://jasmine.github.io/api/edge/Spy.html" rel="nofollow noreferrer">Jasmine spies</a> to easily create test doubles for the various APIs. No need to build your own from scratch. For example:

<pre><code>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);

 });

});
</code></pre>

Some more details, if it helps:

As mentioned in another answer, I created an HTML page as part of my browser extension that runs my tests. The HTML page includes the Jasmine library, plus my extension's JavaScript code, plus my test suite. The tests are run automatically and the results are formatted for you. No need to build a test runner or a results formatter. Just follow the <a href="https://github.com/jasmine/jasmine#installation" rel="nofollow noreferrer">installation instructions</a>, and use the HTML documented there to create your test runner page, and include your test suite in the page as well.

I don't think you can fetch the Jasmine framework dynamically from another host, so I just included the Jasmine release in my extension. I will omit it and also my test cases when I build my extension for production, of course.

I haven't looked at how to execute my tests at the command line. That would be handy for automated deployment tools.

entityMap|blocks|key|fcerr|text|要测试端到端，您可以使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|7114f|..。这是我为我的扩展编写的代码片段，用于检查加载的扩展|c6c0s|并验证是否在隐身模式中启用了扩展。|alhu2|​|4p46|const+path+=+require("path");
const+puppeteer+=+require("puppeteer");
const+assert+=+require("assert");
const+Constants+=+require("../contants");
const+Utils+=+require("./util");

const+extensionID+=+Constants.EXTENSION_ID;
const+extensionPath+=+path.join(__dirname,+"../dist");
const+extensionOptionHtml+=+"option.html";
const+extPage+=+`chrome-extension://${extensionID}/${extensionOptionHtml}`;
let+extensionPage+=+null;
let+browser+=+null;

async+function+boot()+{
++browser+=+await+puppeteer.launch({
++++//+slowMo:+250,
++++headless:+false,+//+extension+are+allowed+only+in+head-full+mode
++++args:+[
++++++`--disable-extensions-except=${extensionPath}`,
++++++`--load-extension=${extensionPath}`,
++++++"--no-sandbox",
++++++"--disable-setuid-sandbox"
++++]
++});

++extensionPage+=+await+browser.newPage();
++await+extensionPage.goto(extPage);
}

describe("Extension+UI+Testing",+function()+{
++this.timeout(20000);+//+default+is+2+seconds+and+that+may+not+be+enough+to+boot+browsers+and+pages.
++before(async+function()+{
++++await+boot();
++});

++describe("option+page+home",+async+function()+{
++++it("check+title",+async+function()+{
++++++const+h1+=+"Allow+extension+in+Incognito+Mode";
++++++const+extH1+=+await+extensionPage.evaluate(()+=>
++++++++document.querySelector("h1").textContent.trim()
++++++);
++++++assert.equal(extH1,+h1);
++++});
++++it("show+option+ui+after+enabling+extension+in+incognito",+async+()+=>+{
++++++await+extensionPage.goto(`chrome://extensions/?id=${extensionID}`);
++++++extensionPage.evaluate(()+=>
++++++++document
++++++++++.querySelector("body+>+extensions-manager")
++++++++++.shadowRoot.querySelector("#viewManager+>+extensions-detail-view")
++++++++++.shadowRoot.querySelector("#allow-incognito")
++++++++++.shadowRoot.querySelector("#crToggle")
++++++++++.click()
++++++);
++++++await+Utils.sleep(2000);
++++++await+extensionPage.goto(
++++++++`chrome-extension://${extensionID}/${extensionOptionHtml}`
++++++);
++++++const+h3+=+"Mark+Incognito";
++++++const+headingID+=+`#${Constants.OPTION_SCRIPT_HOST_ID}+>+div+>+div+>+header+>+div+>+h6`;
++++++await+extensionPage.waitFor(headingID);
++++++console.log({+headingID+});
++++++const+extH3+=+await+extensionPage.evaluate(headingID+=>+{
++++++++return+document.querySelector(headingID).textContent.trim();
++++++},+headingID);
++++++console.log({+extH3+});
++++++assert.equal(extH3,+h3);
++++});
++});

++after(async+function()+{
++++await+browser.close();
++});
});|code-block|syntax|javascript|f1cp2^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|O|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|P|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|Q|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|R|9|@]|A|@]|B|$]]|$2|I|4|J|6|K|8|S|9|@]|A|@]|B|$L|M]]|$2|N|4|H|6|7|8|T|9|@]|A|@]|B|$]]]]

To test End-to-End you can use <code>puppeteer</code>.
Here is snippet I wrote for my extension to check loaded extension <code>title</code> and to verify if extension was enabled in incognito mode.
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const path = require("path");
const puppeteer = require("puppeteer");
const assert = require("assert");
const Constants = require("../contants");
const Utils = require("./util");

const extensionID = Constants.EXTENSION_ID;
const extensionPath = path.join(__dirname, "../dist");
const extensionOptionHtml = "option.html";
const extPage = `chrome-extension://${extensionID}/${extensionOptionHtml}`;
let extensionPage = null;
let browser = null;

async function boot() {
 browser = await puppeteer.launch({
 // slowMo: 250,
 headless: false, // extension are allowed only in head-full mode
 args: [
 `--disable-extensions-except=${extensionPath}`,
 `--load-extension=${extensionPath}`,
 "--no-sandbox",
 "--disable-setuid-sandbox"
 ]
 });

 extensionPage = await browser.newPage();
 await extensionPage.goto(extPage);
}

describe("Extension UI Testing", function() {
 this.timeout(20000); // default is 2 seconds and that may not be enough to boot browsers and pages.
 before(async function() {
 await boot();
 });

 describe("option page home", async function() {
 it("check title", async function() {
 const h1 = "Allow extension in Incognito Mode";
 const extH1 = await extensionPage.evaluate(() =&gt;
 document.querySelector("h1").textContent.trim()
 );
 assert.equal(extH1, h1);
 });
 it("show option ui after enabling extension in incognito", async () =&gt; {
 await extensionPage.goto(`chrome://extensions/?id=${extensionID}`);
 extensionPage.evaluate(() =&gt;
 document
 .querySelector("body &gt; extensions-manager")
 .shadowRoot.querySelector("#viewManager &gt; extensions-detail-view")
 .shadowRoot.querySelector("#allow-incognito")
 .shadowRoot.querySelector("#crToggle")
 .click()
 );
 await Utils.sleep(2000);
 await extensionPage.goto(
 `chrome-extension://${extensionID}/${extensionOptionHtml}`
 );
 const h3 = "Mark Incognito";
 const headingID = `#${Constants.OPTION_SCRIPT_HOST_ID} &gt; div &gt; div &gt; header &gt; div &gt; h6`;
 await extensionPage.waitFor(headingID);
 console.log({ headingID });
 const extH3 = await extensionPage.evaluate(headingID =&gt; {
 return document.querySelector(headingID).textContent.trim();
 }, headingID);
 console.log({ extH3 });
 assert.equal(extH3, h3);
 });
 });

 after(async function() {
 await browser.close();
 });
});</code></pre>
</div>
</div>

Is there a good way to do this? I'm writing an extension that interacts with a website as a content script and saves data using localstorage. Are there any tools, frameworks, etc. that I can use to test this behavior? I realize there are some generic tools for testing javascript, but are those sufficiently power to test an extension? Unit testing is most important, but I'm also interested in other types of testing (such as integration testing).

How to test chrome extensions?

单元测试

集成测试

 有什么好方法可以做到这一点吗？我正在编写一个扩展，它作为内容脚本与网站交互，并使用本地存储保存数据。有没有什么工具、框架等可以用来测试这个行为呢？我知道有一些通用的工具来测试javascript，但是这些工具足够强大来测试一个扩展吗？单元测试是最重要的，但我也对其他类型的测试(如集成测试)感兴趣。

问如何测试chrome扩展？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何测试chrome扩展？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何测试chrome扩展？
EN