كيفية رفع الملفات في سايبرس؟

التاريخ

23.03.2022

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

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

في الويب رفع الملفات يجب أن يتم من خلال عنصر إدخال من نوع ملف.

<input type="file"  name="filename">

وهنا العملية قد تكون مباشرة بأن يكون نفس الزر الذي يقوم بفتح نافذة تصفح الملفات هو العنصر الخاص برفع الملف، أو يكون زر مختلف ولكن هناك عنصر من نوع ملف موجود ومخفي يتم ربط الملف معه، أو أن يقوم فريق ال UI بإنشاء عنصر من خلال كود الجافا سكريبت لربط الملف معه ولكن لا يقومون بإضافته على ال DOM.

المهم هنا أنه في جميع الحالات يجب أن يكون هناك عنصر إدخال من نوع ملف

وعليك البحث عن هذا العنصر لتسطيع ربط الملف فيه من خلال السايبرس

طرق التنفيذ

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

الطريقة المباشرة

فالبداية عليك تنزيل المكتبة في مشروعك واسمها

cypress-file-upload

من خلال الامر

npm install --save-dev cypress-file-upload

ومن ثم استدعائها في ملف commands لأن الفكرة منها هي إنها تجمع الطريقة الغير مباشرة في أمر واحد مباشر
فعليك إضافة السطر التالي إلى الملف الموجود في هذا الامتداد
cypress/support/commands.js

أمر الاستدعاء هو

import 'cypress-file-upload';

ومن ثم تأكد أن ملف ال index.js في نفس الامتداد يقوم باستدعاء ملف ال commands.js

الآن تصبح جاهزا لاستعمالها
فالبداية الإضافة تعتمد على مجلد ال fixture لأخذ الملفات وتعتمد على الملفات التي يدعمها أمر ال fixture لتعمل بشكل مباشر.

ال fixture هو الأمر الذي تستعمله السايبرس لتسهيل التعامل مع الملفات التي نحتاجها أثناء كتابة الفحص.

الأمر الذي تضيفه الأداة هو
attachFile
هذا الأمر تقوم بإلحاقه بالعنصر الذي تحدثنا عنه في بداية المقال وإعطائه اسم الملف الموجود داخل مجلد ال fixture

فمثلا لو أردنا رفع ملف اسمه aa.png موجود في مجلد ال fixture على عنصر إدخال المعرف الخاص به هو fileupload سيكون الكود كالتالي:

cy.get('[id="fileupload"]')
  .attachFile('aa.json');

بهذه البساطة

وفي حال اردت ارسال ملفات غير مدعومة بشكل افتراضي, او ارسال مجموعة ملفات يمكنك القيام بذلك وقد شرح مطورو المكتبة ذلك سارفق الرابط.

الطريقة الغير المباشرة

وهي التي تشرحها سايبرس وتعتمد عليها المكتبة التي ذكرتها.

تقوم فيها باستعمال مكتبة blob المدمجة فالسايبرس لتحويل ملفات ال fixture الى عنصر من نوع blob ومن ثم استخدام ال jQuery لربطها مع الملف وهنا مثال من السايبرس نفسهم

// programmatically upload the logo
cy.fixture('images/logo.png').as('logo')
cy.get('input[type=file]').then(function ($input) {
  // convert the logo base64 string to a blob
  const blob = Cypress.Blob.base64StringToBlob(this.logo, 'image/png')

  // pass the blob to the fileupload jQuery plugin
  // https://github.com/blueimp/jQuery-File-Upload
  // used in your application's code
  // which initiates a programmatic upload
  $input.fileupload('add', { files: blob })
})

شخصيا لا أجد داعي لتعقيد هذه الطريقة الذي يمكننا الاستغناء عنه بالمكتبة المبنية عليه والخفيفة نسبيا

أخبرني في التعليقات أي طريقة تعتقد أنها الأنسب وإذا كنت تحب معرفة أصل السايبرس وما يميزها بإمكانك قراءة المقال التالي (رابط).

أتمنى أن تكون استفدت من هذا المقال

رابط المكتبة الخارجية (رابط).

رابط شرح طريقة السايبرس (رابط).

شكرا لك على وقتك

في النهاية الحمد لله الذي بنعمه تتم الصالحات

السلام عليكم ورحمة الله وبركاته

عبدالله سعدالدين