CodeceptJS

حالة البناء:

مساعد Appium:

مساعد الويب:

CodeceptJS

المرجع: مساعدون API

اختبار E2E Supercharged

CodeceptJS هو إطار اختبار جديد للاختبار من شامل إلى طرف مع WebDriver (أو غيره). يمتد تفاعل المتصفح إلى خطوات بسيطة مكتوبة من منظور المستخدم. سيبدو اختبار بسيط يتحقق من نص "الترحيب" على صفحة رئيسية للموقع:

 Feature ( 'CodeceptJS demo' ) ;

Scenario ( 'check Welcome page on site' , ( { I } ) => {
  I . amOnPage ( '/' ) ;
  I . see ( 'Welcome' ) ;
} ) ;

اختبارات codeceptjs هي:

• متزامن . لا تحتاج إلى الاهتمام بالاسترداد أو الوعود أو سيناريوهات الاختبار الخطية. ولكن يجب أن تكون اختباراتك خطية.
• مكتوب من منظور المستخدم . كل عمل هو طريقة I . هذا يجعل الاختبار سهلاً للقراءة والكتابة والصيانة حتى بالنسبة للأشخاص غير التقنيين.
• الواجهة الخلفية API الملحمية . لا نعرف أي تطبيق WebDriver الذي يدير هذا الاختبار.

يستخدم CodeceptJS وحدات المساعدة لتوفير الإجراءات لـ I Object. حاليًا ، يحتوي CodeceptJS على هؤلاء المساعدين:

• Playwright - هي مكتبة عقدة تتم أتمتة متصفحات Chromium و WebKit و Firefox مع واجهة برمجة تطبيقات واحدة.
• Puppeteer - يستخدم Puppeteer من Google Chrome للاختبار السريع المسموح به.
• WebDriver - يستخدم WebDriverio لتشغيل الاختبارات عبر بروتوكول WebDriver أو DevTools.
• Testcafe - أتمتة اختبار المتصفح الرخيصة والسريعة.
• Appium - لاختبار الهاتف المحمول مع Appium
• التخلص من السموم - هذا غلاف أعلى مكتبة التخلص من السموم ، يهدف إلى توحيد تجربة الاختبار لإطار CodeceptJS. يوفر Detox اختبار مربع رمادي لتطبيقات الهاتف المحمول ، والعب بشكل جيد لتطبيقات React Native.

وأكثر قادمة ...

لماذا codeceptjs؟

CodeCeptJS هو خليفة لترميز CodeCeption ، وهو إطار اختبار شهير للكامل لـ PHP. مع Codeceptjs ، ستكون اختبارات الوظيفية التي تعتمد على السيناريو الخاص بك بسيطة ونظيفة قدر الإمكان. لا داعي للقلق بشأن الطبيعة غير المتزامنة من Nodejs أو حول واجهات برمجة تطبيقات مختلفة من الكاتب المسرحي ، والسيلينيوم ، والعرائس ، و testcafe ، وما إلى ذلك ، حيث يقوم CodeceptJs بتوحيدها ويجعلها تعمل كما هي متزامنة.

سمات

• ؟ منظمة العفو الدولية التي تعمل بميزات GPT لمساعدة وشفاء الاختبارات الفاشلة.
• ☕ بناءً على إطار اختبار Mocha.
• تم تصميمه لاختبار القبول الذي يحركه السيناريو في نمط BDD.
• يستخدم ES6 أصلاً دون جهاز Transpiler.
• يلعب أيضا لطيف مع TypeScript.
• </> المحددات الذكية: استخدم الأسماء ، الملصقات ، النص المطابق ، CSS أو XPath لتحديد العناصر.
• شل تصحيح الأخطاء التفاعلية: اختبار توقف في أي وقت وجرب أوامر مختلفة في المتصفح.
• قم بإنشاء الاختبارات بسهولة ، PageObjects ، StepObjects مع مولدات CLI.

تثبيت

npm i codeceptjs --save

انتقل إلى الدليل حيث ترغب في تخزين الاختبارات الخاصة بك (و codeCeptJS Config) ، وتنفيذ:

npx codeceptjs init

لإنشاء وتكوين بيئة الاختبار. يوصى بتحديد WebDriver من قائمة المساعدين ، إذا كنت بحاجة إلى كتابة اختبارات Selenium WebDriver.

بعد ذلك قم بإنشاء اختبارك الأول من خلال التنفيذ:

npx codeceptjs generate:test

الآن يتم إنشاء الاختبار ويمكن تنفيذه مع

npx codeceptjs run

إذا كنت ترغب في كتابة اختباراتك باستخدام TypeScript ، فما عليك سوى إنشاء تعريفات نوع قياسية عن طريق التنفيذ:

npx codeceptjs def .

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

ملحوظة:

• يتطلب codeceptjs node.js الإصدار 12+ أو أحدث.

الاستخدام

تعلم codeceptjs عن طريق أمثلة. لنفترض أن لدينا برنامج CodeceptJs مثبتة وتمكين WebDriver Helper.

الأساسيات

دعونا نرى كيف يمكننا التعامل مع اختبار النموذج الأساسي:

 Feature ( 'CodeceptJS Demonstration' ) ;

Scenario ( 'test some forms' , ( { I } ) => {
  I . amOnPage ( 'http://simple-form-bootstrap.plataformatec.com.br/documentation' ) ;
  I . fillField ( 'Email' , '[email protected]' ) ;
  I . fillField ( 'Password' , secret ( '123456' ) ) ;
  I . checkOption ( 'Active' ) ;
  I . checkOption ( 'Male' ) ;
  I . click ( 'Create User' ) ;
  I . see ( 'User is valid' ) ;
  I . dontSeeInCurrentUrl ( '/documentation' ) ;
} ) ;

يتم تنفيذ جميع الإجراءات بواسطة I Object ؛ وظائف التأكيدات تبدأ مع وظيفة see . في هذه الأمثلة ، يتم أخذ جميع طرق I من WebDriver Helper ، راجع الإشارة لتعلم كيفية استخدامها.

دعنا ننفذ هذا الاختبار مع الأمر run . خيار إضافي --steps عملية التشغيل. نوصي بالاستخدام --steps أو --debug أثناء التطوير.

npx codeceptjs run --steps

سيؤدي هذا إلى إنتاج ناتج:

CodeceptJS Demonstration --
 test some forms
 • I am on page " http://simple-form-bootstrap.plataformatec.com.br/documentation "
 • I fill field " Email " , " [email protected] "
 • I fill field " Password " , " **** "
 • I check option " Active "
 • I check option " Male "
 • I click " Create User "
 • I see " User is valid "
 • I dont see in current url " /documentation "
 ✓ OK in 17752ms

يحتوي CodeceptJS على ميزة نهائية لمساعدتك في تطوير وتصحيح الاختبار الخاص بك. يمكنك إيقاف تنفيذ الاختبار في أي مكان واستخدام Shell التفاعلي لتجربة إجراءات ومحددات مختلفة. فقط أضف استدعاء pause() في أي مكان في الاختبار وقم بتشغيله.

يمكن بدء تشغيل القشرة التفاعلية خارج سياق الاختبار عن طريق التشغيل:

npx codeceptjs shell

الإجراءات

لقد ملأنا الشكل بطرق fillField ، التي تقع عناصر النماذج من خلال الملصق. بنفس الطريقة التي يمكنك من خلالها تحديد موقع العنصر حسب الاسم أو CSS أو XPath Locators في الاختبارات:

 // by name
I . fillField ( 'user_basic[email]' , '[email protected]' ) ;
// by CSS
I . fillField ( '#user_basic_email' , '[email protected]' ) ;
// don't make us guess locator type, specify it
I . fillField ( { css : '#user_basic_email' } , '[email protected]' ) ;

طرق أخرى مثل checkOption ، click العمل بطريقة مماثلة. يمكنهم أخذ الملصقات أو CSS أو XPath Locators للعثور على عناصر للتفاعل.

التأكيدات

تبدأ التأكيدات بـ see أو dontSee Prefix. في حالتنا ، نؤكد أن سلسلة "المستخدم صالحة" في مكان ما في صفحة ويب. ومع ذلك ، يمكننا تضييق نطاق البحث إلى عنصر معين من خلال توفير معلمة ثانية:

 I . see ( 'User is valid' ) ;
// better to specify context:
I . see ( 'User is valid' , '.alert-success' ) ;

في هذه الحالة ، سيتم البحث في سلسلة "المستخدم صالحة" فقط داخل العناصر الموجودة بواسطة CSS .alert-success .

مقربات

في حالة حاجة إلى إرجاع قيمة من صفحة ويب واستخدامها مباشرة في الاختبار ، يجب عليك استخدام الأساليب مع بادئة grab . من المتوقع استخدامها داخل وظائف async/await ، وستكون نتائجها متوفرة في الاختبار:

 Feature ( 'CodeceptJS Demonstration' ) ;

Scenario ( 'test page title' , async ( { I } ) => {
  I . amOnPage ( 'http://simple-form-bootstrap.plataformatec.com.br/documentation' ) ;
  const title = await I . grabTitle ( ) ;
  I . expectEqual ( title , 'Example application with SimpleForm and Twitter Bootstrap' ) ; // Avaiable with Expect helper. -> https://codecept.io/helpers/Expect/
} ) ;

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

قبل/بعد

يمكن وضع خطوات تحضير شائعة مثل فتح صفحة ويب ، وتسجيل الدخول في مستخدم ، Before أو Background :

 const { I } = inject ( ) ;

Feature ( 'CodeceptJS Demonstration' ) ;

Before ( ( ) => { // or Background
  I . amOnPage ( 'http://simple-form-bootstrap.plataformatec.com.br/documentation' ) ;
} ) ;

Scenario ( 'test some forms' , ( ) => {
  I . click ( 'Create User' ) ;
  I . see ( 'User is valid' ) ;
  I . dontSeeInCurrentUrl ( '/documentation' ) ;
} ) ;

Scenario ( 'test title' , ( ) => {
  I . seeInTitle ( 'Example application' ) ;
} ) ; 

pageObjects

يوفر CodeceptJS الطريقة الأكثر بساطة لإنشاء واستخدام كائنات الصفحة في الاختبار الخاص بك. يمكنك إنشاء واحدة من خلال التشغيل

npx codeceptjs generate pageobject

سيقوم بإنشاء ملف كائن صفحة لك وإضافته إلى التكوين. لنفترض أننا أنشأنا docsPage واحدة تدعى:

 const { I } = inject ( ) ;

module . exports = {
  fields : {
    email : '#user_basic_email' ,
    password : '#user_basic_password'
  } ,
  submitButton : { css : '#new_user_basic input[type=submit]' } ,

  sendForm ( email , password ) {
    I . fillField ( this . fields . email , email ) ;
    I . fillField ( this . fields . password , password ) ;
    I . click ( this . submitButton ) ;
  }
}

يمكنك حقنه بسهولة للاختبار من خلال توفير اسمها في وسيطات الاختبار:

 Feature ( 'CodeceptJS Demonstration' ) ;

Before ( ( { I } ) => { // or Background
  I . amOnPage ( 'http://simple-form-bootstrap.plataformatec.com.br/documentation' ) ;
} ) ;

Scenario ( 'test some forms' , ( { I , docsPage } ) => {
  docsPage . sendForm ( '[email protected]' , '123456' ) ;
  I . see ( 'User is valid' ) ;
  I . dontSeeInCurrentUrl ( '/documentation' ) ;
} ) ;

عند استخدام TypeScript ، استبدل module.exports مع export للإكمال التلقائي.

المساهمة

• دليل المساهمة

• مدونة لقواعد السلوك

المساهمين

Davertmik	kobenguyent	فوروبيكو	روبنميلر
آرهيل	أبشينكين	فابيويل	بابلوبول
ميراو	جورجغريف	kmkoushik	نيكوكانفاكوم
Elukoyanov	توماشون	Gkushang	تسويورا
egorbodnar	Vikalpp	Elaichenkov	بوريسوسيبوف
ngraf	Nitschsb	هوبيدو	Jploskonka
Maojunxyz	Abhimanyupandian	مارتومو	هاتوفاتشي

رخصة

معهد ماساتشوستس للتكنولوجيا © CodeceptJS