Nightwatch.js وCypress وCucumber - الإيجابيات والسلبيات

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

صورة من chercher.tech

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

يأتي كل إطار عمل لأتمتة الاختبار بمزاياه الخاصة مثل سهولة كتابة الكود، وقابلية التوسع، والقدرة على التكيّف، وسهولة الفهم، وتقليل التكلفة، وسهولة الصيانة، إلخ. لذا، يُنصَح باستخدام أكثر من إطار عمل واحد للوصول إلى فوائد متعددة من أطر عمل مختلفة ذات صلة بمشروعك.

قررنا اختبار أطر العمل التالية: Nightwatch.js وCucumber وCypress. بينما يستخدم Nightwatch.js وCucumber محرك Selenium webdriver، فإن Cypress مستقل عن Selenium.

Nightwatch.js هو إطار عمل مفتوح المصدر لاختبار المتصفح الآلي مبني على Node.js. طُوِّر في أمستردام ويستمد اسمه من اللوحة الشهيرة 'The Night Watch' للفنان الهولندي من القرن السابع عشر رامبرانت فان راين.

يسهّل Nightwatch.js الاختبار الشامل (end-to-end) لتطبيقات ومواقع الويب، من خلال استخدام واجهة W3C Webdriver البرمجية (المعروفة أيضًا بـ Selenium Webdriver) كغلاف لـ Selenium للتفاعل مع مختلف المتصفحات. يساعد في جعل تنفيذ CI/CD أسهل بكثير. في الوقت نفسه، يمكن استخدامه لتنفيذ أتمتة اختبار Selenium لكل من اختبارات الوحدة والتكامل. يوفّر إطار عمل اختبار المتصفح الآلي الشائع هذا عدة أوامر وتأكيدات (assertions) لتنفيذ التفاعلات مع عناصر الويب.

يُشار إليه أحيانًا كمكتبة ربط Selenium فقط، وهذا صحيح تمامًا إذ يُستخدَم غالبًا مع خادم Selenium. لكن أثناء التنفيذ، يجب أن يتذكر المختبِر أن Nightwatch.js بحد ذاته متكامل، إذ يحتوي على مُشغّل اختبار CLI مدمج، ومكتبة أوامر وتأكيدات قابلة للتوسع، ودعمًا لنموذج كائن الصفحة (page object model).

الإيجابيات:

• صياغة نظيفة. صياغة بسيطة لكن قوية تتيح لك كتابة الاختبارات بسرعة كبيرة.
• مُشغّل اختبار مدمج. يمكن لمُشغّل الاختبار المدمج عبر سطر الأوامر تشغيل الاختبارات إما تسلسليًا أو بالتوازي، معًا، حسب المجموعة، أو الوسوم، أو منفردة.
• يدير Nightwatch.js تلقائيًا خدمات WebDriver (Edge وSafari وGeckoDriver).
• دعم الخدمات السحابية. يعمل مع مزوّدي الاختبار السحابي، مثل SauceLabs وBrowserStack.
• يتضمن إطار عمل ومكتبة تأكيدات خاصة به.
• دعم CSS وXpath. يمكن استخدام محدِّدات CSS أو Xpath لتحديد العناصر والتحقق منها في الصفحة أو تنفيذ الأوامر.
• دعم التكامل المستمر. تقارير JUnit XML مدمجة حتى تتمكن من دمج اختباراتك في عملية البناء لديك مع أنظمة مثل Teamcity وJenkins وHudson إلخ.
• تكامل طرف ثالث مع Cucumber. رغم أن Cucumber غير مدعوم رسميًا، يمكن استخدام Nightwatch.js معه.

السلبيات:

• لا يمتلك خيارات كثيرة لأطر عمل اختبار الوحدة إذ يمتلك إطار عمل اختبار خاصًا به ويدعم أيضًا Mocha.
• لا دعم رسمي لصياغة نمط BDD.
• دعم أقل قليلًا.

مثال اختبار:

module.exports = {
    'Should display an error message when you enter a wrong login information' : function (client) {
            client
            .url ('https://www.netflix.com/')
            .waitForElementVisible('body', 1000)
            .useXpath().click('//a[@href="/login"]')
        .useCss().setValue('#id_userLoginId', '[email protected]')
        .setValue('#id_password' ,'1234')
        .useXpath().click('//button[text()="Sign In"]')
        .useCss().assert.visible('.ui-message-contents')
        .end();

    }
};

متوسط وقت التنفيذ: 7.695 ثانية

Cypress أداة اختبار واجهة أمامية من الجيل التالي مبنية للويب الحديث.

غالبًا ما يُقارَن Cypress بـ Selenium، لكن Cypress مختلف جذريًا ومعماريًا. Cypress غير مقيَّد بنفس القيود التي يخضع لها Selenium. هذا يتيح لك كتابة اختبارات أسرع وأسهل وأكثر موثوقية. مستخدمو Cypress عادة هم مطوّرون أو مهندسو ضمان جودة يبنون تطبيقات ويب باستخدام أطر عمل JavaScript الحديثة.

يتيح لك Cypress كتابة جميع أنواع الاختبارات:

• الاختبارات الشاملة (end-to-end)
• اختبارات التكامل
• اختبارات الوحدة

وبذلك يُستخدَم Cypress لاختبار مجموعة واسعة من التطبيقات العاملة في المتصفح. Cypress مجاني ولسنا بحاجة لشراء ترخيص لاستخدامه. يتيح لنا إنشاء حالات الاختبار لدينا أثناء تطوير تطبيقنا. لذا يمكن استخدامه على أفضل وجه في إطار عمل التطوير المدفوع بالاختبار (TDD). يمتلك Cypress أيضًا خدمة Dashboard التي تساعد على تسجيل تنفيذ اختباراتنا.

يمكن استخدام Cypress لجميع أنواع أنشطة التطوير إذ يوفّر منصة يكون فيها التصحيح سريعًا وقابلية صيانة الكود سهلة.

الإيجابيات:

• لا يستخدم Cypress محرك Selenium. معظم أدوات الاختبار الشامل التي جربناها تستخدم Selenium، ولهذا لديها تقريبًا نفس المشاكل.
• يدعم Cypress أي إطار عمل أو موقع بشكل جيد جدًا. هناك مئات المشاريع التي تستخدم أحدث أطر عمل React وAngular وVue وElm، إلخ. يعمل Cypress أيضًا بشكل جيد على الصفحات أو التطبيقات الأقدم المُقدَّمة من الخادم.
• تُكتَب اختبارات Cypress فقط بلغة JavaScript. ورغم أنه يمكنك الترجمة إلى JavaScript من أي لغة أخرى، فإن كود الاختبار في النهاية يُنفَّذ داخل المتصفح نفسه. لا توجد لغات أو ربط برامج تشغيل - هناك وستبقى فقط JavaScript.
• لا توجد اعتماديات، تضع اختبارك في package.json وهذا كل شيء.
• يعمل Cypress أسرع بكثير مقارنة بأدوات الاختبار الشامل المعتمدة على Selenium التي جربناها.
• هناك لقطة شاشة لكل خطوة من سكريبتك، وهو أمر مفيد جدًا إذا كان هناك أي اختبار ناجح أو فاشل بشكل خاطئ.
• يمتلك Cypress صياغة واضحة، من السهل قراءتها.
• خدمة Dashboard التي توفّر تمثيلًا مرئيًا لعمليات تشغيل الاختبار وتقاريرها وحالتها في نافذة ويب واحدة. كما تثبت فائدتها في تخطيط وتصوير عمليات تشغيل سكريبتات اختبار Cypress.

السلبيات:

• كانت البنية مختلفة عن أدوات الاختبار الشامل الأخرى المعتمدة على Selenium، لذا في البداية قد تحتاج لقضاء وقت أطول في فهم البنية وإيجاد أفضل طريقة لإنشاء سكريبتاتك.
• المجتمع. بما أن Cypress جديد نسبيًا، المجتمع صغير. ستواجه صعوبة في إيجاد إجابات للمشكلات إلخ.
• نموذج كائن الصفحة. هذا شيء أثبته الزمن بالفعل. يدعم Cypress نهجًا مختلفًا قد يكون مثيرًا للجدل.
• متوفر فقط لعميل (لغة) واحدة أي JavaScript فقط. لذا للعمل معه يجب أن تعرف JavaScript.
• يدعم Cypress محدِّدات Xpath. لكن ذلك لا يأتي افتراضيًا. بعبارة أخرى، نحتاج إضافات خارجية مثل 'Cypress-Xpath' لدعم هذا المحدِّد.
• عدد قليل فقط من المتصفحات مدعوم.

مثال اختبار:

describe('should display an error message when you enter wrong login information', function () {
    before(function () {
      cy.visit('https://www.netflix.com/')
    })
   
    it('displays an error message', function () {
      cy.get('a[href="/login"]').click()
      cy.get('#id_userLoginId').type('[email protected]',{force: true})
      cy.get('#id_password').type('1234',{force: true})
      cy.get('button[class="btn login-button btn-submit btn-small"]').click()
      cy.get('.ui-message-contents').should('be.visible')
    })
   })

متوسط وقت التنفيذ: 10.612 ثانية

Cucumber هو إطار عمل اختبار مفتوح المصدر يدعم التطوير المدفوع بالسلوك (BDD) لأتمتة اختبار تطبيقات الويب. تُكتَب الاختبارات أولًا في شكل سيناريو بسيط يصف السلوك المتوقع للنظام من منظور المستخدم.

يُستخدَم Cucumber غالبًا لاختبارات القبول، وهو مكتوب بلغة Ruby، بينما تُكتَب الاختبارات بلغة Gherkin، وهي لغة غير تقنية وقابلة للقراءة من قبل البشر.

يمنحنا التطوير المدفوع بالسلوك فرصة لإنشاء سكريبتات اختبار من منظور المطوّر والعميل على حد سواء. لذا في البداية، يجتمع المطوّرون ومديرو المشاريع ومهندسو ضمان الجودة ومختبِرو قبول المستخدم ومالك المنتج (صاحب المصلحة) معًا ويتناقشون حول سيناريوهات الاختبار التي يجب أن تنجح حتى نعتبر هذا البرنامج/التطبيق ناجحًا. بهذه الطريقة يتوصلون إلى مجموعة من سيناريوهات الاختبار. تكون جميع سكريبتات الاختبار هذه بلغة إنجليزية بسيطة، لذا تخدم أيضًا غرض التوثيق.

الإيجابيات:

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

السلبيات:

• يمكن أن يصبح ملف الميزة (feature file) لديك ملفًا كبيرًا وفوضويًا جدًا بسهولة.
• يمكن أن يستغرق تشغيل الاختبارات وقتًا طويلًا، خاصة عندما تريد تشغيل اختبارك في متصفحات مختلفة.
• إذا كنت ستختبر تطبيق JavaScript باستخدام Cucumber وJava، فقد يكون من الصعب على فريق التطوير التكيّف مع ذلك، وهو أمر أقل إنتاجية.
• يستخدم معظم الناس صياغة BDD "Given" و"When" و"Then" ببنية غير منطقية.

مثال اختبار:

الميزة:

Feature: CucumberTest

 Scenario: Login functionality exists
    Given I have open Netflix website
    And Click on Sign In button
    Then Enter username "[email protected]" and password "1234"
    When Press Sign In button
    Then The error message box is displayed

تعريفات الخطوات:

//var seleniumWebdriver = require('selenium-webdriver');
var {defineSupportCode} = require('cucumber');

defineSupportCode(function ({Given, When, Then}) {
    Given(/^I have open Netflix website$/, function () {
        return this.driver.get('http://netflix.com/')
    });

    Then(/^Click on Sign In button$/, function () {
        var locator = "//a[text()='Sign In']";
        return this.driver.findElement({xpath: locator}).then(function (element) {
            return element.click();
        });
    });

    Then(/^Enter username "(.*?)" and password "(.*?)"$/, function (username, password) {
        var locatorUsername = "//input[@id='id_userLoginId']";
        var locatorPassword = "//input[@id='id_password']";
        
        this.driver.findElement({xpath: locatorUsername}).then(function (element) {
            return element.sendKeys(username);
        });
        this.driver.findElement({xpath: locatorPassword}).then(function (element) {
            return element.sendKeys(password);
        });
        return this;
    });

    When(/^Press Sign In button$/, function () {
        var locator = "//button[text()='Sign In']";
        return this.driver.findElement({xpath: locator}).then(function (element) {
            return element.click();
        });
    });

    Then(/^The error message box is displayed$/, function () {
        var locator = "//div/b[text()='Incorrect password.']";
        return this.waitForElement(locator);
    });
});

متوسط وقت التنفيذ: 9.967 ثانية

• "أفضل 10 أطر عمل لأتمتة الاختبار في 2020"، Suyash Dubey
• "أفضل 10 أطر عمل لأتمتة الاختبار في 2020"، Debjani Goswami
• "مقدمة إلى Nightwatch.js لاختبار Selenium"، Rahul Rana
• "إيجابيات وسلبيات أدوات الاختبار الشامل"، Farzaneh Farhadi
• https://docs.cypress.io/guides/overview/why-cypress#In-a-nutshell
• "أتمتة الاختبار باستخدام Selenium وCucumber: دليل تعليمي"، Garima Tiwari