1
00:00:00,000 --> 00:00:07,245
الآن، أن لدينا فهم سريع

2
00:00:07,245 --> 00:00:10,140
للاختبارات من نهاية إلى نهاية وما الدور الذي

3
00:00:10,140 --> 00:00:15,555
تلعبه الاختبارات من نهاية إلى نهاية في الاستراتيجية الشاملة لاختبار التطبيقات الزاوي.

4
00:00:15,555 --> 00:00:18,929
أيضا، مقدمة موجزة إلى منقلة.

5
00:00:18,929 --> 00:00:22,835
دعونا المضي قدما في التمرين التالي حيث يمكننا توظيف

6
00:00:22,835 --> 00:00:26,825
المنقلة وتصميم اختباراتنا من نهاية إلى نهاية.

7
00:00:26,825 --> 00:00:30,960
من حسن الحظ أن يقوم CLI الزاوي تلقائيًا

8
00:00:30,960 --> 00:00:35,050
بإعداد كل ما نحتاجه لإجراء اختبارات نهاية إلى نهاية،

9
00:00:35,050 --> 00:00:37,935
كما سنرى عندما نمضي في التمرين.

10
00:00:37,935 --> 00:00:43,430
لذلك، هو مسألة تنفيذ الاختبارات المختلفة ومن

11
00:00:43,430 --> 00:00:50,035
ثم إجراء الاختبار باستخدام منقلة في هذا التمرين.

12
00:00:50,035 --> 00:00:53,865
الذهاب إلى تطبيقنا الزاوي في Visual Studio،

13
00:00:53,865 --> 00:00:56,305
إذا نظرتم إلى حزمة ملف JSON الخاص بنا،

14
00:00:56,305 --> 00:00:59,965
سترى أننا نجد بالفعل أن

15
00:00:59,965 --> 00:01:05,640
CLI الزاوي قد أعدت كل ما نحتاجه لإجراء اختبارات نهاية إلى نهاية.

16
00:01:05,640 --> 00:01:07,295
لذلك، أثناء التمرير لأسفل،

17
00:01:07,295 --> 00:01:10,550
سترى أن المنقلة قد تم تثبيتها بالفعل على

18
00:01:10,550 --> 00:01:16,110
جهاز الكمبيوتر الخاص بنا داخل المشروع الزاوي.

19
00:01:16,110 --> 00:01:23,420
أيضا، نلاحظ أن هناك مجلد منفصل هنا

20
00:01:23,420 --> 00:01:26,780
يسمى e2e الذي يحتوي على عدد قليل من الملفات

21
00:01:26,780 --> 00:01:30,350
التي تم إعدادها بالفعل لتنفيذ اختبار نهاية إلى نهاية.

22
00:01:30,350 --> 00:01:33,890
الآن، إذا كنت بحاجة إلى إجراء اختبارات شاملة من النهاية إلى النهاية،

23
00:01:33,890 --> 00:01:36,620
فمن الجيد إنشاء

24
00:01:36,620 --> 00:01:41,985
ملف منفصل لكل مجموعة من الاختبارات من النهاية إلى النهاية التي تريد تنفيذها.

25
00:01:41,985 --> 00:01:43,785
الآن، في هذا التمرين بالذات،

26
00:01:43,785 --> 00:01:47,090
أنا أوضح لكم كيفية إجراء اختبارات نهاية إلى نهاية.

27
00:01:47,090 --> 00:01:51,670
لذلك، أنا ذاهب إلى التمسك مع ما تم بالفعل إعداده من قبل كلي الزاوي.

28
00:01:51,670 --> 00:01:55,710
سنعمل مع الملفات التي لدينا متاحة هناك

29
00:01:55,710 --> 00:02:01,405
لذلك، دعونا نلقي نظرة سريعة على هذين الملفين هنا، app.e2e-spec.ts،

30
00:02:01,405 --> 00:02:09,070
وسترى أن بعض التعليمات البرمجية قد تم بالفعل سقالة في هذا الملف عن طريق الزاوي.

31
00:02:09,070 --> 00:02:14,035
أيضا، هذا الملف الآخر يسمى app.po.ts،

32
00:02:14,035 --> 00:02:17,780
وهذا ليس سوى فئة جافا سكريبت القياسية

33
00:02:17,780 --> 00:02:21,170
التي تم إعدادها مع بعض الطرق هنا.

34
00:02:21,170 --> 00:02:24,380
الآن، ما سنقوم به هو إضافة عدد قليل من الطرق الأخرى إلى

35
00:02:24,380 --> 00:02:31,375
فئة جافا سكريبت هذه وأيضا تحديث بعض هذه الطرق التي يتم تقديمها هنا.

36
00:02:31,375 --> 00:02:40,095
سنقوم بإعداد اختباراتنا في ملف app.e2e-spec.ts.

37
00:02:40,095 --> 00:02:41,860
لذلك، للمضي قدما،

38
00:02:41,860 --> 00:02:44,875
دعونا نذهب إلى التطبيق.

39
00:02:44,875 --> 00:02:49,890
Po.ts، ثم داخل هذا الملف، دعونا تحديث هذا.

40
00:02:49,890 --> 00:02:55,140
لذا، هنا، ترون أن لدينا طريقتين تم إنشاؤهما هنا بالفعل.

41
00:02:55,140 --> 00:03:01,160
سأقوم بتحديث هذه الطرق لتمكينها من أخذ معلمة هنا.

42
00:03:01,160 --> 00:03:05,250
لذلك، سأقول، NavigateTo مع وصلة،

43
00:03:05,250 --> 00:03:06,760
والتي يتم توفيرها كسلسلة،

44
00:03:06,760 --> 00:03:10,970
ثم سأقوم بتحديث هذا المتصفح للحصول

45
00:03:10,970 --> 00:03:15,615
على استخدام الرابط الذي هو المعلمة لهذه الطريقة.

46
00:03:15,615 --> 00:03:17,090
إذاً، ماذا يفعل هذا؟

47
00:03:17,090 --> 00:03:18,330
لذلك، كما ترون،

48
00:03:18,330 --> 00:03:22,490
نحن نستفيد من بناء الجملة المنقلة هنا.

49
00:03:22,490 --> 00:03:26,450
لذلك، هذا يقول عودة المتصفح الحصول على رابط.

50
00:03:26,450 --> 00:03:32,075
لذا، فإن هذه المكالمة الخاصة إلى طريقة الحصول على المتصفح هذه ستمكن

51
00:03:32,075 --> 00:03:41,440
تطبيقنا من التصفح إلى هذا الرابط المحدد الذي يتم توفيره كمعلمة هنا.

52
00:03:41,440 --> 00:03:43,650
لذلك، قبل هذا التحديث،

53
00:03:43,650 --> 00:03:47,200
رأيت أن الرابط المقدم هنا كان مائل،

54
00:03:47,200 --> 00:03:50,595
مما يعني أن جذر التطبيق الزاوي لدينا.

55
00:03:50,595 --> 00:03:54,650
الآن، لقد قمت بتحديث هذا لأخذ معلمة هنا.

56
00:03:54,650 --> 00:04:00,490
وبالمثل، فإن الطريقة الثانية التي تراها تسمى getParagraphText.

57
00:04:00,490 --> 00:04:08,685
الآن، يتم استخدام هذه الطريقة للحصول على المحتوى الداخلي لعنصر HTML هنا.

58
00:04:08,685 --> 00:04:11,680
لذلك، لهذا، أيضا،

59
00:04:11,680 --> 00:04:14,770
سوف أقوم بإعداد معلمة تسمى محدد،

60
00:04:14,770 --> 00:04:20,260
وهو محدد CSS سأقوم بتوفيره هنا.

61
00:04:20,260 --> 00:04:22,430
لذلك، ترى أنه هنا،

62
00:04:22,430 --> 00:04:28,775
سأقوم بتغيير هذا لاتخاذ المحدد كمعلمة.

63
00:04:28,775 --> 00:04:32,885
الآن، من التجربة السابقة مع اختبار الوحدة،

64
00:04:32,885 --> 00:04:37,285
ترى ما بواسطة and.css تقف ل.

65
00:04:37,285 --> 00:04:40,130
هذا هو نفس الشيء الذي نستخدمه هنا أيضا.

66
00:04:40,130 --> 00:04:47,820
يتم استيراد هذا عن طريق الطريقة هنا المستخدمة الآن من مكتبة المنقلة هنا.

67
00:04:47,820 --> 00:04:52,610
يتم استيراد طريقة العنصر أيضا من مكتبة المنقلة.

68
00:04:52,610 --> 00:04:56,915
لذلك، تسمح لك طريقة العنصر هذه بالوصول إلى عنصر HTML

69
00:04:56,915 --> 00:05:02,510
من خلال توفير هذا التحديد لعنصر HTML كمعلمة هنا.

70
00:05:02,510 --> 00:05:05,760
لذلك، يمكنك أن تقول بواسطة css

71
00:05:05,760 --> 00:05:11,855
و byId، والعديد من الطرق الأخرى المتاحة للفئة هنا.

72
00:05:11,855 --> 00:05:13,935
ثم، فإن طريقة getText،

73
00:05:13,935 --> 00:05:19,580
يحصل كما نرى النص الداخلي المرئي لهذا العنصر بالذات.

74
00:05:19,580 --> 00:05:22,985
لذلك، هذه طريقة واحدة لاسترداد المعلومات من

75
00:05:22,985 --> 00:05:28,520
عنصر HTML معين داخل نافذة المتصفح لدينا،

76
00:05:28,520 --> 00:05:33,780
ثم تحقق لمعرفة ما إذا كان يتطابق مع نمط نحدده هنا.

77
00:05:33,780 --> 00:05:37,035
لذلك، مع هذا التحديث إلى app.po.ts،

78
00:05:37,035 --> 00:05:43,060
دعونا ننتقل إلى ملف app.e2e-spec.ts.

79
00:05:43,060 --> 00:05:44,755
لذلك، ضمن هذا الملف،

80
00:05:44,755 --> 00:05:48,630
ستلاحظ أننا نستخدم بناء جملة الياسمين.

81
00:05:48,630 --> 00:05:54,730
لذلك، هنا، تراني باستخدام وصف ثم الذي يقول السماح صفحة AppPage.

82
00:05:54,730 --> 00:06:01,725
لذا، هنا، الصفحة هي المكان الذي نقوم فيه بإنشاء هذه الفئة الجديدة التي تسمى AppPage،

83
00:06:01,725 --> 00:06:08,330
والتي أعلناها في ملف app.po.ts كفئة جافا سكريبت هنا.

84
00:06:08,330 --> 00:06:13,540
الآن، هذه مجرد طريقة مريحة لإعداد جميع الأشياء في موقع واحد،

85
00:06:13,540 --> 00:06:18,950
ومن ثم القدرة على الاستفادة منها في رمز الاختبار الخاص بي نفسه.

86
00:06:18,950 --> 00:06:24,445
لذلك، هنا، أنا أعلن الصفحة للإشارة إلى هذا AppPage،

87
00:06:24,445 --> 00:06:26,809
وبذلك سيمكنني من الوصول إلى

88
00:06:26,809 --> 00:06:30,230
الطرق التي قمت بإنشائها في هذا الفصل هنا.

89
00:06:30,230 --> 00:06:37,680
لذا، فإن الاختبار الأول الذي سأقوم به هو الانتقال إلى

90
00:06:37,680 --> 00:06:42,140
جذر تطبيقي الزاوي

91
00:06:42,140 --> 00:06:46,440
ثم التحقق لمعرفة ما إذا كان هناك نمط معين في ذلك.

92
00:06:46,440 --> 00:06:51,375
ستلاحظ أنه في صفحتي الرئيسية،

93
00:06:51,375 --> 00:06:56,170
سيكون لديك السلسلة

94
00:06:56,170 --> 00:07:03,550
المسماة Ristorante Con Fusion

95
00:07:03,550 --> 00:07:06,480
داخل عنصر H1 في صفحتي.

96
00:07:06,480 --> 00:07:14,370
لذا، ما سأقوم به هو الانتقال إلى جذر عنصر HTML الخاص بي.

97
00:07:14,370 --> 00:07:18,340
ثم، في هناك، سأذهب للبحث

98
00:07:18,340 --> 00:07:23,955
عن مسار التطبيق ثم ابحث عن علامة H1 داخل مسار التطبيق.

99
00:07:23,955 --> 00:07:28,210
ثم، يجب أن يساوي هذا السلسلة المعينة هنا.

100
00:07:28,210 --> 00:07:29,620
لذلك، أنا فقط ذاهب لنسخ

101
00:07:29,620 --> 00:07:34,530
سلسلة ريستورانتي كون فيوجن هناك ومن ثم توفير ذلك كمعلمة هنا.

102
00:07:34,530 --> 00:07:37,000
لذلك، أنا فقط تحديث الاختبار للتحقق من

103
00:07:37,000 --> 00:07:41,585
بالضبط ما لدينا في التطبيق الزاوي المحدث لدينا.

104
00:07:41,585 --> 00:07:43,200
لذلك، مع هذا الإعداد،

105
00:07:43,200 --> 00:07:48,860
والآن أنا ذاهب لتنفيذ أول اختبار بلدي من بلدي التطبيق الزاوي.

106
00:07:48,860 --> 00:07:55,454
لذلك، دعونا حفظ جميع التغييرات ومن ثم نعود إلى محطة لدينا.

107
00:07:55,454 --> 00:08:00,715
داخل المحطة، في مجلد المشروع الخاص بي،

108
00:08:00,715 --> 00:08:05,965
في موجه سوف اكتب ng e2e.

109
00:08:05,965 --> 00:08:11,010
ستلاحظ أن هذا سيبدأ متصفح.

110
00:08:11,010 --> 00:08:19,445
في حالتي، سيبدأ نافذة Chrome ثم إجراء الاختبار في تلك النافذة.

111
00:08:19,445 --> 00:08:21,710
لذلك، دعونا إجراء الاختبار الأول.

112
00:08:21,710 --> 00:08:27,100
سترى أنه عندما يتم تشغيل الاختبار بعد تجميع التطبيق الزاوي الخاص بي

113
00:08:27,100 --> 00:08:28,705
، عند تشغيل الاختبار،

114
00:08:28,705 --> 00:08:33,725
فإنه سيضمن نجاح الاختبار.

115
00:08:33,725 --> 00:08:36,295
ترى أنه في الجزء الخلفي،

116
00:08:36,295 --> 00:08:42,055
يتم فتح المتصفح الخاص بي بواسطة ng e2e،

117
00:08:42,055 --> 00:08:46,880
ثم تم إجراء الاختبار في نافذة المتصفح تلك.

118
00:08:46,880 --> 00:08:52,025
وتقول أن الاختبار تم بنجاح هنا.

119
00:08:52,025 --> 00:08:54,390
لذلك، لاحظت أنه حتى في هذه الحالة،

120
00:08:54,390 --> 00:08:56,485
فإنه يحتاج إلى بدء تشغيل المتصفح،

121
00:08:56,485 --> 00:08:59,310
تحميل في التطبيق الزاوي الخاص بي في المتصفح،

122
00:08:59,310 --> 00:09:02,370
التطبيق الزاوي بأكمله في المتصفح.

123
00:09:02,370 --> 00:09:07,210
ثم، تنفيذ الاختبار قبالة بلدي التطبيق الزاوي.

124
00:09:07,210 --> 00:09:12,595
عند هذه النقطة، تأكد من أن الخادم الخاص بك،

125
00:09:12,595 --> 00:09:16,510
خادم JSON قيد التشغيل

126
00:09:16,510 --> 00:09:18,915
وتشغيله، وإلا، سيفشل الاختبار، لأنه عندما يتم إجراء الاختبار،

127
00:09:18,915 --> 00:09:22,140
سيحاول الوصول إلى خادم JSON أيضًا.

128
00:09:22,140 --> 00:09:25,300
لذلك، هذا شيء تحتاج إلى ضمان.

129
00:09:25,300 --> 00:09:28,035
أستمر في إختباراتنا

130
00:09:28,035 --> 00:09:29,915
في الخطوة الثانية،

131
00:09:29,915 --> 00:09:35,290
ونحن في طريقنا لإضافة في بضع طرق أخرى في هذا AppPage.

132
00:09:35,290 --> 00:09:41,330
الصف هنا لذلك، أود استخدام طريقة جديدة

133
00:09:41,330 --> 00:09:50,730
تسمى GetElement ثم أخذ معلمة من محدد.

134
00:09:51,160 --> 00:09:58,520
تسمح لي هذه الطريقة بالوصول إلى العنصر،

135
00:09:58,520 --> 00:10:04,500
الذي يتم تحديده باستخدام نفسه بواسطة محدد CSS.

136
00:10:04,500 --> 00:10:06,545
لذلك، أنا فقط ذاهب لنسخ هذا.

137
00:10:06,545 --> 00:10:09,785
لذلك، في هذه الحالة، بدلا من مجرد الحصول على النص،

138
00:10:09,785 --> 00:10:13,750
فإنه سيتم بالفعل إرجاع المرجع إلى العنصر نفسه،

139
00:10:13,750 --> 00:10:17,290
وبعد ذلك بحيث يمكنك إضافة بطرق إضافية

140
00:10:17,290 --> 00:10:20,910
للوصول إلى المعلومات داخل هذا العنصر كما نطلبه.

141
00:10:20,910 --> 00:10:25,340
في هذه الحالة، يتم استخدام النص الحصول على فقط لجلب النص المحدد.

142
00:10:25,340 --> 00:10:28,470
قد نستخدم أساليب أخرى على

143
00:10:28,470 --> 00:10:31,520
هذا العنصر لجلب معلومات إضافية من تلك العناصر.

144
00:10:31,520 --> 00:10:37,220
لذلك، هذا هو السبب في أنني خلق هذه الطريقة هنا.

145
00:10:37,220 --> 00:10:45,595
وبالمثل، سأقوم بتنفيذ طريقة أخرى تسمى الحصول على جميع العناصر.

146
00:10:45,595 --> 00:10:52,040
الآن، يستخدم هذا أيضًا معلمة تسمى محدد تمامًا كما كان من قبل.

147
00:10:52,040 --> 00:10:56,115
ما تفعله طريقة getAll هو تحديد

148
00:10:56,115 --> 00:11:01,910
جميع العناصر ثم إعادتها إلى طوق،

149
00:11:01,910 --> 00:11:03,720
بحيث، على سبيل المثال،

150
00:11:03,720 --> 00:11:08,310
إذا كانت صفحتك تحتوي على العديد من عناصر h1

151
00:11:08,310 --> 00:11:12,990
بالإشارة إلى كل منهم سيتم إرجاعها إلى طوق بلدي.

152
00:11:12,990 --> 00:11:16,790
لذلك، هناك، يمكنني بعد ذلك أن تقرر إجراء

153
00:11:16,790 --> 00:11:20,940
مكالمة إلى واحدة محددة ضمن هذه القائمة من العناصر.

154
00:11:20,940 --> 00:11:22,505
لذلك، للقيام بذلك،

155
00:11:22,505 --> 00:11:25,525
سوف نستخدم نفس العودة ولكن هنا،

156
00:11:25,525 --> 00:11:28,395
بدلا من قول محدد العنصر،

157
00:11:28,395 --> 00:11:33,165
اسمحوا لي فقط نسخ ذلك وبعد ذلك لدينا طريقة أخرى تسمى

158
00:11:33,165 --> 00:11:37,340
element.all والتي تسمح لنا

159
00:11:37,340 --> 00:11:41,750
بالوصول إلى جميع العناصر التي تطابق هذا المحدد معين.

160
00:11:41,750 --> 00:11:45,790
أول واحد سيعود العنصر الأول الذي يطابق هذا المحدد.

161
00:11:45,790 --> 00:11:55,805
بعد هذه التحديثات، سنقوم الآن بالتبديل إلى ملف الاختبار الخاص بنا وإضافة اختبار جديد هنا.

162
00:11:55,805 --> 00:12:01,755
لذا، هنا مرة أخرى، أستخدم بناء جملة الياسمين لإضافة الاختبار الجديد هنا.

163
00:12:01,755 --> 00:12:06,980
لذلك، سأقول ذلك ومن ثم إعطاء وصف لهذا الاختبار.

164
00:12:06,980 --> 00:12:13,510
سوف أقول أنه يجب الانتقال إلى

165
00:12:13,510 --> 00:12:22,645
صفحة عنا عن طريق النقر على الرابط.

166
00:12:22,645 --> 00:12:25,705
الآن، إذا نظرت إلى تطبيق Angular الخاص

167
00:12:25,705 --> 00:12:28,530
بك، فستلاحظ أنه ضمن تطبيق Angular الخاص بك،

168
00:12:28,530 --> 00:12:36,735
لديك روابط التنقل في أعلى الصفحة.

169
00:12:36,735 --> 00:12:40,680
لذلك، ما سنقوم به في هذا الاختبار هو

170
00:12:40,680 --> 00:12:45,500
الذهاب تلقائيا والوصول إلى واحدة من تلك الروابط الملاحة والنقر عليها.

171
00:12:45,500 --> 00:12:49,545
الآن، بالطبع، كما تتوقع أن يتم ذلك برمجيًا،

172
00:12:49,545 --> 00:12:54,320
بدلاً من النقر يدويًا على الرابط.

173
00:12:54,320 --> 00:12:55,630
لذلك، للقيام بذلك،

174
00:12:55,630 --> 00:13:05,325
ما سأقوم به هو الانتقال إلى جذر تطبيق Angular الخاص بي وبعد ذلك،

175
00:13:05,325 --> 00:13:08,490
سأذهب للوصول إلى

176
00:13:15,040 --> 00:13:23,430
الروابط في شريط التنقل الخاص بي في الأعلى.

177
00:13:23,430 --> 00:13:27,850
بقول الصفحة، GetallElements

178
00:13:27,850 --> 00:13:32,815
ثم سأحصل على جميع العناصر التي تحتوي على علامة هناك.

179
00:13:32,815 --> 00:13:40,994
الآن من الواضح، سيكون لديك العديد من تلك العلامات في صفحتنا ولكن الأربعة الأوائل،

180
00:13:40,994 --> 00:13:44,950
هي الروابط الأربعة في

181
00:13:44,950 --> 00:13:52,100
شريط التنقل في الجزء العلوي من صفحتنا هناك في مكون الرأس.

182
00:13:52,100 --> 00:13:54,420
لذلك، الحصول على الوصول إلى

183
00:13:54,420 --> 00:14:00,710
تلك لاحظ الآن أنني باستخدام الحصول على جميع العناصر لذلك أنا ذاهب للحصول على عدد من العناصر.

184
00:14:00,710 --> 00:14:01,770
في هذه الحالة بالذات،

185
00:14:01,770 --> 00:14:07,850
اتضح أن حوالي 16 علامة مختلفة سترتديها في تلك الصفحة هناك.

186
00:14:07,850 --> 00:14:10,640
لذلك، أنا ذاهب واختيار.

187
00:14:10,640 --> 00:14:15,800
لذا، هذا هو المكان الذي أستخدم فيه هذه الطريقة التي تسمى get ثم يمكنني تحديد

188
00:14:15,800 --> 00:14:20,490
فهرس للعنصر المحدد الذي أريده.

189
00:14:20,490 --> 00:14:26,460
لذلك، لقد تحققت إذا نظرت إلى ملف قالب مكونات الرأس،

190
00:14:26,460 --> 00:14:30,840
ستلاحظ أن ثاني علامة في

191
00:14:30,840 --> 00:14:38,950
صفحة HTML لمكون الرأس تشير إلى رابط حول لنا هناك.

192
00:14:38,950 --> 00:14:42,905
لذلك، هذا هو ما أنا الحصول على الوصول إليه من خلال القول الحصول على واحد.

193
00:14:42,905 --> 00:14:46,410
يشير الصفر، بالطبع، إلى الرابط الرئيسي في

194
00:14:46,410 --> 00:14:51,155
مكون الرأس حيث أنشأنا شريط الأدوات لدينا في الأعلى هناك.

195
00:14:51,155 --> 00:14:55,745
لذلك، أحصل على الوصول إلى الثانية لذلك هذا هو الرابط حول هناك.

196
00:14:55,745 --> 00:14:59,100
الآن، بمجرد الحصول على عقد من هذا الرابط،

197
00:14:59,100 --> 00:15:03,030
هناك طريقة أن منقلة يدعمها

198
00:15:03,030 --> 00:15:08,045
على عنصر مع رابط هناك يسمى النقرة.

199
00:15:08,045 --> 00:15:11,335
لذا، هذا، كما ترى برمجيًا،

200
00:15:11,335 --> 00:15:17,160
يؤدي إلى النقر على هذا العنصر المعين في نافذة المتصفح هناك.

201
00:15:17,160 --> 00:15:21,840
لذلك، برمجيا، ونحن تنفيذ ما كنت عادة تنفيذ

202
00:15:21,840 --> 00:15:27,160
يدويا عن طريق الذهاب جسديا إلى هذا الرابط والنقر عليه باستخدام الماوس الخاص بك.

203
00:15:27,160 --> 00:15:29,790
الآن، بمجرد أن نضغط على الرابط، من الواضح

204
00:15:29,790 --> 00:15:33,400
أنك ستنتقل إلى صفحة «نبذة عنا».

205
00:15:33,400 --> 00:15:35,020
الآن، ضمن صفحة معلومات عنا،

206
00:15:35,020 --> 00:15:37,780
إذا ذهبت للبحث في قالب صفحة حول لنا،

207
00:15:37,780 --> 00:15:45,105
ستجد أن هناك عنصر h3 الذي يحتوي على اسم تلك الصفحة.

208
00:15:45,105 --> 00:15:46,810
ضمن هذا العنصر h3،

209
00:15:46,810 --> 00:15:51,640
سترى نصًا يسمى حول الفضاء بنا هناك.

210
00:15:51,640 --> 00:15:53,990
لذا، هذا ما سأفحصه الآن.

211
00:15:53,990 --> 00:15:58,440
السبب في أنني ذاهب للتحقق من ذلك هو التأكد من أنني قد انتقلت حقا إلى

212
00:15:58,440 --> 00:16:04,200
صفحة حول لنا من خلال القيام بهذه الخطوات في بلدي تطبيق الزاوي.

213
00:16:04,200 --> 00:16:07,685
لذا، هذا هو المكان الذي سأستخدم فيه التوقعات.

214
00:16:07,685 --> 00:16:14,375
لقد رأينا بالفعل استخدام توقع ونتوقع الصفحة.

215
00:16:14,375 --> 00:16:18,990
getParraphText وأنا ذاهب للحصول على نص الفقرة من

216
00:16:18,990 --> 00:16:25,365
h3 وهذا أتوقع أن يكون.

217
00:16:25,365 --> 00:16:33,430
لاحظ استخدام بناء جملة الياسمين هنا وهذا يجب أن يكون عنا.

218
00:16:34,460 --> 00:16:42,895
لذلك، إدخال هذا الاختبار الثاني في ملف الاختبار لدينا هنا،

219
00:16:42,895 --> 00:16:48,950
دعونا حفظ التغييرات التي أجريناها ومن ثم الذهاب وتنفيذ هذا الاختبار.

220
00:16:49,510 --> 00:16:52,915
الذهاب إلى المحطة

221
00:16:52,915 --> 00:16:57,680
مرة أخرى، اسمحوا لي أن تنفيذ الاختبار عن طريق قول ng e2e

222
00:16:57,680 --> 00:17:03,220
وسوف تلاحظ أن هذا سوف تذهب مرة أخرى من خلال نفس مجموعة من الخطوات،

223
00:17:03,220 --> 00:17:09,880
ومن ثم تنفيذ كل من الاختبارات التي لدي الآن في ملف الاختبار.

224
00:17:09,880 --> 00:17:15,110
من المثير للاهتمام مشاهدة الاختبار الذي يجري في المتصفح.

225
00:17:15,110 --> 00:17:17,390
لذلك، ترى أننا على الصفحة الرئيسية،

226
00:17:17,390 --> 00:17:22,595
يمكنك الآن الانتقال إلى صفحة حول ثم النجاح.

227
00:17:22,595 --> 00:17:25,840
لذلك، لقد انتقلنا بنجاح من

228
00:17:25,840 --> 00:17:29,290
الصفحة الرئيسية إلى صفحة حول ومن ثم تحققنا من أنك قد

229
00:17:29,290 --> 00:17:31,450
انتقلت إلى صفحة حول عن طريق إجراء

230
00:17:31,450 --> 00:17:34,250
اختبار معين حيث فحصنا للتأكد من أن

231
00:17:34,250 --> 00:17:39,515
نبذة عنا في علامة h3 داخل صفحة حول لنا هناك.

232
00:17:39,515 --> 00:17:43,270
لذلك، هذا هو اختبار واحد آخر من نهاية إلى نهاية يمكننا القيام به،

233
00:17:43,270 --> 00:17:46,320
وكنت في الواقع رأيت الاختبار يجري مباشرة أمام

234
00:17:46,320 --> 00:17:49,855
عينيك دون التدخل اليدوي الخاص بك.

235
00:17:49,855 --> 00:17:53,840
آمل أنك تستمتع بإجراء هذه الإختبارات من النهاية إلى النهاية

236
00:17:53,840 --> 00:17:55,725
دعونا الحصول على أكثر طموحا قليلا.

237
00:17:55,725 --> 00:18:00,280
الآن، ما سنقوم به هو الانتقال إلى طبق معين،

238
00:18:00,280 --> 00:18:04,615
ومن ثم محاولة إدراج تعليق في ذلك الطبق.

239
00:18:04,615 --> 00:18:09,155
الآن، هذا هو المكان الذي سوف تأخذ مساعدة من دعم المنقلة،

240
00:18:09,155 --> 00:18:13,020
وسوف تراني باستخدام بعض الطرق أكثر من

241
00:18:13,020 --> 00:18:17,675
منقلة من أجل الانتقال إلى صفحة الطبق،

242
00:18:17,675 --> 00:18:23,570
ونحن سوف انتقل إلى أول طبق في القائمة لدينا باستخدام

243
00:18:23,570 --> 00:18:30,185
الرابط إلى صفحة تفاصيل الطبق مع المعلمة من ذلك طبق معين

244
00:18:30,185 --> 00:18:31,995
، معرف طبق معين.

245
00:18:31,995 --> 00:18:39,385
بعد ذلك، سنقوم بتحديد عناصر الإدخال في النموذج،

246
00:18:39,385 --> 00:18:42,990
وبعد ذلك سنقوم تلقائيًا بكتابة المعلومات في

247
00:18:42,990 --> 00:18:47,425
عناصر الإدخال هذه ثم نحاول إرسال النموذج ونرى ما يحدث.

248
00:18:47,425 --> 00:18:49,975
لذلك، لتنفيذ هذا الاختبار، مرة أخرى،

249
00:18:49,975 --> 00:18:52,830
انتقل واستخدام بناء الجملة الياسمين،

250
00:18:52,830 --> 00:18:59,595
وسوف أعرض عليه هنا وبعد ذلك سوف تحديد ما يحاول هذا الاختبار القيام به.

251
00:18:59,595 --> 00:19:07,904
أود أن أقول، «يجب أن تدخل تعليقًا جديدًا

252
00:19:07,904 --> 00:19:15,470
للطبق الأول» ووظيفة السهم

253
00:19:15,470 --> 00:19:20,450
وترى أنه داخل وظيفة السهم هذه،

254
00:19:20,450 --> 00:19:27,985
سنقوم بعمل صفحتنا الأولى NavigateTo،

255
00:19:27,985 --> 00:19:35,660
سننتقل إلى dishdetail صفر.

256
00:19:35,660 --> 00:19:39,235
لذا، هذا هو الطبق الأول في قائمتنا.

257
00:19:39,235 --> 00:19:43,060
الآن، بمجرد أن ننتقل إلى صفحة dishdetaille، سنقول،

258
00:19:43,060 --> 00:19:52,030
«دع Newauthor يساوي الصفحة geTelement.»

259
00:19:52,030 --> 00:19:56,860
لذا، سنجد هذا العنصر الذي هو

260
00:19:56,860 --> 00:20:03,990
إدخال وكتابة النص هنا،

261
00:20:03,990 --> 00:20:10,010
لذلك سيساعدني هذا على تحديد عنصر الإدخال هذا حيث يتم

262
00:20:10,010 --> 00:20:17,115
كتابة اسم المؤلف في النموذج الذي أنشأه في صفحة dishdetail الخاصة بنا.

263
00:20:17,115 --> 00:20:19,885
إذا كنت فضوليًا،

264
00:20:19,885 --> 00:20:21,380
فانتقل وألقي نظرة على هذا النموذج،

265
00:20:21,380 --> 00:20:23,645
وبعد ذلك سترى أن هناك بالفعل

266
00:20:23,645 --> 00:20:27,730
عنصر الإدخال في صفحة dishdetaille هذه هناك.

267
00:20:27,730 --> 00:20:33,700
لذا، الوصول إلى ذلك، سأقوم بكتابة اسم المؤلف

268
00:20:33,700 --> 00:20:39,890
في حقل الإدخال هذا هناك.

269
00:20:39,890 --> 00:20:47,590
لذا، هذا هو المكان الذي تأتي فيه طريقة SendKeys المدعومة على عنصرنا إلى مساعدتنا،

270
00:20:47,590 --> 00:20:50,170
طريقة SendKeys المدعومة من قبل المنقلة.

271
00:20:50,170 --> 00:20:56,805
لذا هنا، سأقوم بكتابة اسم المؤلف كمؤلف اختبار.

272
00:20:56,805 --> 00:21:01,750
لذلك، في نهاية هاتين الخطوتين،

273
00:21:01,750 --> 00:21:07,105
يجب كتابة مؤلف الاختبار في عنصر الإدخال في النموذج الخاص بي.

274
00:21:07,105 --> 00:21:11,475
الآن، بالإضافة إلى ذلك، أحتاج أيضًا إلى كتابة التعليق لهذا النموذج.

275
00:21:11,475 --> 00:21:14,660
يمكننا أيضًا إعداد قيمة التصنيف،

276
00:21:14,660 --> 00:21:16,770
لكنني لن أفعل ذلك في هذا الاختبار بالذات،

277
00:21:16,770 --> 00:21:21,530
سأقوم فقط بكتابة قيمة التعليق باستخدام نهج مماثل.

278
00:21:21,530 --> 00:21:26,250
لذلك، سأقول، «السماح نيوكوممنت»،

279
00:21:26,250 --> 00:21:29,650
مرة أخرى، سوف تحصل على الصفحة،

280
00:21:29,660 --> 00:21:34,690
جيتليمنت، ومن ثم هذا هو المكان

281
00:21:34,690 --> 00:21:42,080
الذي أبحث عن تكستاريا و نيوكوممنت،

282
00:21:43,170 --> 00:21:52,340
سيندكيز واكتب في «اختبار التعليق».

283
00:21:52,650 --> 00:21:59,990
لذلك، هذا سوف تملأ الكلمات اختبار التعليق في منطقة النص

284
00:21:59,990 --> 00:22:02,380
التي تحتوي على التعليقات

285
00:22:02,380 --> 00:22:07,130
التي من المفترض أن يقدمها المؤلف لهذا الطبق معين.

286
00:22:07,130 --> 00:22:12,530
بعد ذلك، سوف نجد سوميتبوتون.

287
00:22:12,990 --> 00:22:15,430
لذلك للقيام بذلك، سوف نقول

288
00:22:15,430 --> 00:22:33,050
نوع زر Page.GetElement إرسال،

289
00:22:33,570 --> 00:22:44,390
وبعد ذلك مرة واحدة نحصل على عقد من زر نقول فقط، newSubmitButton.Click.

290
00:22:44,390 --> 00:22:46,330
لذلك، بمجرد النقر على الزر،

291
00:22:46,330 --> 00:22:48,610
سيقوم التعليق بإعادة إرساله.

292
00:22:48,610 --> 00:22:55,930
الآن، سأستخدم طريقة أخرى تدعمها المنقلة.

293
00:22:55,930 --> 00:23:00,200
أنا ذاهب لوقف الاختبار في تلك المرحلة.

294
00:23:00,200 --> 00:23:06,170
سيمكنني هذا من اجتياز الاختبار ثم إجراء الاختبار أو المصنع،

295
00:23:06,170 --> 00:23:09,160
لذلك يقول هذا، المتصفح غير معروف،

296
00:23:09,160 --> 00:23:14,210
لذلك أحتاج إلى العودة إلى هنا ثم استيراد

297
00:23:18,930 --> 00:23:32,155
المتصفح من مكتبة المنقلة هناك،

298
00:23:32,155 --> 00:23:35,840
ثم ترى أن الخط الأحمر المتعرج قد اختفى،

299
00:23:35,840 --> 00:23:39,175
لذلك يجب أن يكون الاختبار الخاص بي بشكل صحيح هناك.

300
00:23:39,175 --> 00:23:40,935
لذلك، اسمحوا لي حفظ التغييرات،

301
00:23:40,935 --> 00:23:44,320
سنذهب وتنفيذ هذا الاختبار الثالث أيضا،

302
00:23:44,320 --> 00:23:48,505
جنبا إلى جنب مع اثنين من الاختبارات المتبقية التي لدينا بالفعل المدخلات.

303
00:23:48,505 --> 00:23:54,375
الذهاب إلى المتصفح، اسمحوا لي مرة أخرى تنفيذ اختبار نهاية إلى نهاية،

304
00:23:54,375 --> 00:23:57,765
عندما يفتح المتصفح، هناك نذهب،

305
00:23:57,765 --> 00:24:02,810
وقد تم إجراء الاختبار الأول والتي يجب أن تنجح،

306
00:24:02,810 --> 00:24:08,780
وقد تم إجراء الاختبار الثاني والاختبار الثالث حيث انتقلنا تفاصيل الطبق،

307
00:24:08,780 --> 00:24:18,145
وترى أن تعليق الاختبار كان المقدمة بشكل صحيح من خلال اختبارنا.

308
00:24:18,145 --> 00:24:21,195
لذلك، مع هذا، ونحن استكمال هذا التمرين.

309
00:24:21,195 --> 00:24:27,730
في هذا التمرين، قمت بإجراء ثلاثة اختبارات مختلفة باستخدام الدعم من

310
00:24:27,730 --> 00:24:35,430
منقلة ووجدت أن تطبيقنا يمر كل هذه الاختبارات الثلاثة من نهاية إلى نهاية.

311
00:24:35,430 --> 00:24:39,075
هذا هو الوقت المناسب لك لحفظ التغييرات في

312
00:24:39,075 --> 00:24:46,420
مستودع Git الخاص بك باستخدام اختبار نهاية إلى نهاية الرسالة.