خوش آمدید

در این مطلب قصد دارم که نحوه گرفتن تصویر از سایت یا صفحه مورد نظر با استفاده از Nodejs و Puppeteer رو بهتون آموزش بدم.

همونطور که میدونین مرورگرهایی که ما استفاده میکنیم، دارای رابط گرافیکی هستند و میتونیم آدرس مورد نظرمون رو در اون وارد کنیم و محتوای سایت رو ببینیم و درون اونا اسکرول کرده و اکشن‌های مختلف رو انجام بدیم. به این مرورگرها Headfull میگن.

حالا در کنار این مرورگرها، Headless browser نیز وجود داره که تفاوتش اینه که رابط گرافیکی نداره. با استفاده از مرورگرهای Headless میتونین در command line یا در محیط برنامه‌نویسی، در بین سایت‌های مختلف جابجا بشید و هر کاری که در مرورگرهای عادی انجام میدادین رو درون command line انجام بدین.

مرورگرهای Headless برای درست کردن تست‌های اتوماتیک وبسایت کاربرد دارند و به ما این امکان رو میدن که بدون اینکه خودمون بخوایم کاری انجام بدیم، در سایتهای مختلف جابجا بشه و کارهایی که مورد نظرمون هست رو انجام بده. یک کار دیگه که با استفاده از مرورگهای Headless زیاد انجام میدن اینه که از صفحه عکس بگیرن و یا اینکه محتوای صفحه رو به PDF تبدیل کنند و ...

در این مطلب قراره گرفتن تصویر از سایت رو یاد بگیرید. پس با ما همراه باشید.

از نسخه 59 به بعد مرورگر chrome، دستور chrome رو میتونین در command line مورد استفاده قرار بدین و اگر از سیستم عامل لینوکس یا OSX استفاده میکنید، کافیه که در .bashrc یک alias برای باز کردن chrome قرار بدین تا بتونین از chrome در command line استفاده کنید.
برای قرار دادن alias در .bashrc میتونین از دستور زیر استفاده کنید:

1.   alias chrome="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"

مثلا برای اینکه در Command line با استفاده از headless chrome یک screenshot از سایت google تهیه کنیم، بصورت زیر در ویندوز عمل میکنیم:

1. cd 'C:Program Files (x86)GoogleChromeApplication'
2.  
3. # Screenshot the page
4. .chrome.exe --headless --disable-gpu --screenshot=C:Tempscreenshot.png https://www.google.com/

به همین راحتی.

Puppeteer - ابزاری برای کار کردن با headless chrome در Nodejs

با استفاده از ابزار قدرتمند Puppeteer میتونین به راحتی در Nodejs از headless chrome استفاده کنید و کارهای جذابی رو انجام بدین.

برای اینکه با استفاده از Puppeteer یک screenshot از صفحه مورد نظر تهیه کنیم، باید 4 مرحله رو انجام بدیم:

1. در ابتدا مرورگر رو راه بندازیم
2. یک صفحه جدید باز کنیم
3. به آدرس مورد نظرمون بریم
4. از صفحه سایت screenshot بگیریم

در ابتدا یک دایرکتوری بنام puppeteer-example در desktop به وجود بیارید و درون اون yarn init بزنید تا package.json ساخته بشه. بعد از اون هم دستور yarn add puppeteer رو اجرا کنید تا این ابزار دانلود و نصب بشه.

در حین نصب puppeteer، مرورگر chromium و بقیه پیش‌نیازها دانلود و نصب میشن ولی ما تحریم هستیم و نمیتونیم بصورت عادی ازشون استفاده کنیم. یا باید از Proxy استفاده کنیم و یا اینکه میتونیم از سایت رایگان Shecan استفاده کنیم تا تحریم‌ها رو بشکونیم. وقتی که DNS ها رو همونی که shecan گفته قرار بدیم، دیگه همه سایتهایی که قبلا برای ما فیلتر بدون، بدون محدودیت و رایگان در دسترس خواهند بود.

در نهایت باید محتویات package.json شما بصورت زیر باشه:

1. {
2.   "name": "puppeteer-screenshot",
3.   "version": "1.0.0",
4.   "main": "index.js",
5.   "author": "Mohammad Esfandiari",
6.   "license": "MIT"
7. }

حالا یک فایل بنام index.js بسازید و کدهای زیر رو درونش قرار بدین:

1. const puppeteer = require('puppeteer');
2.  
3. (async () => {
4.  
5.   // مرحله 1
6.   const browser = await puppeteer.launch();
7.  
8.   // مرحله 2
9.   const page = await browser.newPage();
10.  
11.   // مرحله 3
12.   await page.goto('https://7learn.com');
13.  
14.   // مرحله 4
15.   await page.screenshot({path: '7learn.png'});
16.  
17.   await browser.close();
18. })();

همونطور که میبینید مراحل مورد نظر انجام شدن و با اینکار در نهایت و با اجرا کردن دستور node index.js یک تصویر از سایت سون لرن در دایرکتوری فعلی با نام 7learn.png ذخیره خواهد شد.

مشخص کردن viewport مرورگر

بصورت پیش‌فرض puppeteer اندازه 800 در 600 رو برای viewport مرورگر در نظر میگیره. شما به راحتی میتونین width و height مرورگر رو تغییر بدین. برای اینکار بصورت زیر عمل میکنیم:

1. const browser = await puppeteer.launch({
2.     defaultViewport: {
3.         width: 800,
4.         height: 500,
5.         isLandscape: true
6.     }
7. });

با استفاده از ویژگی isLandscape میتونیم landscape بودن رو مشخص کنیم.

تهیه تصویر تمام صفحه

برای اینکه تصویری از کل سایت بگیرید بصورت زیر عمل کنید:

1. await page.screenshot({
2.   path: '7learn.png',
3.   fullPage: true,
4. });

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

شما همچنین میتونین کاری کنید که از کامل لود شدن سایت مطمئن بشید. برای اینکار بصورت زیر عمل کنید:

1. await page.goto('https://7learn.com', {
2.   waitUntil: 'networkidle2',
3. });

اگر سرعت اینترنتتون خیلی بالا نیست و مدت زمان زیادی طول میکشه، میتونین با استفاده از ویژگی timeout زمان بیشتری رو برای گرفتن تصویر از سایت منتظر بمونید و دیگه puppeteer ارور نمیده. بصورت زیر:

1. const browser = await puppeteer.launch({
2.   timeout: 1000,
3. });

همونطور که مشاهده میکنید با استفاده از puppeteer میتونیم هر کاری که دلمون بخواد رو انجام بدیم و خروجی‌های مورد نظرمون رو بدست بیاریم.