क्रोम एक्सटेंशन का परीक्षण कैसे करें?


154

क्या ऐसा करने का कोई अच्छा तरीका है? मैं एक एक्सटेंशन लिख रहा हूं जो एक वेबसाइट के साथ एक सामग्री स्क्रिप्ट के रूप में बातचीत करता है और स्थानीयस्टोरेज का उपयोग करके डेटा बचाता है। क्या कोई उपकरण, रूपरेखा आदि हैं, जिनका उपयोग मैं इस व्यवहार का परीक्षण करने के लिए कर सकता हूं? मुझे लगता है कि जावास्क्रिप्ट का परीक्षण करने के लिए कुछ सामान्य उपकरण हैं, लेकिन क्या वे विस्तार का परीक्षण करने के लिए पर्याप्त शक्ति हैं? यूनिट परीक्षण सबसे महत्वपूर्ण है, लेकिन मुझे अन्य प्रकार के परीक्षण (जैसे एकीकरण परीक्षण) में भी दिलचस्पी है।


8
मैंने सिर्फ एक कैनोनिकल उत्तर लिखा है, जो क्रोम नहीं, बल्कि सभी ब्राउज़रों के लिए ब्राउज़र एक्सटेंशन के लिए यूनिट परीक्षण और एकीकरण परीक्षण को संबोधित करता है । "ब्राउज़र एक्सटेंशन का परीक्षण करना" का उत्तर देखें ।
डब्ल्यू पर रोब डब्ल्यू

जवाबों:


111

हाँ, मौजूदा चौखटे बहुत उपयोगी हैं ..

हाल के दिनों में, मैंने अपने सभी परीक्षणों को एक "परीक्षण" पृष्ठ पर रखा है जो कि आवेदन में एम्बेडेड था लेकिन जब तक भौतिक रूप से टाइप नहीं किया गया तब तक पहुंचने योग्य नहीं था।

उदाहरण के लिए, मेरे पास एक पृष्ठ में सभी परीक्षण सुलभ होंगे chrome-extension://asdasdasdasdad/unittests.html

परीक्षण की पहुंच localStorageआदि के लिए सामग्री लिपियों तक पहुँचने के लिए होगा , सिद्धांत रूप में आप परीक्षण कर सकते हैं कि आपके परीक्षण पृष्ठ में एम्बेडेड IFRAME के ​​माध्यम से, हालांकि ये अधिक एकीकरण स्तर के परीक्षण हैं, इकाई परीक्षण आपको वास्तविक पृष्ठों से दूर रहने के लिए सार की आवश्यकता होगी ताकि आप उन पर निर्भर न हों, इसी तरह लोकलस्टोरेज तक पहुंचना।

यदि आप सीधे पृष्ठों का परीक्षण करना चाहते हैं, तो आप नए टैब खोलने के लिए अपने एक्सटेंशन को ऑर्केस्ट्रेट कर सकते हैं (chrome.tab.create ({"url": "someurl"})। प्रत्येक नए टैब के लिए आपकी सामग्री स्क्रिप्ट चलनी चाहिए और आप इसका उपयोग कर सकते हैं। आपके परीक्षण ढांचे ने यह जांचने के लिए कि आपके कोड ने क्या किया है।

चौखटे के रूप में, JsUnit या अधिक हालिया जैस्मीन ठीक काम करना चाहिए।


1
आप सही हैं, वास्तविक पृष्ठों का परीक्षण इकाई परीक्षण के अंतर्गत नहीं आता है। मुझे अपने प्रश्न को और व्यापक बनाना चाहिए था। लेकिन यह अभी भी कुछ मैं परीक्षण करना चाहते हैं, खासकर जब से वेबसाइट HTML संरचना किसी भी समय बदल सकती है। मैंने प्रश्न को संशोधित किया है।
दलदल

1
मैं आपके यूनिट टेस्ट पेज में IFrames के माध्यम से परीक्षण करूंगा। सामग्री स्क्रिप्ट अभी भी आग होनी चाहिए (यदि आप स्क्रिप्ट को iFrame में चलाने के लिए सक्षम करते हैं)
किनलन

3
प्रॉक्सी सैंपल एक्सटेंशन में कुछ परीक्षण होते हैं जो बस क्रोम एपीआई के बिट्स और टुकड़ों का मज़ाक उड़ाते हैं जो कि आवश्यक थे: code.google.com/chrome/extensions/samples.html#chrome.proxy .. इसके अलावा हमारे सहयोगी बोरिस ने परीक्षण के लिए Qunit का उपयोग किया था उसकी "मॉडल" परत: github.com/borismus/Question-Monitor-for-Stack-Exchange/tree/…
पॉल आयरिश

63

कई क्रोम एक्सटेंशन पर काम करते हुए मैं sinon-chromeप्रोजेक्ट के साथ आया, जो यूनिट-टेस्ट का उपयोग करने की अनुमति देता है mocha, nodejsऔर phantomjs

मूल रूप से, यह सभी chrome.*एपीआई के साइनॉन मोक्स बनाता है जहां आप किसी भी पूर्वनिर्धारित जसन प्रतिक्रियाओं को डाल सकते हैं।

अगला, आप अपनी स्क्रिप्ट को नोड के vm.runInNewContextबैकग्राउंड पेज के लिए और phantomjsपॉपअप / विकल्प पेज को रेंडर करने के लिए लोड करते हैं ।

और अंत में, आप दावा करते हैं कि क्रोम एप को आवश्यक तर्कों के साथ बुलाया गया था।

एक उदाहरण लेते हैं:
मान लें कि हमारे पास सरल क्रोम एक्सटेंशन है जो बटन बैज में खुले टैब की संख्या प्रदर्शित करता है।

पृष्ठभूमि पृष्ठ:

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

इसका परीक्षण करने के लिए हमें इसकी आवश्यकता है:

  1. chrome.tabs.queryपूर्वनिर्धारित प्रतिक्रिया, जैसे दो टैब वापस करने के लिए नकली ।
  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"
});

अब हम इसे मोचा के describe..itकार्यों में लपेट सकते हैं और टर्मिनल से चला सकते हैं:

$ mocha

background page
  ✓ should display opened tabs count in button badge

1 passing (98ms)

आप यहां पूरा उदाहरण पा सकते हैं ।

इसके अतिरिक्त, सिनोन-क्रोम किसी भी क्रोम घटना को पूर्वनिर्धारित प्रतिक्रिया के साथ ट्रिगर करने की अनुमति देता है, उदा

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

उदाहरण के लिए लिंक मृत प्रतीत होता है - क्या आप कृपया इसे अपडेट कर सकते हैं?
रायसेन

1
उदाहरण के लिए अद्यतन लिंक। इसके अलावा सिनोन-क्रोम अब में ले जाया जाता github.com/acvetkov जल्द ही और नए उदाहरण होगा
Vitalets

3

जब sinon.jsयह बहुत अच्छा काम करने लगता है, तो आप केवल सादे जैस्मीन का उपयोग कर सकते हैं और क्रोम कॉलबैक का उपयोग कर सकते हैं, जिसकी आपको आवश्यकता है। उदाहरण:

दिखावटी

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अपना कोड चलाने के लिए डिफ़ॉल्ट को संशोधित करें ।


2

Chrome में पहले से मौजूद टूल के बारे में:

  1. क्रोम डेवलपर टूल में, रिसोर्स फ़ॉर लोकल स्टोरेज के लिए सेक्शन है।

    डेवलपर उपकरण> संसाधन> स्थानीय संग्रहण

    वहां स्थानीय इलाकों के बदलाव देखें।

  2. आप प्रदर्शन का परीक्षण करने और रन टाइम कॉल स्टैक देखने के लिए कंसोल.प्रोफाइल का उपयोग कर सकते हैं।

  3. फ़ाइलसिस्टम के लिए आप इस URL का उपयोग अपनी फ़ाइल अपलोड-एड या नहीं करने के लिए कर सकते हैं: filesystem: chrome-extension: ////

यदि आप पृष्ठभूमि पृष्ठ / स्क्रिप्ट के बिना सामग्री स्क्रिप्ट और स्थानीय-संग्रहण का उपयोग कर रहे हैं और संदेश पास किए बिना, स्थानीय-भंडारण केवल उस साइट से सुलभ होगा। इसलिए, उन पृष्ठों का परीक्षण करने के लिए, आपको अपनी परीक्षा की स्क्रिप्ट को उन टैब में इंजेक्ट करना होगा।


1
मेरे लिए काम नहीं किया, लेकिन यह मुझे मेरी जावास्क्रिप्ट में आगे मिला। उसके लिए +1।
mobibob

फाइलसिस्टम के लिए आप उपयोग कर सकते हैं: फाइल सिस्टम: क्रोम-एक्सटेंशन: // <yourextension-id> / अस्थाई /
नफीस अहमद

1

मैंने पाया कि मैं पहले से इंस्टॉल किए गए एक्सटेंशन और क्लिक के लिए pyautogui के साथ नया ब्राउज़र इंस्टेंस शुरू करने के लिए सेलेनियम वेब ड्राइवर का उपयोग कर सकता हूं - क्योंकि सेलेनियम एक्सटेंशन के "दृश्य" को ड्राइव नहीं कर सकता है। क्लिक करने के बाद आप स्क्रीनशॉट बना सकते हैं और उनकी तुलना 'अपेक्षित' लोगों से कर सकते हैं, 95% समानता की उम्मीद कर सकते हैं (क्योंकि विभिन्न ब्राउज़रों पर यह कुछ पिक्सल के लिए स्वीकार्य मार्कअप मूवमेंट है)।


0

पिछले कुछ उत्तरों की पुष्टि करने के लिए, जैस्मीन क्रोम एक्सटेंशन के साथ अच्छी तरह से काम करती है। मैं 3.4.0 संस्करण का उपयोग कर रहा हूं।

आप विभिन्न एपीआई के लिए आसानी से टेस्ट डबल्स बनाने के लिए जैस्मीन जासूसों का उपयोग कर सकते हैं । खरोंच से अपना निर्माण करने की आवश्यकता नहीं है। उदाहरण के लिए:

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 पेज में जैस्मीन लाइब्रेरी, मेरे एक्सटेंशन का जावास्क्रिप्ट कोड, प्लस मेरा टेस्ट सूट शामिल है। परीक्षण स्वचालित रूप से चलाए जाते हैं और परिणाम आपके लिए स्वरूपित होते हैं। टेस्ट रनर या रिजल्ट फॉर्मेटर बनाने की जरूरत नहीं। बस इंस्टॉलेशन निर्देशों का पालन करें , और अपने टेस्ट रनर पेज को बनाने के लिए HTML डॉक्यूमेंट का उपयोग करें, और पेज में अपने टेस्ट सूट को भी शामिल करें।

मुझे नहीं लगता कि आप जैस्मीन ढांचे को किसी अन्य होस्ट से गतिशील रूप से प्राप्त कर सकते हैं, इसलिए मैंने सिर्फ अपने विस्तार में जैस्मीन रिलीज को शामिल किया। मैं इसे और मेरे परीक्षण के मामलों को भी छोड़ दूंगा, जब मैं उत्पादन के लिए अपने विस्तार का निर्माण करता हूं, तो निश्चित रूप से।

मैंने कमांड लाइन पर अपने परीक्षणों को निष्पादित करने के तरीके को नहीं देखा है। यह स्वचालित तैनाती उपकरणों के लिए उपयोगी होगा।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.