meteor
स्वीकृति परीक्षण (नाइटवॉच के साथ)

टिप्पणियों

ऐप सरफेस एरिया

यह सबसे बुनियादी स्तर पर है, स्वीकृति परीक्षण अनिवार्य रूप से ब्लैक-बॉक्स परीक्षण है, जो मूल रूप से एक बंद सिस्टम के इनपुट और आउटपुट के परीक्षण से संबंधित है। जैसे, परीक्षण को स्वीकार करने के लिए तीन आवश्यक विशेषताएं हैं: एक संसाधन का पता लगाना, डेटा पढ़ना और डेटा लिखना। जब यह ब्राउज़र और वेबएप की बात आती है, तो ये तीनों विशेषताएं मूल रूप से निम्नलिखित को उबालती हैं:

1. वेबपृष्ठ या एप्लिकेशन दृश्य लोड करें
2. उपयोगकर्ता इंटरफ़ेस तत्वों (यानी DOM) का निरीक्षण करें
3. एक घटना को ट्रिगर / एक उपयोगकर्ता बातचीत अनुकरण

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

module.exports = {
  "Hello World" : function (client) {
    client
      // the location of our Meteor app
      .url("http://localhost:3000")

      // the size of the viewport 
      .resizeWindow(1024, 768)

      // test app output
      .verify.elementPresent('h1')
      .verify.containsText('h1', "Welcome to Meteor!")
      .verify.containsText('p', "You've pressed the button 0 times")
      .verify.elementPresent('button')

      // simulate user input
      .click('button').pause(500)

      // test app output again, to make sure input worked
      .verify.containsText('p', "button 1 times")

      // saving a copy of our viewport pixel grid
      .saveScreenshot('tests/nightwatch/screenshots/homepage.png')
      .end();
  }
};

कस्टम कमांड्स

नाइटवॉच कस्टम कमांड बनाने का समर्थन करता है जो किस्ट्रोक्स, माउस क्लिक और अन्य इनपुट का अनुकरण कर सकता है। एक कस्टम कमांड को अन्य नाइटवॉच कमांड के साथ जंजीर में डाला जा सकता है, जैसे:

module.exports = {
  "Login App" : function (client) {
    client
      .url("http://localhost:3000")
      .login("[email protected]", "janedoe123")
      .end();
  }
};

इसे सक्षम करने के लिए, ./tests/nightwatch/commands/login जैसी कमांड को परिभाषित करें:

exports.command = function(username, password) {

  this
    .verify.elementPresent('#login')

      // we clear the input in case there's any data remaining from previous visits
      .clearValue("#emailInput")
      .clearValue("#passwordInput")

      // we simulate key presses
      .setValue("#emailInput", username)
      .setValue("#passwordInput", password)

    // and we simulate a mouse click
    .click("#signInToAppButton").pause(1000)

  return this; // allows the command to be chained.
};

यह सब काम करने के लिए, आपको अपने लॉगिन पृष्ठ पर id विशेषताओं को जोड़ना होगा। कुछ स्तर पर, इसे मोटे तौर पर निम्नलिखित की तरह देखने की आवश्यकता होगी:

<template name="login">
  <div id="login">
    <input id="emailInput" name="email" type="email" />
    <input id="passwordInput" name="password" type="password" />
    <button id="#signInToAppButton">Sign In</button>
  </div>
</template>

ग्राहक पर उल्का पिंडों का निरीक्षण

चूंकि नाइटवॉच में ब्राउज़र कंसोल तक पहुंच है, इसलिए .execute() API का उपयोग करके क्लाइंट साइड ऑब्जेक्ट्स का निरीक्षण करना संभव है। निम्नलिखित उदाहरण में, हम किसी विशेष सत्र चर के लिए सत्र वस्तु की जाँच कर रहे हैं। सबसे पहले, हम फ़ाइल बनाना शुरू करते हैं ./tests/nightwatch/api/meteor/checkSession , जहां हम निम्नलिखित कमांड रखेंगे:

// syncrhonous version; only works for checking javascript objects on client
exports.command = function(sessionVarName, expectedValue) {
  var client = this;
  this
    .execute(function(data){
      return Session.get(data);
    }, [sessionVarName], function(result){
      client.assert.ok(result.value);
      if(expectedValue){
        client.assert.equal(result.value, expectedValue);
      }
    })
    return this;
};

फिर हम इसे इस तरह से चेन कर सकते हैं:

module.exports = {
  "Check Client Session" : function (client) {
    client
      .url("http://localhost:3000")
      .checkSession("currentUser", "Jane Doe")
      .end();
  }
};

प्रपत्र और इनपुट प्रकार

किसी फ़ाइल को अपलोड करने के लिए, आपको पहले एक / डेटा निर्देशिका बनाने की आवश्यकता होगी, और उस फ़ाइल को जोड़ना होगा जिसे आप अपलोड करना चाहते हैं।

tests/nightwatch/data/IM-0001-1001.dcm

आपके फॉर्म को फ़ाइल के प्रकार के साथ एक इनपुट की आवश्यकता होगी। (कुछ लोग इस इनपुट प्रदान करने वाले स्टाइलिंग विकल्पों को पसंद नहीं करते हैं; और एक सामान्य पैटर्न इस इनपुट को छिपाना है; और पेज पर एक और बटन रखने के लिए इसे उपयोगकर्ता की ओर से क्लिक करें।)

<form id="myform">
    <input type="file" id="fileUpload">
    <input type="text" name="first_name">
    <input type="text" name="last_name">

    <input type="date" name="dob_month">
    <input type="date" name="dob_day">
    <input type="date" name="dob_year">

    <input type="radio" name="gender" value="M">
    <input type="radio" name="gender" value="F">
    <input type="radio" name="gender" value="O">

    <input type="select" name="hs_graduation_year">
    <input type="text" name="city">
    <input type="select" name="state">

    <input type="submit" name="submit" value="Submit">
</form>

तब आपके परीक्षणों को सेटवैल्यू () का उपयोग करने और स्थानीय फ़ाइल परिसंपत्ति के लिए पथ को हल करने की आवश्यकता होगी।

module.exports = {
  "Upload Study" : function (client) {
    console.log(require('path').resolve(__dirname +  '/../data' ));

    var stringArray = "Chicago";

    client
      .url(client.globals.url)
      .verify.elementPresent("form#myform")

      // input[type="file"]
      .verify.elementPresent("input#fileUpload")
      .setValue('input#fileUpload', require('path').resolve(__dirname + '/../data/IM-0001-1001.dcm'))

      // input[type="text"]
      .setValue('input[name="first_name"]', 'First')
      .setValue('input[name="last_name"]', 'Last')

      // input[type="date"]
      .click('select[name="dob_month"] option[value="3"]')
      .click('select[name="dob_day"] option[value="18"]')
      .click('select[name="dob_year"] option[value="1987"]')

      // input[type="radio"]
      .click('input[name="gender"][value="M"]')

      // input[type="number"]
      .click('select[name="hs_graduation_year"] option[value="2002"]')

      // input[type="text"]
      // sometimes Nightwatch will send text faster than the browser can handle
      // which will cause skipping of letters.  In such cases, we need to slow
      // Nightwatch down; which we do by splitting our input into an array
      // and adding short 50ms pauses between each letter
      for(var i=0; i < userIdArray.length; i++) {
        client.setValue('input[name="city"]', stringArray[i]).pause(50)
      }

      // input[type="select"]
      // after an array input above, we need to resume our method chain...
      client.click('select[name="state"] option[value="CA"]')

      // input[type="number"]
      .setValue('input[name="zip"]', '01234')

      //input [ type="submit" ]
      .click('button[type="submit"]')
      .end();
  }
};

इस उदाहरण में सबसे ऊपर होने के लिए डैनियल रेनहार्ट को श्रेय।

अवयव और पृष्ठ वस्तुएँ

पृष्ठ ऑब्जेक्ट कस्टम कमांड के समान हैं; सिवाय वे कस्टम कमांड के संग्रह हैं जो एक विशिष्ट यूआई घटक के साथ जुड़े हुए हैं। यह आधुनिक घटक आधारित डिजाइन के साथ बहुत अच्छी तरह से काम करता है, जैसे कि रिएक्ट में।

module.exports = {
  url: 'http://localhost:3000/login',
  commands: [{
  login: function(email, password) {
    return this
      .clearValue('input[name="emailAddress"]')
      .clearValue('input[name="password"]')

      .setValue('input[name="emailAddress"]', email)
      .setValue('input[name="password"]', password)

      .verify.elementPresent('#loginButton')
      .click("#loginButton");
  },
  clear: function() {
    return this
      .waitForElementVisible('@emailInput')
      .clearValue('@emailInput')
      .clearValue('@passInput')
      .waitForElementVisible('@loginButton')
      .click('@loginButton')
  },
  checkElementsRendered: function(){
    return this
      .verify.elementPresent("#loginPage")
      .verify.elementPresent('input[name="emailAddress"]')
      .verify.elementPresent('input[name="password"]')
  },
  pause: function(time, client) {
    client.pause(time);
    return this;
  },
  saveScreenshot: function(path, client){
    client.saveScreenshot(path);
    return this;
  }
}],
  elements: {
    emailInput: {
      selector: 'input[name=email]'
    },
    passInput: {
      selector: 'input[name=password]'
    },
    loginButton: {
      selector: 'button[type=submit]'
    }
  }
};

परीक्षण घटकों में पेजऑबजेक्ट पैटर्न का उपयोग करने के साथ एकमात्र कैवेट है, यह है कि कार्यान्वयन उस पद्धति को तोड़ता है जो मूल verify.elementPresent करता है। इसके बजाय, आपको पेज ऑब्जेक्ट को एक वैरिएबल पर असाइन करना होगा, और प्रत्येक पेज के लिए एक नई विधि श्रृंखला को तत्काल करना होगा। कोड के पुन: उपयोग के लिए एक सुसंगत और विश्वसनीय पैटर्न के लिए भुगतान करने के लिए एक उचित मूल्य।

module.exports = {
  tags: ['accounts', 'passwords', 'users', 'entry'],
  'User can sign up.': function (client) {

    const signupPage = client.page.signupPage();
    const indexPage = client.page.indexPage();

    client.page.signupPage()
      .navigate()
      .checkElementsRendered()
      .signup('Alice', 'Doe', '[email protected]', 'alicedoe')
      .pause(1500, client);

    indexPage.expect.element('#indexPage').to.be.present;
    indexPage.expect.element('#authenticatedUsername').text.to.contain('Alice Doe');
  },
}