فرنٹ اینڈ ٹیسٹنگ کا تعارف

Sep 12, 2025

کيسے

صفحہ 1 کا 2:

فرنٹ اینڈ ٹیسٹ کے مختلف اقسام (اور ان کا استعمال کرنے کے لئے)

فرنٹ اینڈ ٹیسٹ کے مختلف اقسام (اور ان کا استعمال کرنے کے لئے)
ایک ٹیسٹنگ ثقافت کو اپنانے اور نافذ کرنا

فرنٹ اینڈ کوڈ کی جانچ اب بھی بہت سے ڈویلپرز کے لئے ایک الجھن عمل ہے. لیکن فرنٹ اینڈ کی ترقی کے ساتھ زیادہ پیچیدہ اور استحکام اور استحکام کے لئے ذمہ دار ڈویلپرز کے ساتھ کبھی بھی اس سے پہلے کبھی نہیں، فرنٹ اینڈ کی جانچ آپ کے کوڈ بیس کے اندر ایک برابر شہری کے طور پر قبول کیا جانا چاہئے. ہم آپ کے مختلف ٹیسٹنگ کے اختیارات کو توڑ دیتے ہیں اور وضاحت کرتے ہیں کہ وہ کیا حالات کے لئے بہترین استعمال کرتے ہیں.

فرنٹ اینڈ ٹیسٹنگ ایک کمبل اصطلاح ہے جو مختلف قسم کے خود کار طریقے سے جانچ کی حکمت عملی پر مشتمل ہے. ان میں سے کچھ، یونٹ اور انضمام کی جانچ کی طرح، پچھلے اینڈ ڈویلپمنٹ کمیونٹی کے اندر سالوں کے لئے ایک قبول شدہ بہترین عمل کیا گیا ہے. دیگر حکمت عملی نئے ہیں، اور اس میں تبدیلیوں سے اس بات کا یقین ہے کہ اب بیک اپ اینڈ اور فرنٹ اینڈ کی ترقی اب کے لئے استعمال کیا جاتا ہے.

اس آرٹیکل کے اختتام تک، آپ کو آرام دہ اور پرسکون اندازہ لگانے کا احساس ہونا چاہئے کہ آپ کی ٹیم اور کوڈ بیسز کے ساتھ بہترین حکمت عملی کی حکمت عملی کی حکمت عملی. مندرجہ ذیل کوڈ مثال جیسمین فریم ورک کا استعمال کرتے ہوئے لکھا جائے گا، لیکن قواعد و ضوابط سب سے زیادہ ٹیسٹنگ فریم ورک میں اسی طرح کی ہیں.

صارف کی جانچ سافٹ ویئر کے بہترین ٹکڑے ٹکڑے

01. یونٹ ٹیسٹنگ

یونٹ ٹیسٹنگ، ٹیسٹنگ سابق فوجیوں میں سے ایک، تمام جانچ کی اقسام کی سب سے کم سطح پر ہے. اس کا مقصد یہ ہے کہ آپ کے کوڈ کے سب سے چھوٹی بٹس (یونٹس نامی) کی توقع کی جاسکتی ہے.

تصور کریں کہ آپ کے گھر کے لئے ایک لیگو سیٹ ہے. عمارت شروع کرنے سے پہلے، آپ اس بات کو یقینی بنانا چاہتے ہیں کہ ہر فرد کا ٹکڑا حساب کیا جاتا ہے (پانچ سرخ چوکوں، تین پیلے رنگ کے آئتاکار). یونٹ ٹیسٹنگ اس بات کا یقین کر رہا ہے کہ کوڈ کے انفرادی سیٹ - ان پٹ کی توثیق اور حساب کی طرح چیزیں - بڑی خصوصیت کی تعمیر سے پہلے کام کر رہے ہیں.

یہ 'ایک چیز اچھی طرح' منتر کے ساتھ ٹینڈم میں یونٹ ٹیسٹ کے بارے میں سوچنے میں مدد ملتی ہے. اگر آپ کے پاس ایک ذمہ داری کے ساتھ کوڈ کا ایک ٹکڑا ہے، تو آپ اس کے لئے ایک یونٹ ٹیسٹ لکھنا چاہتے ہیں.

چلو مندرجہ ذیل کوڈ کا ٹکڑا دیکھتے ہیں، جس میں ہم ایک سادہ کیلکولیٹر کے لئے ایک یونٹ ٹیسٹ لکھ رہے ہیں:

 بیان کریں ("کیلکولیٹر آپریشنز"، فنکشن () {
  یہ ("دو نمبروں کو شامل کرنا چاہئے"، فنکشن () {
    کیلکولیٹر .init ()؛
    var نتیجہ = کیلکولیٹر .آپ (7،3)؛
    توقع (نتیجہ) .توبی (10)؛
  })؛
})؛

ہمارے میں کیلکولیٹر درخواست، ہم اس بات کو یقینی بنانا چاہتے ہیں کہ حسابات ہمیشہ آزادانہ طور پر کام کرتے ہیں جو ہم توقع کرتے ہیں. مثال کے طور پر، ہم اس بات کو یقینی بنانا چاہتے ہیں کہ ہم ہمیشہ ایک دوسرے کے ساتھ دو نمبروں کو درست طریقے سے شامل کر سکیں.

ہم جو کچھ کرتے ہیں وہ ٹیسٹ کی سیریز بیان کرتے ہیں جو ہم جیسمین کے استعمال سے چلتے ہیں بیان . یہ ایک ٹیسٹ سوٹ تخلیق کرتا ہے - درخواست کے ایک مخصوص علاقے سے متعلق ٹیسٹ کا ایک گروہ. ہمارے کیلکولیٹر کے لئے، ہم اس کے اپنے سوٹ میں ہر حساب کی جانچ کریں گے.

سوئٹ صرف کوڈ تنظیم کے لئے نہیں ہیں، لیکن کیونکہ وہ آپ کو اپنے آپ کو سوٹ چلانے کے قابل بناتے ہیں. اگر آپ ایک درخواست کے لئے ایک نئی خصوصیت پر کام کررہے ہیں، تو آپ فعال ترقی کے دوران ہر ٹیسٹ نہیں چلانا چاہتے ہیں، کیونکہ یہ بہت وقت لگ رہا ہے. ٹیسٹنگ سوٹ انفرادی طور پر آپ کو زیادہ تیزی سے تیار کرنے کی اجازت دیتا ہے.

اگلا، ہم اپنے حقیقی ٹیسٹ لکھتے ہیں. کا استعمال کرتے ہوئے یہ فنکشن، ہم اس خصوصیت یا فعالیت کا ٹکڑا لکھتے ہیں جو ہم جانچ کر رہے ہیں. ہمارے مثال کے طور پر اس کے علاوہ کام کی جانچ پڑتال کی جاتی ہے، لہذا ہم اس منظر کو چلائیں گے جو اس بات کی تصدیق کرتے ہیں کہ یہ صحیح طریقے سے کام کر رہا ہے.

ہم پھر ہمارے ٹیسٹ کا دعوی لکھتے ہیں، جس میں ہم آزمائش کرتے ہیں کہ اگر ہم توقع کرتے ہیں تو ہمارا کوڈ کام کرتا ہے. ہم اپنے کیلکولیٹر کو شروع کرتے ہیں، اور ہماری چلاتے ہیں addnumbers ہم دو نمبروں کے ساتھ کام کرتے ہیں جو ہم شامل کرنا چاہتے ہیں. ہم اس نمبر کو اس کے نتیجے میں ذخیرہ کرتے ہیں، اور پھر اس بات کا یقین کرتے ہیں کہ ہم اس نمبر کے برابر ہیں جو ہم توقع کرتے ہیں (ہمارے معاملے میں، 10).

اگر addnumbers صحیح اعداد و شمار کو واپس کرنے میں ناکام ہے، ہمارا ٹیسٹ ناکام ہو جائے گا. ہم اپنے دوسرے حسابات کے لئے اسی طرح کے ٹیسٹ لکھیں گے - ذلت، ضرب، اور اسی طرح.

02. قبولیت ٹیسٹ

اگر یونٹ ٹیسٹ ہر لیگو ٹکڑا کی جانچ پڑتال کی طرح ہیں تو، قبولیت کے ٹیسٹ چیک کر رہے ہیں اگر عمارت کے ہر مرحلے کو مکمل کیا جاسکتا ہے. صرف اس وجہ سے کہ تمام ٹکڑوں کے لئے حساب کیا جاتا ہے اس کا مطلب یہ نہیں ہے کہ ہدایات مناسب طریقے سے قابل عمل ہیں اور آپ کو حتمی ماڈل بنانے کی اجازت دے گی.

قبولیت کے ٹیسٹ آپ کے چلانے کی درخواست کے ذریعے جاتے ہیں اور نامزد کردہ اعمال کو یقینی بناتے ہیں، صارف کے آدانوں اور صارف بہاؤ تکمیل اور کام کرتے ہیں.

صرف ہماری درخواست کی وجہ سے addnumbers فنکشن صحیح نمبر کو واپس دیتا ہے، اس کا مطلب یہ نہیں ہے کہ کیلکولیٹر انٹرفیس یقینی طور پر صحیح نتیجہ دینے کے لئے متوقع طور پر کام کرے گا. کیا اگر ہمارے بٹن غیر فعال ہیں، یا حساب کا نتیجہ ظاہر نہیں ہوتا ہے؟ قبولیت ٹیسٹ ہمیں ان سوالات کا جواب دینے میں مدد کرتی ہیں.

 بیان کریں ("سائن اپ ناکامی ریاست"، فنکشن () {
  یہ ("غلط معلومات کے ساتھ سائن اپ کی اجازت نہیں دینا چاہئے"، فنکشن () {
    وار پیج = ملاحظہ کریں ("/ گھر")؛
    Page.Fall_in ("ان پٹ [نام = 'ای میل']"، "ایک ای میل نہیں")؛
    Page.Click ("بٹن [قسم = جمع کرائیں]")؛
    Page.Click ("بٹن [قسم = جمع کرائیں]")؛
    توقع ہے (Page.find ("# دستخط"). Hasclass ("پوشیدہ"). tobefalsy ()؛
  })؛
})؛

ڈھانچہ ہمارے یونٹ ٹیسٹ کی طرح بہت ملتی ہے: ہم اس کے ساتھ ایک سوٹ کی وضاحت کرتے ہیں بیان پھر اس کے اندر ہمارے ٹیسٹ لکھیں یہ تقریب، پھر کچھ کوڈ پر عملدرآمد اور اس کا نتیجہ چیک کریں.

تاہم، خاص افعال اور اقدار کے ارد گرد جانچ کرنے کے بجائے، یہاں تک کہ ہم یہ دیکھ رہے ہیں کہ ایک خاص کام کے بہاؤ (ایک سائن اپ کے بہاؤ) کی توقع کی جاتی ہے جب ہم کچھ خراب معلومات بھریں. یہاں زیادہ منٹ کے کام موجود ہیں، جیسے فارم کی توثیق جو یونٹ کا تجربہ ہوسکتا ہے، اس کے ساتھ ساتھ ہماری غلطی ریاست کو ظاہر کرنے کے لئے کسی بھی ہینڈلنگ، ID کے ساتھ ایک عنصر کی طرف سے مظاہرہ کیا ہے. دستخط .

قبول کرنے کے ٹیسٹ کو یقینی بنانے کے لئے ایک بہت اچھا طریقہ ہے کہ اہم تجربے کے بہاؤ ہمیشہ صحیح طریقے سے کام کر رہے ہیں. کنارے کے معاملات کے ارد گرد ٹیسٹ شامل کرنے کے لئے بھی آسان ہے، اور آپ کے QA ٹیموں کو آپ کی درخواست میں ان کی مدد کرنے میں مدد ملتی ہے.

جب اس بات پر غور کیا جاسکتا ہے کہ آپ کے صارف کی کہانیاں شروع کرنے کے لئے ایک عظیم جگہ ہیں. آپ کا صارف آپ کی ویب سائٹ سے کیسے بات کرتا ہے، اور اس بات چیت کا متوقع نتیجہ کیا ہے؟ یہ یونٹ کی جانچ کے لئے مختلف ہے، جو کام کی ضروریات کی طرح کچھ چیزوں کو بہتر بناتا ہے، جیسے جائز فیلڈ کے ارد گرد کی ضروریات.

03. بصری ریگریشن ٹیسٹنگ

جیسا کہ تعارف میں ذکر کیا گیا ہے، کچھ قسم کی جانچ فرنٹ اینڈ دنیا کے لئے منفرد ہیں. ان میں سے سب سے پہلے بصری ریگریشن کی جانچ ہے. یہ آپ کے کوڈ کی جانچ نہیں کرتا ہے، بلکہ آپ کے کوڈ کے فراہم کردہ نتیجہ کا موازنہ کرتا ہے - آپ کے انٹرفیس - آپ کی درخواست کے فراہم کردہ ورژن کے ساتھ پیداوار، سٹینج، یا پہلے سے تبدیل شدہ مقامی ماحول میں.

یہ عام طور پر ایک ہیڈر براؤزر کے اندر لے جانے والے اسکرین شاٹس موازنہ کرکے کیا جاتا ہے (سرور پر چلتا ہے ایک براؤزر). تصویری موازنہ کے اوزار، پھر دو شاٹس کے درمیان کسی بھی اختلافات کا پتہ لگائیں.

ایک آلے کا استعمال کرتے ہوئے جیسے Phantomcs، آپ کے ٹیسٹ کی وضاحت کی جاتی ہے کہ ٹیسٹ رنر کو کس طرح نیویگیشن کرنا چاہئے، ایک اسکرین شاٹ لے جانا چاہئے، اور فریم ورک آپ کو اختلافات سے ظاہر ہوتا ہے کہ ان خیالات میں آیا.

 Casper.Start ("/ گھر"). پھر (فنکشن () {

  // فارم کی ابتدائی حالت
  phantomcss.screenshot ("# سائن اپ"، "سائن اپ فارم")؛

  // سائن اپ بٹن کو مار ڈالو (غلطی کو ٹرگر کرنا چاہئے)
  Casper.Click ("بٹن # سائن اپ")؛

  // UI اجزاء کی ایک اسکرین شاٹ لے لو
  Phantomcss.Screenshot ("# سائن اپ"، "سائن اپ فارم غلطی")؛

  // نام صفات اور AMP کی طرف سے فارم میں بھریں؛ جمع کرائیں
  Casper.Fill ("# دستخط"، {
    نام: "الیکیا Sedlock"،
    ای میل: "[email protected]"
  }، سچ)؛

  // کامیابی کی ایک دوسری اسکرین شاٹ لے لو
 Phantomcss.Screenshot ("# سائن اپ"، "سائن اپ فارم کامیابی")؛
})؛

This visual regression framework illustrates decision trees in your application, exposing complexity to those outside of development — یہ بصری ریگریشن فریم ورک آپ کی درخواست میں فیصلہ کے درختوں کی وضاحت کرتا ہے، ترقی کے باہر ان لوگوں کو پیچیدگی کو بے نقاب کرتی ہے

قبولیت اور یونٹ کی جانچ کے برعکس، بصری رجعت کی جانچ سے فائدہ اٹھانا مشکل ہے اگر آپ کسی چیز کی تعمیر کر رہے ہیں. جیسا کہ آپ کے UI فعال ترقی کے دوران تیزی سے اور سختی تبدیلیاں دیکھیں گے، آپ ان امتحانوں کو بچاؤ گے جب انٹرفیس کے ٹکڑے ٹکڑے ہوتے ہیں تو آپ کو نظر انداز کر دیا جاتا ہے. لہذا، بصری ریگریشن ٹیسٹ آپ کو لکھنے کے آخری ٹیسٹ ہیں.

فی الحال، بہت سے بصری رجعت کے اوزار تھوڑا سا دستی کوشش کی ضرورت ہوتی ہے. آپ اپنی شاخ پر ترقی شروع کرنے سے پہلے آپ کو اسکرین شاٹ کی گرفتاری کو چلانے کے لۓ، یا دستی طور پر بیس لائن اسکرین شاٹس کو دستی طور پر اپ ڈیٹ کریں کیونکہ آپ انٹرفیس میں تبدیلی کرتے ہیں.

یہ صرف ترقی کی نوعیت کی وجہ سے ہے - تبدیلیاں UI. جان بوجھ کر ہوسکتا ہے، لیکن ٹیسٹ صرف یہ جانتا ہے کہ ہاں، یہ وہی ہے 'یا' نہیں، یہ مختلف ہے '. تاہم، اگر بصری رجعت آپ کی درخواست کے اندر درد کے نقطہ نظر ہیں، تو یہ نقطہ نظر آپ کی ٹیم کا وقت اور کوشش مجموعی طور پر ریگریشنوں کو حل کرنے کے مقابلے میں محفوظ رکھتا ہے.

04. رسائی اور کارکردگی کی جانچ

جیسا کہ فرنٹ اینڈ کی جانچ کے ارد گرد ثقافت اور شعور کے طور پر، لہذا ماحولیاتی نظام کے مختلف پہلوؤں کی جانچ کرنے کی ہماری صلاحیت ہے. بڑھتی ہوئی توجہ پر رسائی اور ہماری تکنیکی ثقافت میں کارکردگی، آپ کے ٹیسٹنگ سوٹ میں ضم کرنے میں مدد ملتی ہے کہ یہ تصورات ایک ترجیح برقرار رہیں.

اگر آپ کو کارکردگی کا بجٹ یا رسائی کے معیار کو نافذ کرنے کے مسائل موجود ہیں، تو یہ ان ضروریات کو لوگوں کے ذہنوں میں سب سے آگے رکھنے کا ایک طریقہ ہے.

ان دونوں چیکوں کو یا تو آپ کے کام کے بہاؤ میں ان کے ٹرمینل کے اندر اندر گرڈ اور گلپ، یا نیم دستی طور پر تعمیر کے آلات کے ساتھ ضم کیا جا سکتا ہے. کارکردگی کے بجٹ کے لئے، Grunt-perfbudget کی طرح ایک آلہ آپ کو ایک مخصوص کام کے اندر خود بخود ویب پیگیٹیسٹ کے ذریعہ اپنی سائٹ کو چلانے کی صلاحیت دیتا ہے.

تاہم، اگر آپ کسی ٹاسک رنر کا استعمال نہیں کررہے ہیں تو، آپ کو ایک اسٹینڈل این پی ایم ماڈیول کے طور پر مکمل طور پر قبضہ کر سکتے ہیں اور دستی طور پر ٹیسٹ چلاتے ہیں.

یہاں یہ ہے کہ یہ ٹرمینل کے ذریعہ اسے چلانے کی طرح ایسا لگتا ہے.

 Perfbuduget - لوڈ http://www.aliiciability.com - ویب سائٹ [WebPagetest API کلید] - Speedindex 2000 - Repende 400

اور اسی طرح، گرنٹ کے ذریعے قائم

perfbuduget: {
  پہلے سے طے شدہ: {
    اختیارات: {
      یو آر ایل: 'http://aliciability.com'،
      کلیدی: 'ویب پیجیسٹیسٹ اپی کلید'،
      بجٹ: {
        Speedindex: '2000'،
        رینڈر: '400'
      }
    }
  }
}

[...]

grunt.registerk ('پہلے سے طے شدہ'، ['jshint'، 'perfbuduget'])؛

اسی اختیارات تک رسائی کی جانچ کے لئے دستیاب ہیں. تو PA11Y کے لئے، آپ یا تو چل سکتے ہیں pa11y. پیداوار کے لئے آپ کے براؤزر میں کمانڈ یا اس مرحلے کو خود کار طریقے سے ایک کام قائم کریں. ٹرمینل میں:

 pa11y aliciability.com.

// این پی ایم انسٹال کے بعد جاوا اسکرپٹ کمانڈ کے طور پر

var pa11y = کی ضرورت ہے ('PA11Y')؛ // PA11Y کی ضرورت ہے
وار ٹیسٹ = PA11Y ()؛ // سیٹ کرنے کے لئے PA11Y تیار کریں

test.run ('aliciability.com'، فنکشن (غلطی، نتائج) {
  // ہمارے نتائج کو اپنے نتائج کو لاگو کریں
})؛

ان اقسام میں زیادہ سے زیادہ اوزار کافی پلگ اور کھیل ہیں، لیکن آپ کو اپنی مرضی کے مطابق کرنے کا اختیار بھی فراہم کرتا ہے کہ ٹیسٹ کس طرح چلتی ہے - مثال کے طور پر، آپ انہیں مخصوص WCAG معیار کو نظر انداز کرنے کے لئے مقرر کر سکتے ہیں.

Resemble.js is a popular image comparison library, and gives you a lot of control over what triggers a visual differentiation — جیسے جیسے ایک مقبول تصویر موازنہ لائبریری ہے، اور آپ کو بصری تنازعہ کیا ہے اس پر آپ کو بہت زیادہ کنٹرول فراہم کرتا ہے

اگلا صفحہ: آپ کے کام کے بہاؤ میں ٹیسٹ کیسے متعارف کرایا جائے

موجودہ صفحہ: فرنٹ اینڈ ٹیسٹ کے مختلف اقسام (اور ان کا استعمال کرنے کے لئے)

اگلا صفحہ ایک ٹیسٹنگ ثقافت کو اپنانے اور نافذ کرنا

فرنٹ اینڈ ٹیسٹنگ کا تعارف

01. یونٹ ٹیسٹنگ

02. قبولیت ٹیسٹ

03. بصری ریگریشن ٹیسٹنگ

04. رسائی اور کارکردگی کی جانچ

کيسے - انتہائی مشہور مضامین

تصاویر کو کیسے کمانے کے لئے: ایک ویب ڈیزائنر کے گائیڈ

ایک ہاتھی کیسے ڈالا

قابل اعتماد فنتاسی جانوروں کو کیسے ڈیزائن کرنا

مورچا کے ساتھ شروع کرو

ایک ساخت میں متحرک تحریک بنائیں

آپ کے اپنے کینوس بورڈز کیسے بنائیں

60 سیکنڈ میں فوٹوشاپ کے ساتھ ایک سینماگراف بنائیں

اپنے ویکٹر علامت (لوگو) کو 2D سے 3D سے لے لو

اقسام