لقد ذهبت مؤخرًا إلى chatGPT وسألت عن بعض تمارين الأتمتة الجيدة التي يمكن أن تكون موجودة، بعد فترة من العمل على نفس النظام، أو توفير الأتمتة لنوع معين من تدفقات المستخدم، نحن يمكن أن ينتهي الأمر بنسيان بعض الأشياء، لذلك سألت عن بعض المواقع التي يمكنني ممارستها ووجدت الإنترنت.
وعلى الرغم من أن الموقع قد يبدو بدائيًا، إلا أنه لا يزال يوفر لك مكانًا لتجربة بعض الأتمتة، وفي الوقت الحالي، كان هذا هو كل ما أحتاجه. لقد أمضيت بعض الوقت وتعاملت مع بعض تحديات الويب الكلاسيكية باستخدام Cypress.
لذلك، دون مزيد من اللغط، دعونا نتعمق في بعض السيناريوهات التي قمت بتشغيلها آليًا، ونغطي كل شيء بدءًا من الأزرار التي تأتي وتذهب مثل السحر، والسحب والإفلات الغريب، والأتمتة المتعلقة بالملفات وبعض أعمال Shadow DOM السريعة!

1. السحب والإسقاط: إذا سبق لك أن حاولت إجراء عملية السحب والإفلات تلقائيًا، فأنت تعلم أن الأمر ليس بهذه البساطة كما يبدو. على الرغم من أن Cypress يتمتع بدعم أصلي لبعض التفاعلات (وقد جربت ذلك بالفعل)، إلا أن الأمر لا يزال يتطلب بعض الإبداع لإجراء اختبار السحب والإفلات هنا.

في هذه الحالة، قمت بتجربة أمر السحب والإسقاط المخصص، باستخدام الزناد ('mousedown')، الزناد ('dragover')، والزناد ('mouseup'). نظرًا للطريقة التي تم بها تنفيذ الوظيفة على هذا الموقع، اضطررت إلى البحث بشكل أعمق قليلاً حتى تعمل هذه الاختبارات، ولكن يبدو أنه بالنسبة لمعظم التطبيقات الحديثة، يجب أن يكون مكون cypress الإضافي كافيًا (لحسن الحظ).

1. إضافة/إزالة العناصر:

زر "إضافة عنصر" في هذا التمرين بسيط من الناحية النظرية، ولكن من المضحك كيف يحاول هذا الملعب العبث بتوقعاتك في بعض الأحيان، هاها. انقر فوقه مرة واحدة، وبعد ذلك... يظهر زر الحذف (وهو ليس أمرًا بديهيًا للغاية ولكن حسنًا، عليك فقط التعامل معه). الحيلة هي التأكد من أننا نتعامل مع رقصة الإضافة والإزالة بطريقة مستقرة وقابلة للتكرار في اختباراتنا. باستخدام Cypress، نتحقق من ظهور الزر، ونضيف بضعة أزرار أخرى، ثم نزيلها واحدًا تلو الآخر، لضمان عدم حدوث أي خلل في التسلسل.

نصيحة احترافية:
قد يكون تتبع العناصر التي تظهر وتختفي أمرًا صعبًا، لكن تأكيدات Cypress .should('exist') و .should('not.exist') تتعامل مع هذا جيدًا. بالإضافة إلى ذلك، ستحصل على تأكيد مرئي رائع في كل مرة.

1. المحتوى الديناميكي:

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

يمكن لـ Cypress التأكد من تحميل العناصر كما هو متوقع دون الانتقائية بشأن المحتوى الفعلي، مما يحافظ على مرونة الاختبارات.

1. عناصر التحكم الديناميكية:

بالنسبة لهذا، تظهر أو تختفي عناصر التحكم مثل مربعات الاختيار والأزرار بناءً على تفاعل المستخدم. يتطلب البعض انتظار اختفاء مؤشر التحميل. هنا، يعد cy.wait و.should('be.visible') الخاص بـ Cypress أمرًا أساسيًا.

نصيحة سريعة:

بدلاً من الانتظار المضمن، استخدم التأكيدات مثل .should('exist') و .should('be.disabled') للتفاعل مع حالة الصفحة. وهذا يجعل الاختبارات أكثر قوة وقدرة على التكيف.

1. تحميل الملف:

قد يبدو تنزيل ملف أمرًا بسيطًا حتى يتعين عليك إثبات حدوثه بالفعل. مع Cypress، هناك أشياء مختلفة يمكننا القيام بها للتأكد من تنزيل الملف فعليًا.

يمكننا القيام بأشياء مختلفة للتأكد من اكتمال التنزيل، بالنسبة لهذا التطبيق، لقد تأكدت للتو من وجود الملف في مجلد التنزيل بعد النقر على الرابط. لقد كان الأمر بسيطًا جدًا، بمجرد وجود الملف، يمر الاختبار تلقائيًا. يمكن تطبيق استراتيجيات أخرى مثل استخدام cy.intercept للتحقق من إطلاق طلب التنزيل على سبيل المثال.

1. رفع الملف: تمامًا مثل تنزيل الملفات، يكون تحميل الملفات سلسًا بشكل مدهش مع Cypress.

بالنسبة لهذا النوع من السيناريوهات، يمكنك استخدام شيء مثل cypress-file-upload
وهو مكون إضافي جيد ومفيد للغاية، ويؤكد أن الملف تتم معالجته بواسطة التطبيق.

في المثال الخاص بي، كل ما تم القيام به كان من خلال الأمر .selectFile وهناك طريقة للقيام بذلك دون إرسال ملف فعلي، فقط باستخدام Cypress.Buffer يجب أن يقوم بالخدعة (يمكنك رؤية التنفيذ بالداخل) المستودع المرتبط أدناه).

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

1. ظل DOM:

سر Shadow DOM هو أن العناصر تشبه السر داخل DOM الرئيسي. إنها مخفية ولا تتبع قواعد رؤية CSS العادية، والتي قد تكون صعبة بعض الشيء اعتمادًا على الطريقة التي تحتاجها لتشغيل عمليات التشغيل الآلي عليها. ولحسن الحظ، يدعم Cypress أمر الظل لاختراق هذا الحجاب والعثور على تلك العناصر المخفية.

بالنسبة لهذه الاختبارات، استخدمت cy.get('element').shadow() للوصول إلى العناصر داخل Shadow DOM، وبعد ذلك، لا مزيد من المشكلات أو الصعوبات، يمكنك الوصول إلى العناصر وتنفيذها كما تفعل مع تلك العادية.

وهذا كل ما لدينا الآن.. فقط 6 أمثلة سريعة حول كيفية استخدام Cypress للتعامل مع بعض الاستخدامات الأساسية لأتمتة المتصفح، وكيفية الاستفادة منها لجعل حياتك أسهل عند التعامل مع مثل هذه الحالات .

هل أنت مستعد للتجربة؟

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