استخدم AskUI والخيار معًا

من خلال تحديد سلوك النظام بتنسيق منظم مثل Gherkin، يمكّن التطوير المبني على السلوك (BDD) الفرق من سد الفجوة بين أصحاب المصلحة والمختبرين والمطورين، وتجنب سوء الفهم وتقليل إعادة العمل. كنهج تعاوني، تشجع BDD جميع الأطراف على العمل معًا منذ البداية، مما يضمن أن الجميع على استعداد
نفس الصفحة ويتم تسجيل المتطلبات بدقة.

في هذه العملية، تعد Cucumber أداة شائعة تستخدم لتنفيذ BDD، مما يمكّن الفرق من كتابة اختبارات واضحة وقابلة للتنفيذ تضمن أن يتصرف النظام كما هو متوقع.

في منشور المدونة هذا، سنوضح لك كيفية إعداد Cucumber بالتزامن مع AskUI لتحديد سير عمل AskUI باستخدام مبادئ BDD.

المتطلبات الأساسية

• تم تثبيت AskUI وتكوينه على نظامك (Windows وLinux وmacOS)

• حذف Askui_example/my-first-askui-test-suite.test.ts بعد التهيئة

إعداد الإعداد

الخيار لا يعمل بشكل جيد مع الإعداد الافتراضي لـ AskUI حتى الآن (الإصدار 0.20.3). لكي تلعب AskUI بشكل جيد مع Cucumber، يتعين عليك إجراء إعدادين صغيرين حيث يستخدم AskUI Jest كعداء له.

1. قم بتغيير خيارات بيئة اختبار Jest

في الملف Askui_example/helpers/jest.config.ts يجب عليك تعطيل هذا الرمز المضمن في تقرير التشغيل. يمكنك تحقيق ذلك عن طريق إضافة خاصية testEnvironmentOptions مع تعيين الخاصية addCodeInReport إلى false.

const config: Config.InitialOptions = {
  ...
  testEnvironment: '@askui/jest-allure-circus',
  testEnvironmentOptions: {
    addCodeInReport: false
  },
};
...

2. أخبر Jest بمكان العثور على تنفيذ تعريفات الخطوة

أيضًا في Askui_example/helpers/jest.config.ts تحتاج إلى توسيع خاصية testMatch الافتراضية. يجب أن يتضمن ملفات تنتهي بـ step.ts لأننا سنقوم بتخزين التنفيذ هناك.

...
const config: Config.InitialOptions = {
  ...
  testEnvironment: '@askui/jest-allure-circus',
  testEnvironmentOptions: {
    addCodeInReport: false
  },
  testMatch: [ "**/__tests__/**/*.[jt]s?(x)", "**/?(*.) (spec|test|step).[jt]s?(x)" ]
};
...

s?(x)", "**/?(*.) (spec|test|step).[jt]s?(x)" ] }; ...

تثبيت jest-cucumber

أسهل طريقة لاستخدام Jest مع Cucumber هي حزمة npm jest-cucumber. لنقم بتثبيته باستخدام الأمر التالي:

npm install --save-dev jest-cucumber

تثبيت npm --save-dev jest-cucumber

إنشاء ملف الميزات الأساسية

إنشاء ميزات المجلد ويوجد هناك ملف ميزة
NavigateToWebsite.feature

npm install --save-dev jest-cucumber

project_root/ ├─ Askui_example/ ├─ الميزات/ ├─ ميزة التنقل إلى موقع الويب ├─ العقدة_modules/ ├─ ...

اكتب الميزة
الأساسية التالية في هذا الملف:

npm install --save-dev jest-cucumber

الميزة: انتقل إلى موقع ويب السيناريو: إدخال عنوان URL الصحيح في شريط عنوان المتصفح نظرًا لوجودي في صفحة بحث Google عندما أكتب عنوان URL لصفحة التدريب على AskUI ثم سأهبط على صفحة الويب

إنشاء تطبيقات تعريفات الخطوة

قم بإنشاء ملف تعريف الخطوة Askui_example/navigate-to-url.step.ts حيث يتم تعيين كل اختبار إلى سيناريو محدد.

npm install --save-dev jest-cucumber

استيراد {تعريف الميزة، ميزة التحميل } من 'jest-cucumber'؛ استيراد { aui } من './helpers/askui-helper'؛ // قم بتحميل ملف الميزة ميزة const = LoadFeature('features/NavigateToWebsite.feature'); تعريف الميزة (الميزة، الاختبار => { // تعيين إلى "السيناريو" في ملف الميزات الخاص بك اختبار ("إدخال عنوان URL الصحيح في شريط عنوان المتصفح"، ({ معطى ومتى ثم }) => { معطى ("أنا في صفحة بحث Google"، غير متزامن () => { انتظر aui.moveMouse(500, 500).exec(); انتظر aui.mouseLeftClick().exec(); انتظر aui.pressTwoKeys('command', 't').exec(); }); عندما ("أكتب عنوان URL لصفحة التدريب على AskUI"، غير متزامن () => { انتظار aui.typeIn('https://askui.github.io/askui-practice-page/').textfield().exec(); انتظر aui.pressKey('enter').exec(); }); ثم ("سأنتقل إلى صفحة الويب"، غير متزامن () => { انتظر aui.expect().text('مرحبًا بك في صفحة ممارسة AskUI').exists().exec(); }); }); });

تشغيل سير العمل

افتح متصفحك في وضع ملء الشاشة وابدأ سير العمل باستخدام:

npm install --save-dev jest-cucumber

npm تشغيل Askui

يجب أن ترى أن تشغيل سير العمل سيفتح علامة تبويب جديدة وينتقل إلى صفحة التدريب على AskUI.

خاتمة

يتيح لك الجمع بين AskUI وCucumber كتابة سير عمل AskUI بأسلوب BDD. إن تنفيذ اختباراتك كمستخدم بشري حقيقي سيجعلها أكثر واقعية لكل أصحاب المصلحة.