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

هناك العديد من الأدوات التي يمكن استخدامها لاختبار صحة شيفرات HTML و CSS و JavaScript، وهي تشمل:

W3C Validator

أداة مجانية تقوم بفحص صفحة الويب لديك وتحديد أي أخطاء في الشيفرات HTML و CSS. 

JSHint

وهي أداة مجانية تساعد على فحص صحة الشيفرات الخاصة بلغة JavaScript. يمكن الوصول إليها على هذا الرابط:

CSS Lint

أداة مجانية تقوم بفحص صفحة الويب لديك وتحديد أي أخطاء في الشيفرات CSS. 

والأفضل استخدام إضافتي ESLint و Prettier لفحص صحة الشيفرات الخاصة بلغة JavaScript  وتنسيقها بشكل أفضل، وإليك بعض المعلومات حول كل منها:

• ESLint: هي أداة مجانية لفحص صحة الشيفرات الخاصة بلغة JavaScript وتحديد أي أخطاء في الشيفرات، ويمكن تخصيص ESLint لتنفيذ مجموعة متنوعة من المعايير والقواعد الخاصة بالشركة أو المشروع، وتستخدم في الغالب في مشاريع الويب.
• Prettier: هي أداة مجانية تستخدم لتنسيق الشيفرات الخاصة بلغة JavaScript و HTML و CSS وجعلها أسهل للقراءة والصيانة، تم تصميم Prettier لتكون سهلة الاستخدام ومتوافقة مع مختلف المحررات والمشاريع.

وهما متوفرتان في متجر الإضافات الخاص بمحرر VSCode.

بالنسبة لإضافة الميديا المناسبة لكود CSS لجعل الموقع مناسب على جميع الشاشات، يمكن استخدام تقنية Responsive Web Design، حيث يتم استخدام  (Media Queries) لتعديل تصميم الموقع وتكييفه مع الأحجام المختلفة للشاشات.

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

ويمكنك استخدام أدوات مثل Bootstrap و Foundation للمساعدة في تصميم موقع يستجيب للشاشات المختلفة، أو تصميم الموقع من البداية بتقنية Responsive Web Design إذا كنت لا تريد استخدام مكتبة إطار Bootstrap.

بالاضافة إلى ما أخبر به مصطفى ، هناك أيضاً أدوات متاحة لمساعدتك على اختبار وتحسين تصميم موقع الويب الخاص بك مثل :- 

Google PageSpeed Insights: هذه الأداة تقيم سرعة تحميل صفحات موقع الويب الخاص بك وتوفر توصيات لتحسين الأداء.

GTmetrix: هذه الأداة توفر تقارير شاملة حول سرعة تحميل صفحات موقع الويب الخاص بك وتقدم توصيات لتحسين الأداء.

Pingdom Website Speed Test: هذه الأداة توفر معلومات حول سرعة تحميل صفحات موقع الويب الخاص بك، بالإضافة إلى تحليل وافر حول الأداء.

BrowserStack: هذه الأداة تتيح لك اختبار تصميم موقع الويب الخاص بك على مجموعة واسعة من المتصفحات والأجهزة المختلفة.

WebPageTest: هذه الأداة توفر تقارير شاملة حول سرعة تحميل صفحات موقع الويب الخاص بك، بالإضافة إلى تحليل وافر حول الأداء ومدى تحمل الموقع للحمولة الكبيرة.

CSS Validator: هذه الأداة تساعدك على التحقق من صحة شفرات CSS المكتوبة وفقًا لمعايير W3C.

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

هناك العديد من الأدوات المتوفرة عبر الإنترنت والتي يمكن استخدامها لاختبار شفرات HTML و CSS و JS والتأكد من صحتها. ومن بين هذه الأدوات الأساسية:

1. W3C Markup Validation Service: هذه الأدوات تساعد في التحقق من صحة الشفرة المكتوبة بـ HTML و XHTML والتأكد من احتوائها على أخطاء غير متوافقة مع المعايير.

2. CSS Validation Service: يمكن استخدام هذه الأدوات للاحتراز من أخطاء CSS في الصياغة والتأكد من أنها تتوافق مع المعايير.

3. Google Chrome Developer Tools: يمكن استخدام هذه الأداة لتحليل شفرة الموقع واختبار وتجربة خصائص لـ CSS مباشرة في المستعرض.

4. Firebug: هي مثل أداة Google Chrome Developer Tools ولكن للمتصفح Firefox.

أما بالنسبة للميديا وشاشات العرض، فإن الإجابة تعتمد على المتطلبات الخاصة بتصميم الموقع. في بعض الحالات، يمكنك استخدام تقنيات CSS مثل Grid وFlexbox لتحقيق مرونة وسهولة الاستجابة للأجهزة المختلفة. بينما في حالة المحتوى المتعدد الوسائط، يمكن استخدام صور مختلفة الأحجام ودقة الشاشة على حسب الحاجة باستخدام تقنية "Responsive Images", لكن يجب مراعاة ذلك عند تصميم الموقع من البداية.

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

من بين أشهر الأطر على الساحة اطار JEST. فهو إطار اختبار يستخدم في تطوير البرمجيات بلغة جافاسكريبت. يُستخدم على نطاق واسع في اختبار الواجهات الأمامية لتطبيقات الويب والمكتبية مثل React و Vue.js و Angular. فهو يتيح العديد من الوظائف التي تساعد المطورين في اختبار تطبيقاتهم بشكل فعال.

في ما يلي مثال بسيط:

ان كانت الوظيفة sum موصوفة وفق:

function sum(a, b) {
  return a + b;
}

فإننا نفترض أن حالة الاستخدام (جمع 1 + 2) سيكون خرجها هو 3. سيكون الاختبار الذي سيحمل توصيف هاته الحالة هو:

describe('sum function', () => {
  test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3)
  })
})

وهذا كمثال بسيط فقط، يسع الاطار استعمال توابع أخرى أكثر تخصصية.

يوجد أيضا في اطار عمل لارافيل آداة مدمجة باسم Laravel dusk تستخدم لذات الغرض، اذ تتيح للمطورين إنشاء اختبارات بسيطة ومنظمة للتحقق من سلوك تطبيقاتهم. يمكن استخدامها لاختبار العناصر الأساسية مثل النماذج والروابط والأزرار والقوائم المنسدلة وأكثر من ذلك. بالإضافة إلى أنه يمكن للمطورين اختبار العمليات العادية مثل تسجيل الدخول وإنشاء حساب جديد وغيرها. وهي آداة تتكامل بشكل رائع مع PHPunit، فإن كنت معتادا على استعماله فسيكون استعمال Laravel dusk ممتعا ومجزيا كثيرا. انظر المثال وكيف أنه يصف حالة استخدام لعنصر من الواجهة الأمامية فعليا:

$browser->visit('/projects/create')
        ->type('title', 'هذا عنوان لمشروع يتم انشاءه الآن')
        ->type('description', 'هذا وصف لمشروع يتم انشاءه الآن')
        ->press('Submit')
        ->assertPathIs('/projects')
        ->assertSee('تم بنجاح');

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