اختبار جافا سكريبت مع PhantomJS

Arabic (العربية/عربي) translation by Saadkhaled (you can also view the original English article)

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

:ما هو بالضبط PhantomJS؟ حسنًا ، إليك فيلم من موقع PhantomJS:

PhantomJS عبارة عن WebKit بلا واجهة باستخدام واجهة برمجة تطبيقات جافا سكريبت.

كما تعلم ، يعد Webkit هو محرك التصميم الذي يستخدمه Chrome و Safari وبضعة متصفحات أخرى. لذا PhantomJS هو متصفح ، ولكن متصفح بلا رأس. هذا يعني أن صفحات الويب المقدمة لا يتم عرضها في الواقع. قد يكون هذا الصوت غريب لك؛ حيث يمكن أن تفكر في أنها كمستعرض لبرمجة المحطة الطرفية. سنلقي نظرة على مثال بسيط في دقيقة واحدة، ولكن نحتاج أولاً لتثبيت فانتومجس.

تثبيت phantomJS

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

إذا كنت تستخدم نظام التشغيل Mac OS X ، فهناك طريقة أبسط لتثبيت PhantomJS (وهي بالفعل الطريقة التي استخدمتها). مجرد استخدام البيرة ، مثل هذا:

1	brew update && brew install phantomjs

يجب عليك الآن تثبيت PhantomJS. يمكنك التحقق مرة أخرى من التثبيت عن طريق تشغيل هذا:

1	phantomjs --version

أنا أرى 1.7.0؛ أنت؟

مثال صغير

دعونا نبدأ بمثال صغير.

simple.js

console.log("we can log stuff out.");

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

conslole.log("We can execute regular JS too:", add(1, 2));

phantom.exit();

المضي قدما وتشغيل هذه التعليمات البرمجية بواسطة إصدار الأمر التالي:

1	phantomjs simple.js

.يجب أن تشاهد الإخراج من سطرين console.log في الإطار الطرفي الخاص بك..

بالتأكيد ، هذا بسيط ، لكنه يعمل نقطة جيدة: PhantomJS يمكنه تنفيذ JavaScript تمامًا مثل المستعرض. ومع ذلك ، لا يحتوي هذا المثال على أي شفرة خاصة بـ PhantomJS ... بشكل جيد ، بخلاف السطر الأخير. هذا سطر مهم لكل نص PhantomJS لأنه يخرج من البرنامج النصي. قد لا يكون هذا منطقيًا هنا ، ولكن تذكر أن جافا سكريبت لا تنفذ دائمًا خطيًا. على سبيل المثال ، قد ترغب في وضع استدعاء exit () في وظيفة رد اتصال.

دعونا ننظر في مثال أكثر تعقيداً.

تحميل الصفحات

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

كجافا سكريبت على الصفحة.
كمستخدم يبحث في الصفحة.

لنبدأ باختيار تحميل صفحة. قم بإنشاء ملف نصي جديد وقم بإضافة التعليمة البرمجية التالية:

script.js

var page = require('webpage').create();

page.open('http://net.tutsplus.com', function (s) {
    console.log(s);
    phantom.exit();
});

نبدأ عن طريق تحميل وحدة صفحة الويب PhantomJS "وإنشاء كائن صفحة ويب. ثم نطلق على طريقة open ، ونمررها بعنوان URL ووظيفة رد الاتصال ؛ يوجد داخل وظيفة رد الاتصال هذه أنه يمكننا التفاعل مع الصفحة الفعلية. .في المثال أعلاه ، نقوم فقط بتسجيل حالة الطلب ، المقدمة من معلمة وظيفة رد الاتصال. إذا قمت بتشغيل هذا البرنامج النصي (مع phantomjs script.js) ، يجب أن تحصل على "نجاح" المطبوعة في المحطة.

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

page.open('http://net.tutsplus.com', function () {
    var title = page.evaluate(function () {
        var posts = document.getElementsByClassName("post");
        posts[0].style.backgroundColor = "#000000";
        return document.title;
    });
    page.clipRect = { top: 0, left: 0, width: 600, height: 700 };
    page.render(title + ".png");
    phantom.exit();
});

PhantomJS هو متصفح ، ولكن متصفح بلا رأس.

الوظيفة أننا نمرره إلى page.evaluate. يتم تنفيذ التقييم كجافا سكريبت على صفحة الويب المحملة. في هذه الحالة ، نجد جميع العناصر مع فئة المشاركة. بعد ذلك ، قمنا بتعيين خلفية المنشور الأول إلى اللون الأسود. أخيرًا ، نعيد document.title. هذه ميزة رائعة ، وتعطي evaluate من رد الاتصال الخاص بنا وتعيينها لمتغير (في هذه الحالة ، tittle).

ثم ، نقوم بتعيين clipRect على الصفحة ؛ هذه هي أبعاد لقطة الشاشة التي نتخذها باستخدام طريقة العرض. كما ترى ، قمنا بتعيين القيم العليا واليسرى لتعيين نقطة البداية ، كما قمنا أيضًا بتعيين العرض والارتفاع. وأخيرًا ، نسميه page.render ، ونمرر عليه اسمًا للملف (متغير العنوان). ثم ، ننتهي عن طريق استدعاء phantom.exit ().

المضي قدما وتشغيل هذا البرنامج النصي ، ويجب أن يكون لديك صورة تبدو مثل هذا:almudiu qu

يمكنك مشاهدة كلا الجانبين للعملة فانتومجس هنا: يمكننا تنفيذ جافا سكريبت من داخل الصفحة، وأيضا تنفيذ من الخارج، على سبيل المثال الصفحة نفسها.

لقد كان هذا ممتعا ، ولكن ليس مفيدا كثيرا. دعونا نركز على استخدام PhantomJS عند اختبار جافا سكريبت ذات الصلة بـ DOM.

اختبار مع phantomJS

يستخدم Yeoman PhantomJS في إجراء الاختبار الخاص به ، وهو سلس تقريبا.

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

بالطبع ، ليست PhantomJS مكتبة اختبار ، ولكن يمكن تشغيل العديد من مكتبات الاختبار الشائعة الأخرى على PhantomJS. كما يمكنك أن ترى من صفحة ويكي PhantomJS على الاختبار بدون رأس ، فإن متسابقي اختبار PhantomJS متاحون إلى حد كبير لكل مكتبة اختبار قد ترغب في استخدامها. دعونا ننظر في كيفية استخدام PhantomJS مع الياسمين و Mocha.

أولا ، ياسمين وإخلاء المسؤولية: ليس هناك عداء PhantomJS جيد لياسمين في هذا الوقت. إذا كنت تستخدم Windows و Visual Studio ، يجب عليك التحقق من Chutzpah ، ويجب على مطوري Rails محاولة guard-jasmine. ولكن بخلاف ذلك ، فإن دعم Jasmine + PhantomJS قليل.

لهذا السبب ، أوصي باستخدام Mocha للاختبارات المتعلقة بـ DOM.

ومع ذلك.

من الممكن أن يكون لديك مشروع باستخدام ياسمين بالفعل وتريد استخدامه مع PhantomJS. أحد المشاريع ، وهو phantom-jasmine ، القليل من العمل لإعداده ، ولكن يجب عليه أن يفعل الحيلة.

لنبدأ بمجموعة من اختبارات JasmineJS. قم بتنزيل الرمز الخاص بهذا البرنامج التعليمي (الارتباط الموجود في الأعلى) ، وتحقق من مجلد jasmine-starter. سترى أنه لدينا ملف tests.js واحد يقوم بإنشاء عنصر DOM ، ويعين بعض الخصائص ، ويضيفه إلى النص الأساسي. بعد ذلك ، نجري بعض اختبارات ياسمين لتأكد من أن هذه العملية تعمل بالفعل بشكل صحيح. فيما يلي محتويات هذا الملف:

tests.js

describe("DOM Tests", function () {
    var el = document.createElement("div");
    el.id = "myDiv";
    el.innerHTML = "Hi there!";
    el.style.background = "#ccc";
    document.body.appendChild(el);

    var myEl = document.getElementById('myDiv');
    it("is in the DOM", function () {
        expect(myEl).not.toBeNull();
    });

    it("is a child of the body", function () {
        expect(myEl.parentElement).toBe(document.body);
    });

    it("has the right text", function () {
        expect(myEl.innerHTML).toEqual("Hi there!");
    });

    it("has the right background", function () {
        expect(myEl.style.background).toEqual("rgb(204, 204, 204)");
    });
});

ملف SpecRunner.html هو المخزون إلى حد ما. والفرق الوحيد هو أنني قمت بنقل علامات البرنامج النصي إلى الجسم لضمان تحميل DOM بشكل كامل قبل تشغيل الاختبارات. يمكنك فتح الملف في متصفح ورؤية أن جميع الاختبارات تمر على ما يرام.

دعونا ننقل هذا المشروع إلى PhantomJS. أولا ، استنساخ مشروع الوهمية-ياسمين

1	git clone git://github.com/jcarver989/phantom-jasmine.git

هذا المشروع ليس منظمًا بقدر الإمكان ، ولكن هناك جزأين مهمين تحتاجين لهم:

عداء PhantomJS (مما يجعل Jasmine يستخدم PhantomJS DOM).
مراسل وحدة التحكم ياسمين (الذي يعطي إخراج وحدة التحكم).

كل من هذه الملفات الموجودة في المجلد lib؛ نسخها إلى jasmine-starter/Jib. نحتاج الآن إلى فتح ملف SpecRunner.html الخاص بنا وضبط العناصر . إليك ما ينبغي أن تبدو عليه:

<script src="lib/jasmine-1.2.0/jasmine.js"></script>
<script src="lib/jasmine-1.2.0/jasmine-html.js"></script>
<script src="lib/console-runner.js"></script>
<script src="tests.js"></script>

<script>
    var console_reporter = new jasmine.ConsoleReporter()
    jasmine.getEnv().addReporter(new jasmine.HtmlReporter());
    jasmine.getEnv().addReporter(console_reporter);
    jasmine.getEnv().execute();
</script>

لاحظ أنه لدينا مراسلين اثنين لاختباراتنا: مراسل HTML ومراسل وحدة التحكم. هذا يعني أن SpecRunner.html ويمكن تشغيل اختباراته في كل من المستعرض ووحدة التحكم. هذا سهل. لسوء الحظ ، نحتاج إلى أن يكون متغير console_reporter هذا لأنه تم استخدامه داخل ملف CoffeeScript الذي نحن على وشك تشغيله.

لذا ، كيف نذهب نشغل هذه الاختبارات على وحدة التحكم؟ بافتراض أنك في مجلد jasmine-starter على الجهاز ، إليك الأمر:

1	phantomjs lib/run\_jasmine\_test.coffee ./SpecRunner.html

نحن نعمل على تشغيل البرنامج النصي \ _jasmine \ _test.coffee مع PhantomJS ونمرر ملف SpecRunner.html كمعلمة. يجب أن نرى شيئا من هذا القبيل:

وبطبيعة الحال، إذا فشل الاختبار، سوف تشاهد شيء كما يلي:

إذا كنت تخطط لاستخدام هذا في كثير من الأحيان ، قد يكون من الجيد نقل تشغيل \ _jasmine \ _test.coffee إلى موقع آخر (مثل ~ / bin / run \ _jasmine \ _test.coffee) وإنشاء اسم مستعار طرفي للأمر بأكمله. إليك طريقة القيام بذلك في Bash shell:

1	alias phantom-jasmine='phantomjs /path/to/run\_jasmine\_test.coffee'

:مجرد رمي ذلك في ملفك .bashrc أو .bash_profile. الآن ، يمكنك فقط تشغيل:

1	phantom-jasmine SpecRunner.html

الآن اختبارات ياسمين تعمل على ما يرام على المحطة عبر PhantomJS. يمكنك رؤية الرمز النهائي في مجلد jasmine-total في التنزيل.

PhantomJS و Mocha

لحسن الحظ ، فإنه من الأسهل بكثير دمج Mocha و PhantomJS مع mocha-phantomjs. إنه سهل التثبيت جدًا إذا كان لديك تطبيق NPM مثبتًا (وهو ما يجب عليك):

1	npm install -g mocha-phantomjs

يقوم هذا الأمر بتثبيت ملف mocha-phantomjs الثنائي الذي سنستخدمه لتشغيل اختباراتنا.

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

لذا ، دعنا نبني مشروعًا بسيطًا. إنشاء دليل المشروع والانتقال إليه. سنبدأ بملف package.json:

{
    "name": "project",
    "version": "0.0.1",
    "devDependencies": {
        "mocha": "*",
        "chai" : "*"
    }
}

الموكا هو إطار الاختبار ، وسنستخدم Chai كمكتبة للتأكيد. نقوم بتثبيتها عن طريق تشغيل الآلية الوقائية الوطنية.

سنتصل باختبار ملف الاختبار / tests.js ، وفي ما يلي اختباراته:

describe("DOM Tests", function () {
    var el = document.createElement("div");
    el.id = "myDiv";
    el.innerHTML = "Hi there!";
    el.style.background = "#ccc";
    document.body.appendChild(el);

    var myEl = document.getElementById('myDiv');
    it("is in the DOM", function () {
        expect(myEl).to.not.equal(null);
    });

    it("is a child of the body", function () {
        expect(myEl.parentElement).to.equal(document.body);
    });

    it("has the right text", function () {
        expect(myEl.innerHTML).to.equal("Hi there!");
    });

    it("has the right background", function () {
        expect(myEl.style.background).to.equal("rgb(204, 204, 204)");
    });
});

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

آخر قطعة من اللغز هو ملف TestRunner.html:

<html>
    <head>
        <title> Tests </title>
        <link rel="stylesheet" href="./node_modules/mocha/mocha.css" />
    </head>
    <body>
        <div id="mocha"></div>
        <script src="./node_modules/mocha/mocha.js"></script>
        <script src="./node_modules/chai/chai.js"></script>
        <script>
            mocha.ui('bdd'); 
            mocha.reporter('html');
            var expect = chai.expect;
        </script>
        <script src="test/test.js"></script>
        <script>
            if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
            else { mocha.run(); }
        </script>
    </body>
</html>

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

لتشغيله في وحدة التحكم، ببساطة شغل هذا:

1	mocha-phantomjs TestRunner.html

فويلا! أنت الآن تجري اختبارات في وحدة التحكم ، وكل ذلك بفضل PhantomJS.

PhantomJS و Yeoman

أراهن أنك لم تكن تعرف أن Yeoman الشعبي يستخدم PhantomJS في إجراء الاختبار الخاص به ، وأنه لا مبرر له. دعونا ننظر في مثال سريع. سأفترض أن لديك Yeoman اقامة.

قم بإنشاء دليل مشروع جديد ، وقم بتشغيل yeoman init داخله ، ثم أجب بـ "لا" على جميع الخيارات. افتح ملف test / index.html ، وستجد علامة نصية بالقرب من الأسفل مع تعليق يخبرك باستبدالها بمواصفاتك الخاصة. تجاهل هذه النصيحة بشكل جيد واضع هذا داخل كتلة:

1	var el = document.createElement("div");
2	expect(el.tagName).to.equal("DIV");

الآن ، قم بتشغيل اختبار yeoman ، وسترى أن الاختبار يعمل بشكل جيد. الآن ، افتح ملف test / index.html في المتصفح. إنها تعمل! في احسن الاحوال!

بالطبع ، هناك الكثير الذي يمكنك القيام به مع Yeoman ، لذلك تحقق من الوثائق لمزيد من المعلومات.

الاستنتاج

استخدم المكتبات التي تمد PhantomJS لجعل اختبارك أكثر بساطة.

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

نأمل أن يكون شجعك هذا البرنامج التعليمي للنظر في PhantomJS. أوصي البدء بالمثال على المستندات والوثائق التي تقدمها PhantomJS ؛ سوف يفتحون عينيك فعلاً على ما يمكنك فعله باستخدام PhantomJS - كل شيء بدءًا من أتمتة الصفحة إلى شبكة الاستنشاق. الرابط 1 الرابط 2

لذا ، هل يمكنك التفكير في مشروع من شأنه تحسين PhantomJS؟ دعونا نسمع عن ذلك في التعليقات!