الآن، أن لدينا فهم سريع
للاختبارات من نهاية إلى نهاية وما الدور الذي
تلعبه الاختبارات من نهاية إلى نهاية في الاستراتيجية الشاملة لاختبار التطبيقات الزاوي.
أيضا، مقدمة موجزة إلى منقلة.
دعونا المضي قدما في التمرين التالي حيث يمكننا توظيف
المنقلة وتصميم اختباراتنا من نهاية إلى نهاية.
من حسن الحظ أن يقوم CLI الزاوي تلقائيًا
بإعداد كل ما نحتاجه لإجراء اختبارات نهاية إلى نهاية،
كما سنرى عندما نمضي في التمرين.
لذلك، هو مسألة تنفيذ الاختبارات المختلفة ومن
ثم إجراء الاختبار باستخدام منقلة في هذا التمرين.
الذهاب إلى تطبيقنا الزاوي في Visual Studio،
إذا نظرتم إلى حزمة ملف JSON الخاص بنا،
سترى أننا نجد بالفعل أن
CLI الزاوي قد أعدت كل ما نحتاجه لإجراء اختبارات نهاية إلى نهاية.
لذلك، أثناء التمرير لأسفل،
سترى أن المنقلة قد تم تثبيتها بالفعل على
جهاز الكمبيوتر الخاص بنا داخل المشروع الزاوي.
أيضا، نلاحظ أن هناك مجلد منفصل هنا
يسمى e2e الذي يحتوي على عدد قليل من الملفات
التي تم إعدادها بالفعل لتنفيذ اختبار نهاية إلى نهاية.
الآن، إذا كنت بحاجة إلى إجراء اختبارات شاملة من النهاية إلى النهاية،
فمن الجيد إنشاء
ملف منفصل لكل مجموعة من الاختبارات من النهاية إلى النهاية التي تريد تنفيذها.
الآن، في هذا التمرين بالذات،
أنا أوضح لكم كيفية إجراء اختبارات نهاية إلى نهاية.
لذلك، أنا ذاهب إلى التمسك مع ما تم بالفعل إعداده من قبل كلي الزاوي.
سنعمل مع الملفات التي لدينا متاحة هناك
لذلك، دعونا نلقي نظرة سريعة على هذين الملفين هنا، app.e2e-spec.ts،
وسترى أن بعض التعليمات البرمجية قد تم بالفعل سقالة في هذا الملف عن طريق الزاوي.
أيضا، هذا الملف الآخر يسمى app.po.ts،
وهذا ليس سوى فئة جافا سكريبت القياسية
التي تم إعدادها مع بعض الطرق هنا.
الآن، ما سنقوم به هو إضافة عدد قليل من الطرق الأخرى إلى
فئة جافا سكريبت هذه وأيضا تحديث بعض هذه الطرق التي يتم تقديمها هنا.
سنقوم بإعداد اختباراتنا في ملف app.e2e-spec.ts.
لذلك، للمضي قدما،
دعونا نذهب إلى التطبيق.
Po.ts، ثم داخل هذا الملف، دعونا تحديث هذا.
لذا، هنا، ترون أن لدينا طريقتين تم إنشاؤهما هنا بالفعل.
سأقوم بتحديث هذه الطرق لتمكينها من أخذ معلمة هنا.
لذلك، سأقول، NavigateTo مع وصلة،
والتي يتم توفيرها كسلسلة،
ثم سأقوم بتحديث هذا المتصفح للحصول
على استخدام الرابط الذي هو المعلمة لهذه الطريقة.
إذاً، ماذا يفعل هذا؟
لذلك، كما ترون،
نحن نستفيد من بناء الجملة المنقلة هنا.
لذلك، هذا يقول عودة المتصفح الحصول على رابط.
لذا، فإن هذه المكالمة الخاصة إلى طريقة الحصول على المتصفح هذه ستمكن
تطبيقنا من التصفح إلى هذا الرابط المحدد الذي يتم توفيره كمعلمة هنا.
لذلك، قبل هذا التحديث،
رأيت أن الرابط المقدم هنا كان مائل،
مما يعني أن جذر التطبيق الزاوي لدينا.
الآن، لقد قمت بتحديث هذا لأخذ معلمة هنا.
وبالمثل، فإن الطريقة الثانية التي تراها تسمى getParagraphText.
الآن، يتم استخدام هذه الطريقة للحصول على المحتوى الداخلي لعنصر HTML هنا.
لذلك، لهذا، أيضا،
سوف أقوم بإعداد معلمة تسمى محدد،
وهو محدد CSS سأقوم بتوفيره هنا.
لذلك، ترى أنه هنا،
سأقوم بتغيير هذا لاتخاذ المحدد كمعلمة.
الآن، من التجربة السابقة مع اختبار الوحدة،
ترى ما بواسطة and.css تقف ل.
هذا هو نفس الشيء الذي نستخدمه هنا أيضا.
يتم استيراد هذا عن طريق الطريقة هنا المستخدمة الآن من مكتبة المنقلة هنا.
يتم استيراد طريقة العنصر أيضا من مكتبة المنقلة.
لذلك، تسمح لك طريقة العنصر هذه بالوصول إلى عنصر HTML
من خلال توفير هذا التحديد لعنصر HTML كمعلمة هنا.
لذلك، يمكنك أن تقول بواسطة css
و byId، والعديد من الطرق الأخرى المتاحة للفئة هنا.
ثم، فإن طريقة getText،
يحصل كما نرى النص الداخلي المرئي لهذا العنصر بالذات.
لذلك، هذه طريقة واحدة لاسترداد المعلومات من
عنصر HTML معين داخل نافذة المتصفح لدينا،
ثم تحقق لمعرفة ما إذا كان يتطابق مع نمط نحدده هنا.
لذلك، مع هذا التحديث إلى app.po.ts،
دعونا ننتقل إلى ملف app.e2e-spec.ts.
لذلك، ضمن هذا الملف،
ستلاحظ أننا نستخدم بناء جملة الياسمين.
لذلك، هنا، تراني باستخدام وصف ثم الذي يقول السماح صفحة AppPage.
لذا، هنا، الصفحة هي المكان الذي نقوم فيه بإنشاء هذه الفئة الجديدة التي تسمى AppPage،
والتي أعلناها في ملف app.po.ts كفئة جافا سكريبت هنا.
الآن، هذه مجرد طريقة مريحة لإعداد جميع الأشياء في موقع واحد،
ومن ثم القدرة على الاستفادة منها في رمز الاختبار الخاص بي نفسه.
لذلك، هنا، أنا أعلن الصفحة للإشارة إلى هذا AppPage،
وبذلك سيمكنني من الوصول إلى
الطرق التي قمت بإنشائها في هذا الفصل هنا.
لذا، فإن الاختبار الأول الذي سأقوم به هو الانتقال إلى
جذر تطبيقي الزاوي
ثم التحقق لمعرفة ما إذا كان هناك نمط معين في ذلك.
ستلاحظ أنه في صفحتي الرئيسية،
سيكون لديك السلسلة
المسماة Ristorante Con Fusion
داخل عنصر H1 في صفحتي.
لذا، ما سأقوم به هو الانتقال إلى جذر عنصر HTML الخاص بي.
ثم، في هناك، سأذهب للبحث
عن مسار التطبيق ثم ابحث عن علامة H1 داخل مسار التطبيق.
ثم، يجب أن يساوي هذا السلسلة المعينة هنا.
لذلك، أنا فقط ذاهب لنسخ
سلسلة ريستورانتي كون فيوجن هناك ومن ثم توفير ذلك كمعلمة هنا.
لذلك، أنا فقط تحديث الاختبار للتحقق من
بالضبط ما لدينا في التطبيق الزاوي المحدث لدينا.
لذلك، مع هذا الإعداد،
والآن أنا ذاهب لتنفيذ أول اختبار بلدي من بلدي التطبيق الزاوي.
لذلك، دعونا حفظ جميع التغييرات ومن ثم نعود إلى محطة لدينا.
داخل المحطة، في مجلد المشروع الخاص بي،
في موجه سوف اكتب ng e2e.
ستلاحظ أن هذا سيبدأ متصفح.
في حالتي، سيبدأ نافذة Chrome ثم إجراء الاختبار في تلك النافذة.
لذلك، دعونا إجراء الاختبار الأول.
سترى أنه عندما يتم تشغيل الاختبار بعد تجميع التطبيق الزاوي الخاص بي
، عند تشغيل الاختبار،
فإنه سيضمن نجاح الاختبار.
ترى أنه في الجزء الخلفي،
يتم فتح المتصفح الخاص بي بواسطة ng e2e،
ثم تم إجراء الاختبار في نافذة المتصفح تلك.
وتقول أن الاختبار تم بنجاح هنا.
لذلك، لاحظت أنه حتى في هذه الحالة،
فإنه يحتاج إلى بدء تشغيل المتصفح،
تحميل في التطبيق الزاوي الخاص بي في المتصفح،
التطبيق الزاوي بأكمله في المتصفح.
ثم، تنفيذ الاختبار قبالة بلدي التطبيق الزاوي.
عند هذه النقطة، تأكد من أن الخادم الخاص بك،
خادم JSON قيد التشغيل
وتشغيله، وإلا، سيفشل الاختبار، لأنه عندما يتم إجراء الاختبار،
سيحاول الوصول إلى خادم JSON أيضًا.
لذلك، هذا شيء تحتاج إلى ضمان.
أستمر في إختباراتنا
في الخطوة الثانية،
ونحن في طريقنا لإضافة في بضع طرق أخرى في هذا AppPage.
الصف هنا لذلك، أود استخدام طريقة جديدة
تسمى GetElement ثم أخذ معلمة من محدد.
تسمح لي هذه الطريقة بالوصول إلى العنصر،
الذي يتم تحديده باستخدام نفسه بواسطة محدد CSS.
لذلك، أنا فقط ذاهب لنسخ هذا.
لذلك، في هذه الحالة، بدلا من مجرد الحصول على النص،
فإنه سيتم بالفعل إرجاع المرجع إلى العنصر نفسه،
وبعد ذلك بحيث يمكنك إضافة بطرق إضافية
للوصول إلى المعلومات داخل هذا العنصر كما نطلبه.
في هذه الحالة، يتم استخدام النص الحصول على فقط لجلب النص المحدد.
قد نستخدم أساليب أخرى على
هذا العنصر لجلب معلومات إضافية من تلك العناصر.
لذلك، هذا هو السبب في أنني خلق هذه الطريقة هنا.
وبالمثل، سأقوم بتنفيذ طريقة أخرى تسمى الحصول على جميع العناصر.
الآن، يستخدم هذا أيضًا معلمة تسمى محدد تمامًا كما كان من قبل.
ما تفعله طريقة getAll هو تحديد
جميع العناصر ثم إعادتها إلى طوق،
بحيث، على سبيل المثال،
إذا كانت صفحتك تحتوي على العديد من عناصر h1
بالإشارة إلى كل منهم سيتم إرجاعها إلى طوق بلدي.
لذلك، هناك، يمكنني بعد ذلك أن تقرر إجراء
مكالمة إلى واحدة محددة ضمن هذه القائمة من العناصر.
لذلك، للقيام بذلك،
سوف نستخدم نفس العودة ولكن هنا،
بدلا من قول محدد العنصر،
اسمحوا لي فقط نسخ ذلك وبعد ذلك لدينا طريقة أخرى تسمى
element.all والتي تسمح لنا
بالوصول إلى جميع العناصر التي تطابق هذا المحدد معين.
أول واحد سيعود العنصر الأول الذي يطابق هذا المحدد.
بعد هذه التحديثات، سنقوم الآن بالتبديل إلى ملف الاختبار الخاص بنا وإضافة اختبار جديد هنا.
لذا، هنا مرة أخرى، أستخدم بناء جملة الياسمين لإضافة الاختبار الجديد هنا.
لذلك، سأقول ذلك ومن ثم إعطاء وصف لهذا الاختبار.
سوف أقول أنه يجب الانتقال إلى
صفحة عنا عن طريق النقر على الرابط.
الآن، إذا نظرت إلى تطبيق Angular الخاص
بك، فستلاحظ أنه ضمن تطبيق Angular الخاص بك،
لديك روابط التنقل في أعلى الصفحة.
لذلك، ما سنقوم به في هذا الاختبار هو
الذهاب تلقائيا والوصول إلى واحدة من تلك الروابط الملاحة والنقر عليها.
الآن، بالطبع، كما تتوقع أن يتم ذلك برمجيًا،
بدلاً من النقر يدويًا على الرابط.
لذلك، للقيام بذلك،
ما سأقوم به هو الانتقال إلى جذر تطبيق Angular الخاص بي وبعد ذلك،
سأذهب للوصول إلى
الروابط في شريط التنقل الخاص بي في الأعلى.
بقول الصفحة، GetallElements
ثم سأحصل على جميع العناصر التي تحتوي على علامة هناك.
الآن من الواضح، سيكون لديك العديد من تلك العلامات في صفحتنا ولكن الأربعة الأوائل،
هي الروابط الأربعة في
شريط التنقل في الجزء العلوي من صفحتنا هناك في مكون الرأس.
لذلك، الحصول على الوصول إلى
تلك لاحظ الآن أنني باستخدام الحصول على جميع العناصر لذلك أنا ذاهب للحصول على عدد من العناصر.
في هذه الحالة بالذات،
اتضح أن حوالي 16 علامة مختلفة سترتديها في تلك الصفحة هناك.
لذلك، أنا ذاهب واختيار.
لذا، هذا هو المكان الذي أستخدم فيه هذه الطريقة التي تسمى get ثم يمكنني تحديد
فهرس للعنصر المحدد الذي أريده.
لذلك، لقد تحققت إذا نظرت إلى ملف قالب مكونات الرأس،
ستلاحظ أن ثاني علامة في
صفحة HTML لمكون الرأس تشير إلى رابط حول لنا هناك.
لذلك، هذا هو ما أنا الحصول على الوصول إليه من خلال القول الحصول على واحد.
يشير الصفر، بالطبع، إلى الرابط الرئيسي في
مكون الرأس حيث أنشأنا شريط الأدوات لدينا في الأعلى هناك.
لذلك، أحصل على الوصول إلى الثانية لذلك هذا هو الرابط حول هناك.
الآن، بمجرد الحصول على عقد من هذا الرابط،
هناك طريقة أن منقلة يدعمها
على عنصر مع رابط هناك يسمى النقرة.
لذا، هذا، كما ترى برمجيًا،
يؤدي إلى النقر على هذا العنصر المعين في نافذة المتصفح هناك.
لذلك، برمجيا، ونحن تنفيذ ما كنت عادة تنفيذ
يدويا عن طريق الذهاب جسديا إلى هذا الرابط والنقر عليه باستخدام الماوس الخاص بك.
الآن، بمجرد أن نضغط على الرابط، من الواضح
أنك ستنتقل إلى صفحة «نبذة عنا».
الآن، ضمن صفحة معلومات عنا،
إذا ذهبت للبحث في قالب صفحة حول لنا،
ستجد أن هناك عنصر h3 الذي يحتوي على اسم تلك الصفحة.
ضمن هذا العنصر h3،
سترى نصًا يسمى حول الفضاء بنا هناك.
لذا، هذا ما سأفحصه الآن.
السبب في أنني ذاهب للتحقق من ذلك هو التأكد من أنني قد انتقلت حقا إلى
صفحة حول لنا من خلال القيام بهذه الخطوات في بلدي تطبيق الزاوي.
لذا، هذا هو المكان الذي سأستخدم فيه التوقعات.
لقد رأينا بالفعل استخدام توقع ونتوقع الصفحة.
getParraphText وأنا ذاهب للحصول على نص الفقرة من
h3 وهذا أتوقع أن يكون.
لاحظ استخدام بناء جملة الياسمين هنا وهذا يجب أن يكون عنا.
لذلك، إدخال هذا الاختبار الثاني في ملف الاختبار لدينا هنا،
دعونا حفظ التغييرات التي أجريناها ومن ثم الذهاب وتنفيذ هذا الاختبار.
الذهاب إلى المحطة
مرة أخرى، اسمحوا لي أن تنفيذ الاختبار عن طريق قول ng e2e
وسوف تلاحظ أن هذا سوف تذهب مرة أخرى من خلال نفس مجموعة من الخطوات،
ومن ثم تنفيذ كل من الاختبارات التي لدي الآن في ملف الاختبار.
من المثير للاهتمام مشاهدة الاختبار الذي يجري في المتصفح.
لذلك، ترى أننا على الصفحة الرئيسية،
يمكنك الآن الانتقال إلى صفحة حول ثم النجاح.
لذلك، لقد انتقلنا بنجاح من
الصفحة الرئيسية إلى صفحة حول ومن ثم تحققنا من أنك قد
انتقلت إلى صفحة حول عن طريق إجراء
اختبار معين حيث فحصنا للتأكد من أن
نبذة عنا في علامة h3 داخل صفحة حول لنا هناك.
لذلك، هذا هو اختبار واحد آخر من نهاية إلى نهاية يمكننا القيام به،
وكنت في الواقع رأيت الاختبار يجري مباشرة أمام
عينيك دون التدخل اليدوي الخاص بك.
آمل أنك تستمتع بإجراء هذه الإختبارات من النهاية إلى النهاية
دعونا الحصول على أكثر طموحا قليلا.
الآن، ما سنقوم به هو الانتقال إلى طبق معين،
ومن ثم محاولة إدراج تعليق في ذلك الطبق.
الآن، هذا هو المكان الذي سوف تأخذ مساعدة من دعم المنقلة،
وسوف تراني باستخدام بعض الطرق أكثر من
منقلة من أجل الانتقال إلى صفحة الطبق،
ونحن سوف انتقل إلى أول طبق في القائمة لدينا باستخدام
الرابط إلى صفحة تفاصيل الطبق مع المعلمة من ذلك طبق معين
، معرف طبق معين.
بعد ذلك، سنقوم بتحديد عناصر الإدخال في النموذج،
وبعد ذلك سنقوم تلقائيًا بكتابة المعلومات في
عناصر الإدخال هذه ثم نحاول إرسال النموذج ونرى ما يحدث.
لذلك، لتنفيذ هذا الاختبار، مرة أخرى،
انتقل واستخدام بناء الجملة الياسمين،
وسوف أعرض عليه هنا وبعد ذلك سوف تحديد ما يحاول هذا الاختبار القيام به.
أود أن أقول، «يجب أن تدخل تعليقًا جديدًا
للطبق الأول» ووظيفة السهم
وترى أنه داخل وظيفة السهم هذه،
سنقوم بعمل صفحتنا الأولى NavigateTo،
سننتقل إلى dishdetail صفر.
لذا، هذا هو الطبق الأول في قائمتنا.
الآن، بمجرد أن ننتقل إلى صفحة dishdetaille، سنقول،
«دع Newauthor يساوي الصفحة geTelement.»
لذا، سنجد هذا العنصر الذي هو
إدخال وكتابة النص هنا،
لذلك سيساعدني هذا على تحديد عنصر الإدخال هذا حيث يتم
كتابة اسم المؤلف في النموذج الذي أنشأه في صفحة dishdetail الخاصة بنا.
إذا كنت فضوليًا،
فانتقل وألقي نظرة على هذا النموذج،
وبعد ذلك سترى أن هناك بالفعل
عنصر الإدخال في صفحة dishdetaille هذه هناك.
لذا، الوصول إلى ذلك، سأقوم بكتابة اسم المؤلف
في حقل الإدخال هذا هناك.
لذا، هذا هو المكان الذي تأتي فيه طريقة SendKeys المدعومة على عنصرنا إلى مساعدتنا،
طريقة SendKeys المدعومة من قبل المنقلة.
لذا هنا، سأقوم بكتابة اسم المؤلف كمؤلف اختبار.
لذلك، في نهاية هاتين الخطوتين،
يجب كتابة مؤلف الاختبار في عنصر الإدخال في النموذج الخاص بي.
الآن، بالإضافة إلى ذلك، أحتاج أيضًا إلى كتابة التعليق لهذا النموذج.
يمكننا أيضًا إعداد قيمة التصنيف،
لكنني لن أفعل ذلك في هذا الاختبار بالذات،
سأقوم فقط بكتابة قيمة التعليق باستخدام نهج مماثل.
لذلك، سأقول، «السماح نيوكوممنت»،
مرة أخرى، سوف تحصل على الصفحة،
جيتليمنت، ومن ثم هذا هو المكان
الذي أبحث عن تكستاريا و نيوكوممنت،
سيندكيز واكتب في «اختبار التعليق».
لذلك، هذا سوف تملأ الكلمات اختبار التعليق في منطقة النص
التي تحتوي على التعليقات
التي من المفترض أن يقدمها المؤلف لهذا الطبق معين.
بعد ذلك، سوف نجد سوميتبوتون.
لذلك للقيام بذلك، سوف نقول
نوع زر Page.GetElement إرسال،
وبعد ذلك مرة واحدة نحصل على عقد من زر نقول فقط، newSubmitButton.Click.
لذلك، بمجرد النقر على الزر،
سيقوم التعليق بإعادة إرساله.
الآن، سأستخدم طريقة أخرى تدعمها المنقلة.
أنا ذاهب لوقف الاختبار في تلك المرحلة.
سيمكنني هذا من اجتياز الاختبار ثم إجراء الاختبار أو المصنع،
لذلك يقول هذا، المتصفح غير معروف،
لذلك أحتاج إلى العودة إلى هنا ثم استيراد
المتصفح من مكتبة المنقلة هناك،
ثم ترى أن الخط الأحمر المتعرج قد اختفى،
لذلك يجب أن يكون الاختبار الخاص بي بشكل صحيح هناك.
لذلك، اسمحوا لي حفظ التغييرات،
سنذهب وتنفيذ هذا الاختبار الثالث أيضا،
جنبا إلى جنب مع اثنين من الاختبارات المتبقية التي لدينا بالفعل المدخلات.
الذهاب إلى المتصفح، اسمحوا لي مرة أخرى تنفيذ اختبار نهاية إلى نهاية،
عندما يفتح المتصفح، هناك نذهب،
وقد تم إجراء الاختبار الأول والتي يجب أن تنجح،
وقد تم إجراء الاختبار الثاني والاختبار الثالث حيث انتقلنا تفاصيل الطبق،
وترى أن تعليق الاختبار كان المقدمة بشكل صحيح من خلال اختبارنا.
لذلك، مع هذا، ونحن استكمال هذا التمرين.
في هذا التمرين، قمت بإجراء ثلاثة اختبارات مختلفة باستخدام الدعم من
منقلة ووجدت أن تطبيقنا يمر كل هذه الاختبارات الثلاثة من نهاية إلى نهاية.
هذا هو الوقت المناسب لك لحفظ التغييرات في
مستودع Git الخاص بك باستخدام اختبار نهاية إلى نهاية الرسالة.