خودکارسازی گوگل کروم برای Node.js

گردآوری و تالیف : امیررضا سیستانه ای
تاریخ انتشار : 22 دی 1396
دسته بندی ها : نود جی اس

آیا میدونستید گوگل کروم امکان اجرا در حالت headless رو داره؟ این قابلیت رو Headless Chrome می نامند و این باعث میشه کار توسعه دهندگان برای پیکربندی یک محیط مرورگر headless و اجرای تست های قدرتمند و خودکار ساده تر بشه.

در این آموزش ما می خواهیم درمورد قابلیت های مختلف اون و اجرای چند مثال جالب صحبت کنیم. بیایید شروع کنیم!

Headless Chrome چیست

Headless Chrome به ما اجازه میده تا مرورگر رو از طریق دستورات command line بدون باز کردن پنجره ی کروم اجرا کنیم. محیط مرورگر شبیه سازی شده همان قابلیت های یک کروم عادی رو داره و میتونه هر وبسایت یا اپلیکیشنی که بخواهیم رو بارگذاری کنه.

علاوه بر این ما تعداد زیادی کنترل برای ارتباط با صفحه داریم. ما میتونیم روی عناصر کلیک کنیم, ورودی کیبورد رو شبیه سازی کنیم, مرورگر رو تغییر سایز بدیم, و خیلی دیگر. با استفاده از این کنترل ها میتونیم تعداد زیادی اسکریپت مفید بنویسیم.

در ادامه به چند مثال از وظایفی که معمولا در یک محیط headless انجام میشه, می پردازیم :

  • تولید اسکرین شات ها و PDF ها.
  • پیمایش بین لینک ها و حالات اپلیکیشن.
  • خودکارسازی ورودی کاربر و تست اعتبارسنجی فرم ها.
  • دریافت اطلاعات از وبسایت ها و SPA ها.
  • نمایش کارایی (Monitor performance).

از اونجا که Headless Chrome یک API سطح پایین داره, بهتره که از طریق کتابخانه بهش دسترسی پیدا بشه. برای این آموزش ما میخواهیم از Puppeteer استفاده کنیم. این کتابخانه توسط تیم توسعه ابزار کروم نگهداری میشه و یک API عالی داره که میشه به راحتی باهاش کار کرد. 

نصب و راه اندازی

برای استفاده از Puppeteer شما باید Node.js رو نصب داشته باشید. شما میتونید نحوه انجام این کار رو از اینجا یاد بگیرید. توجه داشته باشید که تمام مثال های این آموزش به شدت بر روی سینتکس async/await تکیه می کنه. این فقط در نسخه های اخیر Node.js موجود هست, پس مطمئن بشید نسخه ی بالای 7.6.0 رو اجرا می کنید.

node --version
v8.3.0

به مسیر پروژه برید, npm رو راه اندازی کرده و Puppeteer رو نصب کنید. همچنین ممکنه به دسترسی sudo نیاز باشه.

npm init
npm i puppeteer

ممکنه نصبش چند دقیقه ای طول بکشه. دلیلش اینه که برخلاف سایر فریمورک های تست headless, کتابخانه Puppeteer به صورت خودکار یک نسخه از Chromium رو برای شما دانلود میکنه (نزدیک به 100 مگابایت). این یک ویژگی عالیست, چون نیازی به نصب و نگهداری یک نمونه محلی از کروم بصورت دستی نیست.

یک فایل index.js بسازید و برای کار آماده بشید.

ضبط صفحه نمایش

گرفتن اسکرین شات با puppeteer بسیار سادست و آپشن های زیادی وجود داره که میتونید دقیقا نتیجه مورد نظر رو کسب کنید. ما با یک مثال پایه شروع می کنیم و ادامه میدیم.

در قطعه کد زیر ما یک مرورگر headless ساده رو شروع کردیم, یک صفحه باز کردیم و یک اسکرین شات از تمام محتوای اون گرفتیم :

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://roocket.ir');
  await page.screenshot({
    path: 'landing-page.png',
    fullPage: true
  });

  browser.close();
})();

برای اجرای اپ Puppeteer فقط کافیه فایل index.js رو با node فراخوانی کنیم. در یک پروژه حقیقی شما باید تعدادی اسکریپت npm داشته باشید که فرایند خودکارسازی رو حتی جلوتر می بره.

node index.js

اگر هیچ خطایی وجود نداشته باشه ما باید یک فایل langing-page.png در مسیر کار خودمون داشته باشیم. بصورت پیش فرض ابعاد یک اسکرین شات 800 پیکسل در 600 پیکسل هست, اما از اونجا که ما مقدار fullPage رو true کردیم, تصویر ما با یک طول 800 پیکسلی و یک ارتفاعی که متناسب با مطالب صفحه نمایش داده میشه.

در زمان گرفتن اسکرین شات, Puppeteer یک پنجره ی مرورگر رو با عرض دلخواه شبیه سازی میکنه. اگر صفحه ای که تست می کنیم واکنش گرا باشه, ما یک snapshot از نحوه نمایش اون در نمایشگر دریافت می کنیم. ما میتونیم ابعاد رو توسط متد setViewport تغییر بدیم.

await page.setViewport({
  width: 1600, 
  height: 1000
});

با استفاده از این متد ما میتونیم اسکریپت خودمون رو ویرایش کنیم تا چندین اسکرین شات از دستگاه هایی با سایزهای مختلف داشته باشیم. این به ما اجازه میده تا به سرعت ببینیم که واکنش گرایی صفحه ما به خوبی کار میکنه یا خیر.


const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Ann array of viewport sizes for different devices.
  const viewports = [1600, 1000, 800, 600, 500];

  await page.goto('https://tutorialzine.com');

  for(let i=0; i < viewports.length; i++) {
    let vw = viewports[i];

    // The height doesn't matter since we are screenshotting the full page.
    await page.setViewport({
      width: vw,
      height: 1000
    });

    await page.screenshot({
      path: `screen-${vw}.png`,
      fullPage: true
    });
  }

  browser.close();
})();

اجرای این اسکریپت 5 تصویر تولید میکنه, هرکدوم برای یک نمایشگری که تعریف کردیم.

امکانات دیگری وجود داره که شما میتونید در متد ()screenshot استفاده کنید. شما میتونید یک بخش جدا شده از صفحه رو داشته باشید, کیفیت رو عوض کنید یا فرمت تصویر رو تغییر بدید. مستندات رو از این قسمت چک کنید.

ارتباط با UI

با استفاده از Puppeteer ما میتونیم به تمام عناصر یک صفحه دسترسی داشته باشیم. این شامل تمام محتوای ثابت مثل متن ها و تصاویر و عناصر تعاملی مثل لینک ها, فیلد ورودی, دکمه ها و غیره میشه. با استفاده از کنترل های خودکار میتونیم لینک ها رو تست کنیم, خرابی صفحات رو بررسی کنیم یا فرم ها رو اعتبارسنجی کنیم.

برای مثال این یک اسکریپت هست که صفحه ما رو بارگذاری میکنه, فرم جستجو رو باز کرده و برای عبارت JavaScript جستجو میکنه. ما این مثال رو در حالت headless اجرا می کنیم :

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false
  });
  const page = await browser.newPage();

  // Open page.
  await page.goto('https://tutorialzine.com');

  // Show search form.
  await page.click('.search-trigger');

  // Focus input field.
  await page.focus('#search-form-top input');

  // Type in query.
  await page.type('JavaScript', {delay: 200});

  // Submit the form.
  const searchForm = await page.$('#search-form-top');
  await searchForm.evaluate(searchForm => searchForm.submit());

  // Keep the browser open.
  // browser.close();
})();

از اونجا که ما از سینتکس async/await استفاده می کنیم, تمام مراحل در ترتیب صحیح اجرا می شوند و منتظر یکدیگر می مونند تا تمام بشه.

منبع

برچسب : ,
این مطلب را با دیگران به اشتراک بگذارید :

مقالات پیشنهادی

چگونه یک افزونه گوگل کروم را بسازیم ؟

گوگل کروم یکی از مرورگرهای محبوب‌ و پر استفاده است، این مسئله هم دلایل خوبی دارد. سرعت بالا، امنیت، دارا بودن ابزارهای مناسب برای توسعه دهندگان و … ....

احراز هویت گوگل در Node.js

در این مقاله می خواهیم درمورد استفاده از احرازهویت گوگل در اپلیکیشن Node.js صحبت کنیم. برای شروع کار شما به یک پروژه اولیه node بهمراه پکیج ها و مدل ه...

7 افزونه کاربردی گوگل کروم برای طراحان 

تمام طراحان راه مخصوص خودشان را برای کار کردن دارند. حال اگر شما یکی از آن دسته طراحانی هستید که کدنویسی و کارهای دیگر را در مرورگر‌تان انجام می دهید...

اعتبارسنجی رشته ها در Node.js

اعتبارسنجی اطلاعات ورودی یک بخش مهم و ضروری برای هر نرم افزاریست. شما باید از طبیعت اطلاعات بخصوص اونهایی که از منابع خارجی می آیند, با خبر باشید.