ما هو Puppeteer أو محرك العرائس؟
هي مكتبة لـ Nodejs توفر واجهة برمجة تطبيقات (Api) عالية المستوى للتحكم في Chrome أو Chromium عبر بروتوكول DevTools.
يعمل Puppeteer بدون رأس (في الخلفية) افتراضيًا ، ولكن يمكن تهيئته لتشغيل Chrome أو Chromium بالكامل.
ماذا يمكنه أن يفعل؟
- يمكنك إنشاء لقطات شاشة وملفات PDF للصفحات.
- أتمتة إرسال النماذج واختبار واجهة المستخدم وإدخال لوحة المفاتيح إلخ..
- قم بإنشاء بيئة اختبار مؤتمتة ومحدثة، وإجراء اختباراتك مباشرةً في أحدث إصدار من Chrome باستخدام أحدث ميزات JavaScript والمتصفح.
- مخطط زمني لموقعك للمساعدة في تشخيص مشكلات الأداء.
- اختبار ملحقات كروم.
تثبيت Puppeteer
لاستخدام محرك العرائس في مشروعك، شغل الأمر التالي:
npm i puppeteer
عند تثبيت محرك العرائس، فإنه يقوم بتنزيل إصدار حديث من Chromium مضمون للعمل مع واجهة برمجة التطبيقات
const puppeteer = require('puppeteer');
import puppeteer from 'puppeteer';
مثال index.js | إلتقاط صورة للموقع
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://discourse.aosus.org');
await page.screenshot({ path: 'example.png' });
await browser.close();
نقوم بتنفيذ البرنامج النصي index.js
node index.js
لأن في نفس مجلد المشروع راح نحصل صورة الموقع بإسم example.png

الان سأقوم بكتابة برنامج نصي لتسجيل الدخول على موقع اسس والتعليق على احد المواضيع
سأقوم بالتعليق على موضوع الأخ @usama_makhzoum
السلام عليكم بعد 12 سنة من إصدار أول إصدار من اللعبة المعروفة serious sam ، فتحت كروتيم مصدر محركها serious engine 1 ، للعلم اللعبة نفسها كانت تتوفر للينكس ولكن منذ البداية لم تكن حرة أو حتى مجانية، يمكنك الآن لعب اللعبة بعد ما فتح مصدرها مجانا لكل من SS the first encounter & the second encounter رابط المستودع
مثال لملف index.js
قم بتغير headless إلى false لترى المتصفح أو ابقيها على true لتعمل في الخلفية.
import puppeteer from 'puppeteer';
let browser = await puppeteer.launch({ headless: true , devtools: false }); // بدء تشغيل محرك العرائس
let page = await browser.newPage(); // إنشاء صفحة جديدة في سياق المستعرض الافتراضي
page.setDefaultNavigationTimeout(0); // سيؤدي هذا الإعداد إلى تغيير الحد الأقصى الافتراضي لوقت التنقل
//page.setDefaultTimeout(0);
let url_example = 'https://discourse.aosus.org/t/topic/2516'// عنوان url للصفحة
let message = "شكرا لك سألقى لها نظره قريباً"
let username = 'rn0x' // نضع هنا الإيميل او اليوزر
let password = "***********" // رمز الدخول
let status = await page.goto(url_example, {
waitUntil: 'load',
timeout: 0
});
status = status.status();
if (status === 200) {
await page.$$eval('.d-button-label', (e) => {
e.map(e => {
if (e.textContent === 'تسجيل دخول') {
e.click()
}
})
});
let username_input = await page.waitForSelector('#login-account-name')
await username_input.type(username, { delay: 100 })
let password_input = await page.waitForSelector('#login-account-password')
await password_input.type(password, { delay: 100 })
await page.click('#login-button');
await new Promise(r => setTimeout(r, 5000));
let modal_alert = await page.waitForSelector('#modal-alert')
let Log_in_error = await modal_alert.evaluate(e => e.innerHTML);
if (Log_in_error === 'اسم المستخدم أو البريد الإلكتروني أو كلمة المرور غير صحيحة') {
console.log('Username, email or password incorrect');
}
else if (Log_in_error === '') {
console.log('You are logged in successfully');
let comm = await page.waitForSelector('.post-menu-area .actions .d-button-label');
await comm.click()
let msg = await page.waitForSelector('.d-editor-input')
await msg.type(message, { delay: 100 });
let send = await page.waitForSelector('.save-or-cancel .d-button-label');
await send.click()
}
}
else {
console.log(` HTTP response status code ${status}`);
}
await browser.close();
نقوم بتنفيذ البرنامج النصي index.js
node index.js

للمزيد من المعلومات عن محرك العرائس تفضل بزيارة الموقع الرسمي (API Reference | Puppeteer 1)
هذا الموضوع فائز بجائزة أسس للكتابة
هذا الموضوع أحد المواضيع الفائزة بجائزة أسس للكتابة، الجائزة الأولى في العالم العربي للتحفيز الكتابة عن البرمجيات الحرة.
تفاصيل أكثر عن الجائزة

المواضيع الفائزة لشهر أغسطس 2022

