Get best of the week

Playwright - Microsoft Playwright وأداة اختبار جديدة



لقد قمت باختبار وكتابة التعليمات البرمجية لمدة عشر سنوات ، وعلى مدى السنوات الأربع الماضية ، كنت أختبر التقارير في لجنة برنامج مؤتمر Heisenbug. اليوم سأتحدث عن الاختبارات من طرف إلى طرف ، وإمكانية الوصول عبر المتصفح ، وإثارة استخدام الإصدار 0.10.0 من Playwright.

من النهاية إلى النهاية


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

هناك أدوات مختلفة: السيلينيوم ، العرائس ، المنقلة ، السرو وغيرها. قبل أسبوعين ، تم إصدار أداة جديدة - Playwright ، والتي عمل عليها Andrey Lushnikov ، مطور Puppeteer. تحل هذه المكتبة تمامًا مشكلة كتابة الاختبارات عبر المتصفحات.




التغريدة الأصلية التي كتبها أندريه لوشنيكوف مع الإعلان.

الدمى مقابل. الكاتب المسرحي


لقد استخدمت Puppeteer في العديد من المشاريع ، وبشكل عام لم يكن سيئًا. بالإضافة إلى ذلك ، تذكرت أنه في نهاية العام الماضي ، كان لدى Puppeteer إصدار رئيسي من الإصدار 2.0 . ولكن عندما نظرت إلى المستودع الخاص به ، رأيت صورة مثيرة للاهتمام:


يبدو أنني لست أعمى اللون ، ولكن أحمر قليلاً جدًا.

تساءلت عن سبب كون Playwright أفضل - أداة جديدة تعتمد بدقة على GitHub في مؤسسة Microsoft.

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

ما هو الجيد في Playwright؟ أولاً ، لديها كل كعكات العرائس. وثانيًا ، يتيح لك كتابة اختبارات عبر المتصفح - يمكنك تحديد أي متصفح في رمز الاختبار : WebKit و Chromium و Firefox.

لحظة تعليم ذاتي: محركات متصفح
WebKit — Safari .

Chromium — Blink, Webkit. Blink Google Chrome, ., Microsoft Edge, Opera Vivaldi.

Firefox — Gecko. Chro Servo, Rust.


ما المطلوب لكتابة اختبار عبر المتصفح على Playwright؟ كنت بحاجة إلى npm ، تجربة Habr ، مدرسة اللغة الإنجليزية لقراءة الوثائق ، فنجان قهوة و 15 دقيقة ونصف.

قم بتثبيت Playwright . نكتب في وحدة التحكم:
npm i playwright

لقطة شاشة هبر. انسخ المثال من الوثائق:

const playwright = require('playwright');

(async () => {
   for (const browserType of ['chromium', 'firefox', 'webkit']) {
       const browser = await playwright[browserType].launch();
       const context = await browser.newContext();
       const page = await context.newPage('http://habr.com/');

       await page.screenshot({ path: `screenshots/example-${browserType}.png` });
       await browser.close();
   }
})();

سيكون الرمز الموجود على Puppeteer هو نفسه تقريبًا:

const puppeteer = require('puppeteer');

(async () => {
   const browser = await puppeteer.launch();
   const page = await browser.newPage();
   await page.goto('https://habr.com');
   await page.screenshot({path: 'screenshots/example.png'});

   await browser.close();
})();

سيتم تشغيل الاختبار من المثال الأول في ثلاثة متصفحات. صحيح أنه من غير الواضح في أي إصدارات معينة والتي تتوفر بشكل عام. تقول الوثائق أن Playwright يقوم تلقائيًا بتنزيل برنامج التشغيل للمتصفح. يمكنك أيضًا تحديد متصفح معين:

 const browser = await chromium.launch();  // Or 'firefox' or 'webkit'.
 const context = await browser.newContext();

لتحديد إصدار المتصفح في Puppeteer ، تحتاج إلى تحديد المسار إلى برنامج التشغيل. لا يفعل PlayWright. كما أفهمها ، سيتم استخدام أحدث إصدار من المحرك دائمًا ، والذي تتم مناقشته بالفعل على GitHub.

بالمناسبة ، إذا كنت تحب اختبارات لقطة الشاشة ، فكن حذرا. يأخذ كل من Playwright و Puppeteer لقطات شاشة مختلفة في Chromium:


لسبب ما ، فإن الخطوط ذات أحجام مختلفة. لقد بدأت تذكرة على GitHub.

يدعم Playwright WebKit ، مما يعني اختبارات في متصفحات الجوال. لكن جميع الهواتف الذكية والأجهزة اللوحية لها درجات دقة مختلفة - كيف تختار ما تحتاجه عند إجراء الاختبارات؟ لقد وجدت 76 جهازًا في كود deviceDescriptors.ts ، بما في ذلك الموديلات الشائعةBlackBerry و JioPhone 2. من المفيد: يمكنك اختيار iPhone 8 و iPhone 8 في الوضع الأفقي. رمز الاختبار هو تقريبًا نفس اختبار المتصفح العادي:

const { webkit, devices } = require('playwright');
const deviceType = devices['iPhone 8'];

(async () => {
   const browser = await webkit.launch();
   const context = await browser.newContext({
       viewport: deviceType.viewport,
       userAgent: deviceType.userAgent
   });
   const page = await context.newPage('http://habr.com');
   await page.screenshot({ path: `example-${deviceType.name}.png`});
   await browser.close();
})();

ميزة مثيرة للاهتمام في Playwright هي القدرة على تغيير الموقع الجغرافي ، وسوف تكون مفيدة عند اختبار الخرائط. عند تهيئة سياق المتصفح ، تحتاج إلى تحديد الإحداثيات:

const context = await browser.newContext({
   viewport: iPhone11.viewport,
   userAgent: iPhone11.userAgent,
   geolocation: { longitude: 12.492507, latitude: 41.889938 },
   permissions: { 'https://yandex.ru/maps': ['geolocation'] }
});

هذه ليست سنتي الأولى في الاختبار وأحيانًا أحب أن أرى كيف يمر الاختبار. كان لدى Puppeteer خيارًا headless: falseأطلق نافذة متصفح. نفس الخيار بالضبط مع Playwright:

puppeteer.launch({headless: false});
playwright.launch({headless: false});

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

هل حان الوقت للتحرك؟


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

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

يدعم Playwright متصفحات متعددة ، وهو أكثر ملاءمة لكتابة اختبارات عبر المتصفحات معه. صحيح ، لديه الآن الإصدار 0.10.0 ، وليس لديه الكثير من الوثائق ، و SlackOverflow لديه ستة أسئلة فقط. أوصي بمشاهدة إصدارات Playwright عن كثب ، ولكن لا تتسرع في استخدامها في الإنتاج حتى الآن ، حيث قد تتغير واجهة برمجة التطبيقات.

المطور Playwright على Heisenbug


أشارك الأخبار: سوف يلقي أندريه لوشنيكوف حديثًا حول Playwright في مؤتمر Heisenbug 2020 Piter ، الذي سيعقد في 8-9 أبريل في سان بطرسبرغ. هناك العديد من الأسئلة له:

  • لماذا تسمى المكتبة الجديدة Playwright وأين الدراما
  • متى ستظهر الأمثلة في الوثائق ومتى ستنتظر إصدار الإصدار 1.0
  • ما احتمالية تحول الشارات في مستودع الدمى إلى اللون الأخضر

UPD: تم إصدار مقابلة مع Andrei Lushnikov "إذا كانت مواقع الويب تعمل بشكل أفضل ، فستكون مثالية" تم إصدارها للتو . في ذلك ، تحدثنا كثيرًا عن البروتوكولات ومحركات المتصفح والتكاملات الخارجية.

التذاكر موجودة على موقع Heisenbug . آراء حول Playwright و Puppeteer - اكتب في التعليقات.
وإذا قرأت المنشور حتى النهاية ، ولكن لسبب ما لم تكن على دراية بـ Puppeteer ، انظر إلى تقرير Andrey من مؤتمر Heisenbug الأخير ، حيث تحدث عن Puppeteer لمدة 55 دقيقة.

Source: https://habr.com/ru/post/undefined/

More articles:


All Articles