برنامج تعليمي لبرنامج تشغيل الويب IO باستخدام موقع ويب مباشر وأمثلة للعمل: 8 خطوات

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:41

برنامج تعليمي لبرنامج تشغيل الويب IO باستخدام موقع ويب مباشر وأمثلة للعمل

آخر تحديث: 2015-26-07

(تحقق مرة أخرى كثيرًا لأنني أقوم بتحديث هذه التعليمات بمزيد من التفاصيل والأمثلة)

خلفية

لقد قدمت لي مؤخرًا تحديًا مثيرًا للاهتمام. كنت بحاجة إلى تقديم اختبار آلي إلى قسم Q / A مع خبرة فنية قليلة جدًا ولا توجد خلفية برمجية.

كان هذا في الواقع تحديين منفصلين (2). الأول هو تحديد التقنيات اللازمة لإجراء الاختبار الآلي. والثاني هو تدريب قسم الأسئلة والأجوبة.

ستتناول المقالة فقط التقنيات المستخدمة وما تعلمته في هذه العملية.

عملت التقنيات بشكل جيد ولكن كان عليّ فعلاً البحث عن المعلومات وقضيت ساعات طويلة في اكتشاف المشكلات.

لقد واجهت صعوبة في العثور على معلومات على الإنترنت حول هذه التقنيات التي تعمل جميعها معًا.

كنت أرغب في مشاركة هذه المعلومات ، لذلك كتبت هذه المقالة جنبًا إلى جنب مع أمثلة على البرامج النصية للاختبار وموقع ويب اختباري لتشغيل البرامج النصية مقابلها.

يمكن العثور على جميع البرامج النصية للاختبار على github ويقع موقع اختبار العمل في Web Driver IO Tutorial Test Site

أتمنى أن تجدها مفيدة. ان فعلت، يرجى ان تخبرني.

الأهدافاستخدام التقنيات من أجل:

• اختبار وظائف موقع الويب
• اختبر وظائف JavaScript
• يمكن تشغيله يدويًا
• يمكن تشغيله تلقائيًا

• لغة سهلة التعلم لغير المبرمجين

  سؤال / أفراد لديهم معرفة أساسية بـ HTML و JavaScript

• استخدم البرامج مفتوحة المصدر فقط

التقنيات

قائمة التقنيات التي أختارها:

• موكا - عداء اختبار - ينفذ نصوص الاختبار
• shouldjs - مكتبة التوكيد
• webdriverio - روابط التحكم في المتصفح (روابط اللغة)
• السيلينيوم - تجريد المتصفح وتشغيل المصنع

• برامج تشغيل المتصفح / الهاتف المحمول + المتصفحات

  • Firefox (متصفح فقط)
  • Chrome (المتصفح والمحرك)
  • IE (المتصفح والمحرك)
  • Safari (المتصفح والمكوِّن الإضافي لبرنامج التشغيل)

الخطوة 1: تثبيت البرنامج

للبدء ، تحتاج إلى تثبيت خادم مستقل Node JS و Web Driver IO و Mocha و should و Selenium.

فيما يلي إرشادات التثبيت لنظام التشغيل Windows 7.

(أنا من مستخدمي Mac / Linux ولكن كان علي تثبيت كل شيء على أجهزة Windows 7 ، ولهذا السبب قمت بتضمينه كمرجع لك. إجراء التثبيت على Mac / Linux مشابه. يرجى الرجوع إلى المراجع عبر الإنترنت للحصول على المزيد معلومة.)

من المستعرض:

• تثبيت Node الذي يتضمن NPM (مدير حزمة Node)

• انتقل إلى

  • انقر فوق تثبيت
  • حفظ وتشغيل الملف
  • اضبط المسار والمتغير (NODE_PATH)

  • انتقل إلى لوحة التحكم-> النظام والأمان-> النظام

    • إعدادات النظام المتقدمة

    • إعداد البيئة (متغيرات المستخدم)

      • إضافة إلى المسار

        C: / Users {USERNAME} AppData / Roaming / npm ؛

      • أضف NODE_PATH (متغيرات النظام)

        C: / Users {USERNAME} AppData / Roaming / npm / node_modules

ملاحظة: لقد قمت بتثبيت جميع البرامج أدناه باستخدام الخيار العام npm (-g). لا يُنصح بهذا عادةً ولكن بالنسبة لهذا التثبيت ، كنت بحاجة إلى تثبيته عالميًا لأنه سيتم استخدامه عبر مشاريع متعددة.

افتح موجه الأوامر (cmd):

(مسؤول مستخدم محلي)

• تثبيت سيلينيوم "Web driver IO"

  • npm تثبيت webdriverio -g

    سيؤدي هذا إلى تثبيت برنامج تشغيل الويب IO عالميًا على جهازك

• قم بتثبيت برنامج عداء الاختبار "mocha"

  • npm تثبيت mocha -g

    سيؤدي هذا إلى تثبيت الموكا عالميًا على جهازك

• تثبيت مكتبة التأكيد "should"

  • يجب تثبيت npm -g

    سيؤدي هذا إلى تثبيت "should" بشكل عام على جهازك

• قم بتثبيت Selenium Stand Alone Server

  • انتقل إلى
  • قم بتنزيل ملف jar وانتقل إلى دليل "السيلينيوم".

• قم بتثبيت المتصفحات وبرامج تشغيل المستعرض للاختبار باستخدامها

  • من موجه cmd:

    • إنشاء دليل "السيلينيوم"
    • ج: / المستخدمون {USERNAME} السيلينيوم

    • الأوامر:

      • القرص المضغوط ج: / المستخدمون {USERNAME}
      • مكدير السيلينيوم

    • ثعلب النار

      • قم بتثبيت متصفح Firefox ، إذا لم يكن مثبتًا بالفعل.
      • يجب تعيين المسار لبدء Firefox من موجه الأوامر (cmd).

      • لوحة التحكم-> النظام والأمان-> النظام

        • إعدادات النظام المتقدمة
        • إعدادات البيئة
        • أضف (ألحق استخدام الفاصلة المنقوطة) إلى Path Variable
        • C: / Program Files (x86) Mozilla Firefox
      • لا حاجة لبرنامج تشغيل ويب خاص لمتصفح Firefox.

    • كروم

      • تثبيت متصفح الكروم ، إذا لم يكن مثبتًا بالفعل.
      • قد يتم تعيين المسار لبدء تشغيل Chrome من موجه الأوامر (cmd).
      • الاختبار أولاً: chrome.exe من موجه الأوامر (cmd)
      • إذا لم يبدأ الكروم بعد ذلك:

      • لوحة التحكم-> النظام والأمان-> النظام

        • إعدادات النظام المتقدمة
        • إعدادات البيئة
        • أضف (ألحق استخدام الفاصلة المنقوطة) إلى Path Variable
        • C: / Program Files (x86) Google / Chrome / Application / chrome.exe

      • مطلوب برنامج تشغيل ويب خاص لمتصفح Chrome.

        انتقل إلى chromium.org وفك ضغط برنامج تشغيل 32 بت في دليل "السيلينيوم"

    • Internet Explorer (لنظام التشغيل Windows فقط - لن يعمل على الأنظمة الأساسية الأخرى)

      • هناك حاجة إلى برنامج تشغيل ويب خاص لـ IE.

        • انتقل إلى
        • قم بتنزيل برنامج تشغيل 64 بت وفك ضغطه في دليل "السيلينيوم".

الخطوة 2: البرنامج النصي للاختبار الأساسي

لنبدأ ببعض الأساسيات.

إليك نص مخاوي بسيط سيفتح موقع ويب ويتحقق من العنوان.

// tutorial1.js

// // هذا نص اختبار بسيط لفتح موقع ويب و // التحقق من العنوان. // مكتبات مطلوبة var webdriverio = تتطلب ('webdriverio') ، يجب = تتطلب ('should') ؛ // كتلة نصية أو مجموعة اختبار تصف ('Title Test for Web Driver IO - Tutorial Test Page Website'، function () {// set timeout to 10 seconds this.timeout (10000)؛ var driver = {}؛ // ربط للتشغيل قبل الاختبارات قبل (الوظيفة (تم) {// تحميل برنامج التشغيل لبرنامج تشغيل المتصفح = webdriverio.remote ({المطلوب القدرات: {browserName: 'firefox'}}) ؛ driver.init (تم) ؛}) ؛ // مواصفات اختبار - "المواصفات" ("يجب تحميل الصفحة والعنوان الصحيحين" ، الوظيفة () {// تحميل الصفحة ، ثم استدعاء الوظيفة () إرجاع برنامج التشغيل.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html ') // الحصول على العنوان ، ثم تمرير العنوان إلى الوظيفة ().getTitle (). ثم (الوظيفة (العنوان) {// التحقق من العنوان (العنوان).should.be.equal ("Web Driver IO - صفحة اختبار البرنامج التعليمي ")؛ // uncomment for console debug // console.log ('Current Page Title:' + title)؛})؛})؛ //" خطاف "للتشغيل بعد جميع الاختبارات في هذه الكتلة بعد (الوظيفة (تم) {driver.end (تم) ؛}) ؛}) ؛

ملاحظات:

• يجب أن تلاحظ أولاً أن نص الاختبار مكتوب بلغة JAVASCRIPT (ينتهي بامتداد.js).

• البنية الأساسية متطابقة تقريبًا لجميع نصوص الاختبار.

  • تعليقات الرأس (//)
  • المكتبات المطلوبة
  • تعيين الخيارات (اختياري)
  • الخطاف: تحميل برنامج تشغيل المتصفح
  • جناح الاختبار (وصف)
  • مواصفات الاختبار (يمكن أن تكون العديد من المواصفات في مجموعة)
  • الخطاف: نظف

• تبدأ مجموعة الاختبار بوظيفة وصف تأخذ معلمتين:

  • السلسلة - وصف مجموعة الاختبار

    • "تحقق من الصفحة من أجل الإسهاب الصحيح"
    • "التحقق من عمليات زر الاختيار"

  • وظيفة - كتلة من التعليمات البرمجية للتنفيذ

    وصف ("وصف مجموعة الاختبار" ، الوظيفة () {}) ؛

• ستحتوي مجموعة الاختبار على واحد أو أكثر من مواصفات الاختبار (المواصفات)

• تبدأ المواصفات بوظيفة تأخذ معلمتين:

  • سلسلة - وصف مواصفات الاختبار

    • "يجب أن يكون نص الارتباط الصحيح وعنوان URL للرابط"
    • "يجب أن يحتوي على صيغة صحيحة (نسخة سطح المكتب)
  • وظيفة - كتلة من التعليمات البرمجية للتنفيذ
  • it ("وصف مواصفات الاختبار" ، الوظيفة () {}) ؛
• تحتوي المواصفات على واحد أو أكثر من التوقعات التي تختبر حالة الكود

• هذه تسمى التأكيدات

  توفر مكتبة "should" التأكيدات

• في جميع الحالات تقريبًا ، ستحتاج إلى تحديد موقع عنصر واحد أو أكثر باستخدام محدد ثم إجراء بعض العمليات على العنصر (العناصر)

  • أمثلة:

    • ابحث عن نص في الصفحة وتحقق من النص
    • ملء نموذج وإرساله
    • تحقق من CSS لعنصر

دعنا نلقي نظرة فاحصة على المثال مع التعليقات

قم بتحميل المكتبات المطلوبة: برنامج تشغيل الويب IO ويجب.

// المكتبات المطلوبة

var webdriverio = يتطلب ('webdriverio') ، يجب = يتطلب ('should') ؛

تحديد مجموعة الاختبار. تسمى هذه المجموعة: "اختبار العنوان لبرنامج Web Driver IO - موقع صفحة اختبار البرنامج التعليمي"

// مجموعة أو مجموعة نصية تجريبية

وصف ("اختبار العنوان لبرنامج Web Driver IO - موقع صفحة اختبار البرنامج التعليمي" ، الوظيفة () {…}) ؛

اضبط المهلة على 10 ثوانٍ حتى لا تنتهي مهلة النص عند تحميل الصفحة.

// ضبط المهلة على 10 ثوانٍ

this.timeout (10000) ؛

ربط لتحميل برنامج تشغيل المتصفح قبل تشغيل "المواصفات" المواصفات. تم تحميل برنامج تشغيل Firefox في هذا المثال.

// الخطاف للتشغيل قبل الاختبارات

قبل (الوظيفة (تم) {// تحميل برنامج التشغيل لبرنامج تشغيل المتصفح = webdriverio.remote ({المطلوب القدرات: {browserName: 'firefox'}})؛ driver.init (تم)؛})؛

تحديد مواصفات الاختبار.

// مواصفات اختبار - "مواصفات"

it ("يجب تحميل الصفحة والعنوان الصحيحين" ، الوظيفة () {…}) ؛

قم بتحميل صفحة الموقع

.url ("https://www.tlkeith.com/WebDriverIOTutorialTest.html")

الحصول على العنوان ، ثم تمرير العنوان إلى الوظيفة ()

.getTitle (). ثم (الوظيفة (العنوان) {

… });

تحقق من العنوان باستخدام مكتبة التوكيد should.

(العنوان).should.be.equal ("Web Driver IO - صفحة اختبار البرنامج التعليمي") ؛

خطاف لإنهاء وتنظيف السائق عند الانتهاء.

// "خطاف" للتشغيل بعد كل الاختبارات في هذه الكتلة

بعد (الوظيفة (تم) {driver.end (تم) ؛}) ؛

الخطوة 3: قم بتشغيل البرنامج النصي للاختبار

الآن دعنا نرى ما يفعله نص الاختبار عند تشغيله.

ابدأ أولاً خادم السيلينيوم المستقل:

• بالنسبة لنظام التشغيل Windows ، استخدم سطر الأوامر (cmd):

  • جافا -جر
  • # java -jar السيلينيوم-server-standalone-2.46.0.jar

• لنظام التشغيل Mac أو Linux ، افتح Terminal:

  • جافا -جر
  • java -jar السيلينيوم-server-standalone-2.46.0.jar
• انظر لقطة الشاشة أعلاه

بعد ذلك ، قم بتشغيل البرنامج النصي للاختبار:

• بالنسبة لنظام التشغيل Windows ، استخدم سطر الأوامر (cmd):

  • موكا
  • # موكا تعليمي1.js

• لنظام التشغيل Mac أو Linux ، افتح Terminal:

  • موكا
  • $ mocha tutorial.js
• انظر لقطة الشاشة أعلاه

اذا ماذا حصل؟

يستدعي Mocha البرنامج النصي "tutorial1.js". بدأ برنامج التشغيل المتصفح (Firefox) ، وحمل الصفحة وتحقق من العنوان.

الخطوة 4: مثال لموقع ويب

يتم تشغيل جميع الأمثلة على هذا الموقع.

يوجد مثال موقع الويب في: صفحة اختبار Web Driver IO Tutorial Test

يمكن تنزيل جميع نصوص الاختبار من جيثب.

الخطوة 5: أمثلة محددة

جميع الأكواد متاحة على جيثب: Web Driver IO Tutorial على جيثب

• تحقق من الارتباط ونص الارتباط في قائمة غير مرتبة - "linkTextURL1.js"

  • تحتوي القائمة غير المرتبة على عنصر والرابط هو العنصر الرابع في القائمة.
  • يجب أن يكون عنوان URL "https://tlkeith.com/contact.html"

// تحقق من نص ارتباط اتصل بنا

هو ('يجب أن يحتوي على نص رابط اتصل بنا' ، الوظيفة () {return driver.getText ("// ul [@ id = 'mylist'] / li [4] / a"). ثم (الوظيفة (رابط) {وحدة التحكم.log ("تم العثور على الرابط:" + رابط) ؛ (رابط).should.equal ("اتصل بنا") ؛}) ؛}) ؛ // تحقق من عنوان URL للاتصال بنا ، ('يجب أن يحتوي على عنوان URL للاتصال بنا' ، الوظيفة () {return driver.getAttribute ("// ul [@ id = 'mylist'] / li [4] / a"، "href").

• التحقق من نص حقوق النشر - "Copyright1.js"

  • حقوق النشر في التذييل يوضح هذا المثال طريقتين مختلفتين لتحديد نص حقوق النشر:

    • بواسطة كمحدد العنصر
    • باستخدام xpath كمحدد للعنصر

// تحقق من نص حقوق النشر باستخدام المعرف كمحدد للعنصر

("يجب أن يحتوي على نص حقوق الطبع والنشر" ، الوظيفة () {return driver.getText ("# copyright"). ثم (الوظيفة (الرابط) {console.log ('حقوق النشر موجودة:' + رابط) ؛ (رابط). يجب. يساوي ("Tony Keith - tlkeith.com @ 2015 - جميع الحقوق محفوظة.") ؛}) ؛}) ؛ // تحقق من نص حقوق النشر باستخدام xpath كعنصر محدد له ('يجب أن يحتوي على نص حقوق النشر' ، الوظيفة () {return driver.getText ("// footer / center / p"). ثم (الوظيفة (رابط) {console.log ('تم العثور على حقوق النشر:' + رابط) ؛ (رابط).should.equal ("توني كيث - tlkeith.com @ 2015 - جميع الحقوق محفوظة.") ؛}) ؛}) ؛

• تعبئة حقول النموذج وإرسالها - "formFillSubmit1.js"

  • املأ الاسم الأول واسم العائلة ثم أرسل ، ثم انتظر النتائج.

  • يوضح هذا المثال 3 طرق لملء حقل إدخال الاسم الأول:

    • بواسطة معرف
    • بواسطة xpath من الإدخال
    • بواسطة xpath من النموذج> الإدخال
  • يوضح أيضًا كيفية مسح حقل الإدخال

// عيّن الاسم الأول باستخدام المعرف إلى: توني

it ('should set first name to Tony'، function () {return driver.setValue ("# fname"، "Tony").getValue ("# fname"). ثم (function (e) {(e). should.be.equal ("Tony")؛ console.log ("First Name:" + e)؛})؛})؛ // امسح الاسم الأول باستخدام id it ('يجب مسح الاسم الأول' ، الوظيفة () {return driver.clearElement ("# fname").getValue ("# fname"). ثم (الوظيفة (e) {(e).should.be.equal ("")؛ console.log ("First Name:" + e)؛})؛})؛ // عيّن الاسم الأول باستخدام xpath من الإدخال إلى: Tony it ('يجب تعيين الاسم الأول على Tony' ، الوظيفة () {return driver.setValue ("// input [@ name = 'fname']" ، "Tony").getValue ("// input [@ name = 'fname']"). ثم (الوظيفة (e) {(e).should.be.equal ("Tony")؛ console.log ("First Name:" + ه) ؛}) ؛}) ؛ // امسح الاسم الأول باستخدام xpath من الإدخال ('يجب مسح الاسم الأول' ، الوظيفة () {return driver.clearElement ("// input [@ name = 'fname']").getValue ("// input [@ name = 'fname'] "). ثم (الوظيفة (e) {(e).should.be.equal (" ")؛ console.log (" First Name: "+ e)؛})؛}) ؛ // عيّن الاسم الأول باستخدام xpath من النموذج إلى: Tony it ('يجب تعيين الاسم الأول على Tony' ، الوظيفة () {return driver.setValue ("// form [@ id = 'search-form'] / input [1] "،" Tony ").getValue (" // form [@ id = 'search-form'] / input [1] "). ثم (function (e) {(e).should.be.equal ("توني") ؛ console.log ("الاسم الأول:" + e) ؛}) ؛}) ؛ // عيّن الاسم الأخير باستخدام المعرف إلى: Keith it (يجب تعيين الاسم الأخير إلى Keith ، الوظيفة () {return driver.setValue ("# lname"، "Keith").getValue ("# lname"). ثم (الوظيفة (هـ) {(هـ).should.be.equal ("Keith") ؛ console.log ("Last Name:" + e) ؛}) ؛}) ؛ // أرسل النموذج وانتظر نتائج البحث ('يجب إرسال النموذج وانتظر النتائج' ، الوظيفة () {return driver.submitForm ("# search-form"). ثم (الوظيفة (e) {console.log (' إرسال نموذج البحث ')؛}).waitForVisible ("# search-results"، 10000).then (function (e) {console.log (' Search Results Found ')؛})؛})؛

• انقر فوق إظهار / إخفاء الزر والتحقق من النص - "showHideVerify1.js"

  • النص موجود في عنصر إظهار / إخفاء. يتحكم الزر في الحالة.

  • يوضح هذا المثال:

    • انقر فوق الزر للتوسيع
    • انتظر حتى يصبح العنصر مرئيًا (موسعًا)
    • التحقق من النص (نسخة المجموعة)

// انقر فوق الزر "مزيد من المعلومات" وتحقق من النص في العنصر الموسع

it ("يجب النقر فوق زر مزيد من المعلومات والتحقق من النص" ، الوظيفة () {return driver.click ("# moreinfo"). ثم (function () {console.log ('Clicked More Info button') ؛}).waitForVisible ("#collapseExample"، 5000).getText ("// div [@ id = 'collapseExample'] / div"). ثم (الوظيفة (e) {console.log ('Text:' + e)؛ (e).should.be.equal ("كل الأشياء الجيدة تذهب هنا!") ؛}) ؛}) ؛

• التحقق من صحة أخطاء حقل النموذج - "formFieldValidation.js"

  • استخدم البرامج النصية للاختبار للتحقق من إنتاج رسائل الخطأ الصحيحة.

  • يوضح هذا المثال:

    تحقق من رسائل الخطأ النصية وتحقق من الموقع (موضع قائمة غير مرتب)

("يجب أن يحتوي على 5 أخطاء: الأول / الأخير / العنوان / المدينة / الولاية" ، الوظيفة () {

return driver.getText ("// ul [@ class = 'alert-danger'] / li [1]"). ثم (الوظيفة (e) {console.log ('تم العثور على خطأ:' + e)؛ (e).should.be.equal ('الرجاء إدخال الاسم الأول') ؛}).getText ("// ul [@ class = 'alert-danger'] / li [2]"). ثم (الوظيفة (e) {console.log ('تم العثور على خطأ:' + e)؛ (e).should.be.equal ('Please enter last name')؛}).getText ("// ul [@ class = 'alert alert-danger '] / li [3] "). ثم (الوظيفة (هـ) {console.log (' تم العثور على خطأ: '+ e) ؛ (e).should.be.equal (' الرجاء إدخال العنوان ') ؛}). getText ("// ul [@ class = 'alert-danger'] / li [4]"). ثم (الوظيفة (e) {console.log ('تم العثور على خطأ:' + e)؛ (e).should.be.equal ('Please enter city')؛}).getText ("// ul [@ class = 'alert-danger'] / li [5]"). ثم (الوظيفة (e) {console.log ('تم العثور على خطأ:' + e) ؛ (هـ).should.be.equal ('الرجاء إدخال الحالة') ؛}) ؛ }) ؛

• تكرار البيانات للتحقق من ارتباط / نص / صفحة URL - "LoopDataExample1.js"

  • يوضح هذا المثال: استخدام مصفوفة من بيانات JSON لتخزين الارتباط والاسم ، ثم التكرار

    • تحقق من كل نص URL ورابط
    • انقر فوق الارتباط وتحميل الصفحة

// ربط البيانات - ارتباط ونص

var linkArray = [{"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/tutorial1.js"، "name": "tutorial1.js"}، {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/linkTextURL1.js "،" الاسم ":" linkTextURL1.js "} ، {" الرابط ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/ master / copyright1.js "،" name ":" copyright1.js "} ، {" الرابط ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFillSubmit1.js "،" الاسم ":" formFillSubmit1.js "}، {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/showHideVerify1.js "،" name ":" showHideVerify1.js "}، {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/dynamicBrowser.js "،" name ":" dynamicBrowser.js "}، {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/ blob / master / callbackPromise.js "،" name ":" callbackPromise.js "}، {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/debugExample1.js "،" name ": "debu gExample1.js "}، {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFieldValidation.js "،" name ":" formFieldValidation.js "} ، {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/common/commonLib.js "،" name ":" commonLib.js "}، {" link ":" https://github.com/onewithhammer/ WebDriverIOTutorial / blob / master / dataLoopExample1.js "،" name ":" dataLoopExample1.js "}]؛ … // حلقة من خلال كل linkArray linkArray.forEach (الوظيفة (د) {it ('يجب أن تحتوي على نص / رابط ثم الانتقال إلى الصفحة -' + d.name ، الوظيفة () {return driver // تأكد من أنك في صفحة البداية.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle (). ثم (الوظيفة (العنوان) {// تحقق من العنوان (العنوان).should.be.equal ("Web Driver IO - صفحة اختبار البرنامج التعليمي ") ؛}) // ابحث عن عنوان URL.getAttribute ('a =' + d.name،" href "). ثم (الوظيفة (الرابط) {(link).should.equal (d.link) ؛ console.log ('تم العثور على عنوان URL:' + d.link) ؛}) // انتقل إلى صفحة URL وتحقق من وجودها. انقر فوق ('a =' + d.name).waitForVisible ("# js-repo-pjax- حاوية "، 10000).then (function () {console.log ('Github Page Found') ؛}) ؛}) ؛}) ؛

• تكرار البيانات الثابتة لتعبئة حقول النموذج - "loopDataExample2.js"

  • يوضح هذا المثال: استخدام مصفوفة من بيانات JSON لتخزين الاسم الأول / الأخير

    • مرر البيانات لتعبئة حقول النموذج ، ثم أرسل النموذج
    • انتظر صفحة النتائج
    • تحقق من الاسم الأول / الأخير في صفحة النتائج

// مصفوفة البيانات - الاسم الأول والأخير Namevar dataArray = [{"firstName": "Tony"، "lastName": "Keith"} ، {"firstName": "John" ، "lastName": "Doe"} ، {"firstName ":" Jane "،" lastName ":" Doe "}، {" firstName ":" Don "،" lastName ":" Johnson "}]؛ … // حلقة خلال كل dataArray dataArray.forEach (الوظيفة (د) {it ('يجب ملء الحقول ، الصفحة الصغيرة' ، الوظيفة () {return driver // تأكد من أنك في صفحة البداية.url ('http: / /www.tlkeith.com/WebDriverIOTutorialTest.html ').getTitle (). ثم (الوظيفة (العنوان) {// التحقق من العنوان (العنوان).should.be.equal ("Web Driver IO - صفحة اختبار البرنامج التعليمي") ؛}).setValue ("# fname"، d.firstName).getValue ("# fname"). ثم (الوظيفة (e) {(e).should.be.equal (d.firstName)؛ console.log ("First الاسم: "+ e)؛}).setValue (" # lname "، d.lastName).getValue (" # lname "). ثم (الوظيفة (e) {(e).should.be.equal (d.lastName)؛ console.log ("Last Name:" + e)؛}).submitForm ("# search-form"). then (function () {console.log ('Submit Search Form')؛}).waitForVisible ("# search-results"، 10000).then (function () {console.log ('Result Page Found')؛}).getText ("// h1"). ثم (الوظيفة (رابط) {console.log (تم العثور على النص: '+ رابط) ؛ (رابط).should.equal ("مرحبًا" + d.firstName + "" + d.lastName + ".") ؛}) ؛}) ؛}) ؛

• التحقق من صحة خصائص CSS - "cssValidation1.js"

  • يوضح هذا المثال كيفية:

    • تحقق من صحة خصائص CSS التالية:

      • اللون
      • المساحة المتروكة (أعلى ، أسفل ، يمين ، يسار)
      • لون الخلفية

("يجب أن تحتوي على اللون الصحيح لنص الخطأ" ، الوظيفة () {return driver.getCssProperty ("// ul [@ class = 'alert-danger'] / li [1]"، "color"). ثم (function (نتيجة) {console.log ('Color found:' + result.parsed.hex + "or" + result.value)؛ (result.parsed.hex).should.be.equal ('# a94442')؛ }) ؛}) ؛

هو ("يجب أن يحتوي على المساحة المتروكة الصحيحة في خلية الجدول" ، الوظيفة () {

رجوع driver // padding: أعلى يمين وأسفل يسار.getCssProperty ("// table [@ id = 'filelist'] / thead / tr [1] / td [1]"، "padding-top"). ثم (وظيفة (النتيجة) {console.log ('padding-top found:' + result.value)؛ (result.value).should.be.equal ('10px')؛}).getCssProperty ("// table [@ id = 'filelist'] / thead / tr [1] / td [1] "،" padding-bottom "). ثم (الوظيفة (النتيجة) {console.log ('padding-bottom found:' + result.value)؛ (result.value).should.be.equal ('10px')؛}).getCssProperty ("// table [@ id = 'filelist'] / thead / tr [1] / td [1]"، "padding- right "). then (function (result) {console.log ('padding-right found:' + result.value)؛ (result.value).should.be.equal ('5px')؛}).getCssProperty ("// table [@ id = 'filelist'] / thead / tr [1] / td [1]"، "padding-left"). ثم (الوظيفة (النتيجة) {console.log ('padding-left found: '+ result.value)؛ (result.value).should.be.equal (' 5px ')؛})؛ }) ؛

هو ("يجب أن يحتوي على لون الخلفية الصحيح في رأس الجدول" ، الوظيفة () {

return driver.getCssProperty ("// table [@ id = 'filelist'] / thead"، "background-color"). ثم (الوظيفة (النتيجة) {console.log ('تم العثور على لون الخلفية:' + result.parsed. hex)؛ (result.parsed.hex).should.be.equal ('# eeeeee') ؛}) ؛ }) ؛

الخطوة 6: النصائح والحيل

• تصحيح:

  • قم بتشغيل التسجيل على مستوى برنامج التشغيل لمزيد من التصحيح وإنشاء السجلات.

    • اضبط logLevel على "مطوّل"
    • قم بتعيين logOutput إلى اسم الدليل ('logs')

driver = webdriverio.remote (loglevel: 'verbose'، logOutput: 'logs'، {requiredCapabilities: {browserName: 'firefox'}}) ؛

• استخدم console.log () ، debug () ، getText () لتصحيح الأخطاء.

  • console.log () - تُستخدم لعرض المعلومات لتحديد الحالة.
  • debug () - استخدم إيقاف المتصفح / البرنامج النصي حتى يتم الضغط على enter في سطر الأوامر.

  • getText () - تُستخدم للتحقق من أنك تتفاعل مع العنصر الصحيح.

    مفيد بشكل خاص مع تعبيرات xpath

// انقر على العنصر 3 من القائمة

it ('يجب النقر فوق العنصر 3 من القائمة' ، الوظيفة () {// استخدم getText () للتحقق من صحة xpath لبرنامج تشغيل إرجاع العنصر.getText ("// ul [@ id = 'mylist'] / li [3] / div / div / a "). ثم (الوظيفة (رابط) {// استخدم console.log () لإخراج معلومات console.log ('Link found:' + link)؛ (link).should.equal ("العنصر 3") ؛}) // استخدم debug () لإيقاف الإجراء لمعرفة ما يحدث على المتصفح.debug (). انقر ("// ul [@ id = 'mylist'] / li [3] /div/div/a").then (function () {console.log ('Link clicked')؛}) // انتظر حتى يظهر نموذج بحث google.waitForVisible ("# tsf"، 20000). ثم (الوظيفة (هـ) {console.log ('تم العثور على نتائج البحث') ؛}) ؛}) ؛

• استخدم متغير البيئة لتغيير المتصفح ديناميكيًا:

  • استخدم متغير البيئة SELENIUM_BROWSER لاستدعاء متصفح مختلف دون تعديل البرنامج النصي للاختبار في كل مرة.
  • يتطلب تغيير طفيف في الترميز لدعم.

تغييرات التعليمات البرمجية:

// تحميل برنامج التشغيل للمتصفح

driver = webdriverio.remote ({المطلوب القدرات: {browserName: process.env. SELENIUM_BROWSER || 'chrome'}}) ؛

المتصفحات المدعومة:

• Internet Explorer - IE 8+ (Windows فقط)

  SELENIUM_BROWSER = أي موكا

• Firefox 10+ (Windows / Max / Linux)

  SELENIUM_BROWSER = فايرفوكس موكا

• Chrome 12+ (Windows / Max / Linux)

  SELENIUM_BROWSER = موكا الكروم

• أوبرا 12+

  SELENIUM_BROWSER = أوبرا مخاوي

• سفاري

  SELENIUM_BROWSER = مخاوي السفاري

اختبارات:

• بالنسبة لنظام التشغيل Windows ، استخدم git bash shell:

  • SELENIUM_BROWSER = موكا الكروم
  • $ SELENIUM_BROWSER = كروم موكا DynamicBrowser.js

• لنظام التشغيل Mac أو Linux ، افتح Terminal:

  • SELENIUM_BROWSER = موكا الكروم
  • $ SELENIUM_BROWSER = كروم موكا DynamicBrowser.js

• اختبار الاستجابة:

  • تحديد نقاط التوقف على أساس المشروع أو إطار العمل (أي التمهيد).

  • حدد متغيرات البيئة لكل نقطة توقف:

    • سطح المكتب - 1200 بكسل
    • قرص - 992 بكسل
    • جوال - 768 بكسل

  • قم بتطوير أمر قابل لإعادة الاستخدام لقراءة متغير البيئة وتعيين حجم المتصفح.

    انظر المثال أدناه

  • اتصل بالأمر القابل لإعادة الاستخدام في البرنامج النصي للاختبار.

// كود قابل لإعادة الاستخدام - library // code snippet if (bp == "DESKTOP") {obj.width = 1200؛ obj.height = 600 ؛ obj.name = bp ؛ } else if (bp == "TABLET") {obj.width = 992 ؛ obj.height = 600 ؛ obj.name = bp ؛ } else if (bp == "MOBILE") {obj.width = 768 ؛ obj.height = 400 ؛ obj.name = bp ؛ }

// اختبار كتابي

قبل (الوظيفة (تم) {winsize = common.getWindowSizeParams () ؛ … driver.addCommand ('setWindowSize'، common.setWindowSize.bind (driver)) ؛} // اضبط حجم النافذة ('يجب تعيين حجم النافذة' ، الوظيفة (تم) {// فقط العرض مهم driver.setWindowSize (winsize.width، winsize.height، function () {}). call (done)؛})؛

• أوامر قابلة لإعادة الاستخدام (أوامر مخصصة):

  • Web Driver IO قابل للتمديد بسهولة.
  • أحب وضع جميع الأوامر القابلة لإعادة الاستخدام في مكتبة. (ربما هذه مدرسة قديمة لكنها تعمل!)

مشترك / مشترك

// checkLastNameCheckError ()

// // الوصف: // يتحقق من رسالة خطأ التحقق من صحة اسم العائلة // // Input: // number - index of error (1-5) // Output: // none // var definitelyLastNameCheckError = function () { var idx = الوسيطات [0] ، رد الاتصال = الوسيطات [arguments.length - 1] ؛ this.getText ("// ul [@ class = 'alert-danger'] / li [" + idx + "]"، function (err، e) {console.log ('Error found:' + e)؛ (هـ).should.be.equal ("الرجاء إدخال الاسم الأخير") ؛}).call (رد الاتصال) ؛ } ؛ // قم بتصدير الوحدة النمطية للوظيفة.

فيما يلي التغييرات المحددة المطلوبة لاستدعاء وظيفة قابلة لإعادة الاستخدام

انظر formFieldValidation.js للحصول على مثال عملي كامل

// تتطلب الأمر القابل لإعادة الاستخدام - CommonLib

مشترك = يتطلب ('./ Common / CommonLib') ؛ … // ربط الأوامر driver.addCommand ('checkFirstNameError' ، common.verifyFirstNameCheckError.bind (سائق)) ؛ driver.addCommand ('checkLastNameError' ، common.verifyLastNameCheckError.bind (سائق)) ؛ هو ('يجب أن يحتوي على خطأين: الاسم الأول / الأخير' ، الوظيفة () {// استدعاء برنامج تشغيل الوظيفة القابلة لإعادة الاستخدام.verifyFirstNameError (1) ؛.verifyLastNameError (2) ؛}) ؛

• ملف المشروع / هيكل الدليل:

  • هنا هيكل نموذجي للمشروع:

    • "المشروع" - دليل المشروع الرئيسي

      • README.md - الملف التمهيدي لمشروع عالمي

      • "عام" - دليل الوظائف العامة المشتركة لجميع المشاريع

        • Common-lib.js - مكتبة الوظائف العالمية
        • README.md - الملف التمهيدي للوظائف العامة

      • "Product1" - دليل المنتج 1

        • test-script1.js
        • test-script2.js

        • "عام" - دليل الوظائف المحلية للمشروع 1

          • prod1-lib.js - مكتبة الوظائف المحلية للمشروع 1
          • README.md - الملف التمهيدي للوظائف المحلية للمشروع 1

      • "Product2" - دليل للمنتج 2test-script1.jstest-script2.js

        • "عام" - دليل الدوال المحلية للمشروع 2

          • prod2-lib.js - مكتبة الوظائف المحلية للمشروع 2
          • README.md - الملف التمهيدي للوظائف المحلية للمشروع 2

• قسم البرامج النصية التجريبية إلى ملفات متعددة:

  • فيما يلي عينة من استخدام ملفات متعددة:

    • فحص الصحة - برنامج نصي للاختبار الأساسي للتحقق من أن كل شيء يعمل
    • العنصر الثابت والتحقق من صحة النص - تحقق من جميع العناصر والنص
    • التحقق من خطأ النموذج / الصفحة - التحقق من الخطأ
    • نتائج البحث - اختبار المحتوى الديناميكي

• عمليات الاسترجاعات مقابل. وعود:

  • يدعم الإصدار 3 من Web Driver IO كلاً من عمليات الاسترجاعات والوعود.

    الوعود هي الطريقة المفضلة لأنها تقلل من رمز معالجة الخطأ. يرجى الاطلاع أدناه على نفس المثال المكتوب باستخدام الاسترجاعات والوعود.

عمليات الاسترجاعات

// تعيين / التحقق من الاسم الأول / الأخير باستخدام رد الاتصال

it (يجب تعيين / التحقق من الاسم الأول / الأخير باستخدام Callbacks ، الوظيفة (تم) {driver.setValue ("# fname" ، "Tony" ، الوظيفة (e) {driver.getValue ("# fname" ، الوظيفة (يخطئ ، e) {(e).should.be.equal ("Tony")؛ console.log ("First Name:" + e)؛ driver.setValue ("# lname"، "Keith"، function (e) { driver.getValue ("# lname"، الوظيفة (err، e) {(e).should.be.equal ("Keith")؛ console.log ("Last Name:" + e)؛ done ()؛}) ؛}) ؛}) ؛}) ؛}) ؛

وعود

// تعيين / التحقق من الاسم الأول / الأخير باستخدام الوعود

هو ('يجب تعيين / التحقق من الاسم الأول / الأخير باستخدام الوعود' ، الوظيفة () {return driver.setValue ("# fname"، "Tony").getValue ("# fname"). ثم (الوظيفة (e) {(e).should.be.equal ("Tony")؛ console.log ("First Name:" + e)؛}).setValue ("# lname"، "Keith").getValue ("# lname"). ثم (الوظيفة (هـ) {(هـ).should.be.equal ("Keith") ؛ console.log ("Last Name:" + e) ؛}) ؛}) ؛

الخطوة 7: المزيد من الموارد

فيما يلي بعض الموارد الإضافية للرجوع إليها:

• مجموعات المناقشة (Gitter)

  • مجموعة مناقشة IO لبرنامج تشغيل الويب
  • مجموعة مناقشة المخاوي

• مشاريع أخرى مثيرة للاهتمام

  • Supertest - تأكيدات
  • تشاي - التأكيدات

الخطوة 8: الخاتمة

قضيت بعض الوقت في البحث عن التقنيات لاستخدامها في مشروعي. لقد بدأت أصلاً مع برنامج Selenium Web Driver لكنني تحولت إلى استخدام Web Driver IO. بدا أن Web Driver IO أسهل في الاستخدام وأسهل بكثير للتوسيع (على الأقل وثائق التمديد - كانت الأوامر القابلة لإعادة الاستخدام أفضل).

عندما بدأت في النظر إلى التقنيات لأول مرة ، كان من الصعب العثور على أمثلة جيدة مرتبطة بأي شيء كنت أحاول القيام به. هذا هو سبب رغبتي في مشاركة هذه المعلومات والمعرفة معك.

عملت التقنيات بشكل أفضل بكثير مما كنت أتوقع ولكن كان هناك منحنى تعليمي متضمن. بمجرد أن فهمت كيف تعمل جميع المكونات معًا ، تمكنت من كتابة نصوص اختبار معقدة في وقت قصير جدًا. كانت أصعب البرامج النصية هي المكونات المستندة إلى JavaScript مثل منتقي التاريخ ومحددات الوسائط.

لم أقم بتصنيف نفسي مطلقًا كمطور JavaScript ولم أرغب جميعًا في أن أكون خبيرًا في JavaScript ، ولكن استخدام هذه التقنيات قد حفزني بالتأكيد على صقل مهارات JS الخاصة بي.

آمل أن يكون هذا المقال مفيدًا وأن تكون الأمثلة واضحة وغنية بالمعلومات.

يرجى إعلامي إذا كان لديك أي أسئلة أو تعليقات.

شكرا لك،

توني كيث