Web Scraping با Playwright و Node.js

به این آموزش ساده در مورد نحوه استفاده از Playwright و Node.js برای اسکرپینگ وب خوش آمدید.

در این آموزش، ما قصد داریم بر روی نحوه استفاده از Playwright برای موارد زیر تمرکز کنیم:

  • خراش دادن وب سایت ها،
  • گرفتن اسکرین شات،
  • و وب‌سایت‌هایی را که نیاز به ورود دارند، خراش می‌دهد.

اما اگر با خراش دادن وب‌سایت‌های معمولی آشنایی ندارید، این مقدمه ساده در مورد خراش دادن وب با Nodejs را بخوانید.

نمایشنامه نویس چیست؟

Web Scraping با Playwright و Node.js

Playwright یک کتابخانه اتوماسیون مرورگر منبع باز Node.js است. این سریع و سبک است و برای اجرای هر کار خراش دادن وب به خطوط بسیار کمی کد نیاز دارد. تقریباً از تمام مرورگرهای محبوب مانند Firefox و Chromium پشتیبانی می کند.

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

مرورگر Headless چیست؟

مرورگر هدلس یک مرورگر وب بدون رابط کاربری گرافیکی (GUI) است. به عبارت ساده، مرورگری است (مثلاً کروم) که در پس‌زمینه اجرا می‌شود بدون اینکه شما آن را ببینید.

از آنجایی که رابط کاربری گرافیکی وجود ندارد، منابع مصرف شده توسط مرورگر در حین خراش دادن هر وب سایت در مقیاس بسیار کمتر خواهد بود. شما می توانید چندین نمونه از مرورگر را بدون نگرانی در مورد استفاده از CPU اجرا کنید.

چرا از مرورگر Headless استفاده کنیم؟

حال، چرا به جای درخواست سنتی XHR از این مرورگر بدون سر برای خراش دادن استفاده می کنید؟ خب، بسیاری از وب سایت های مدرن از جاوا اسکریپت برای بارگذاری و نمایش پویا محتوا استفاده می کنند. مرورگرهای Headless می‌توانند جاوا اسکریپت را اجرا کنند و به آنها اجازه می‌دهد صفحات را مانند یک مرورگر معمولی رندر و پردازش کنند. اگر یک وب سایت به شدت به جاوا اسکریپت برای بارگیری محتوا متکی است، یک مرورگر بدون هد اطمینان می دهد که صفحه کاملاً رندر شده را ضبط می کنید.

خراش دادن یک وب سایت شناسایی نشده است

برخی از وب سایت ها از اقدامات ضد خراش استفاده می کنند که می تواند درخواست های ارسال شده از اسکریپت های خودکار را شناسایی و مسدود کند. مرورگرهای بدون سر می‌توانند رفتارهای انسان‌مانند را تقلید کنند و تشخیص بین ربات‌های اسکرپینگ و کاربران واقعی را برای وب‌سایت‌ها سخت‌تر می‌کنند. این یکی دیگر از مزایای استفاده از مرورگر هدلس برای خراشیدن است.

خراش دادن وب با نمایشنامه نویس

بیایید با استفاده از Playwright یک اسکراپر کوچک بسازیم و نحوه عملکرد آن را درک کنیم.

در اینجا مراحل خراش دادن یک وب سایت با Playwright وجود دارد:

  1. Node.js و NPM را نصب کنید
  2. NPM را راه اندازی کنید
  3. Playwright و Cheerio را نصب کنید
  4. مرورگرها را نصب کنید
  5. اسکریپت Node.js را ایجاد کنید
  6. Node.js Playwright’s Script را اجرا کنید

1. Node.js و NPM را نصب کنید

اولین قدم این است که Node.js و Npm را روی دستگاه خود نصب کنید. NPM به شما امکان می دهد بسته ها و Node را برای اجرای جاوا اسکریپت نصب کنید.

2. NPM را راه اندازی کنید

اما قبل از شروع کدنویسی، اجازه دهید محیط کدنویسی را تنظیم کنیم. ابتدا ترمینال را باز کنید. در مرحله بعد، یک پوشه ایجاد کنید که در آن اسکریپت playwright nodejs را نگه دارید. در نهایت از npm init -y دستور برای مقداردهی اولیه NPM. این -y از flag برای پرش به پرسشنامه اولیه استفاده می شود.

$ mkdir play
$ cd play
$ npm init -y

3. Playwright و Cheerio را نصب کنید

حالا بیایید Playwright و Cheerio را نصب کنیم. Playwright برای اتوماسیون مرورگر استفاده خواهد شد، در حالی که Cheerio برای تجزیه HTML استفاده خواهد شد (مشابه کاری که BeautifulSoup در پایتون انجام می دهد).

$ npm i playwright cheerio --save

من به همراه Playwright Cheerio را هم نصب کرده ام. Cheerio یک کتابخانه nodejs تجزیه اطلاعات است. زمانی که قیمت و سایر جزئیات را از داده‌های خام HTML صفحه مورد نظر استخراج می‌کنیم، استفاده می‌شود.

4. مرورگرها را نصب کنید

اولین باری که نمایشنامه نویس را نصب می کنید، ممکن است همه مرورگرها به روز نباشند. برای دانلود مرورگرهای جدید از دستور زیر استفاده کنید.

$ npx playwright install   

5. اسکریپت Node.js را ایجاد کنید

اکنون، اسکریپت Node.js را ایجاد می کنیم که برای خراش دادن یک وب سایت استفاده می شود. اولین اسکریپتی که اجرا می کنیم فایل right.js است که به سادگی یک صفحه وب را در مرورگر باز و بسته می کند. سپس، ما اسکریپت های اضافی را ایجاد خواهیم کرد:

  • برچسب های HTML را خراش دهید
  • اسکرین شات بگیرید
  • احراز هویت در یک وب سایت

شما می توانید یک فایل از ترمینال با استفاده از touch filename.js دستور دهید یا به سادگی یکی از ویرایشگر کد مورد علاقه خود را به صورت دستی ایجاد کنید.

من یک فایل js در پوشه play ایجاد کرده ام. شما می توانید آن را هر چیزی که دوست دارید نامگذاری کنید. اسمش را گذاشته ام 1_open_webpage.js.

نحوه باز کردن صفحه وب با Playwright در NodeJS

برای باز کردن یک صفحه وب با Playwright در Node JS، از chromium.launch دستور برای باز کردن مرورگر، سپس استفاده کنید NewPage() برای باز کردن یک برگه و در نهایت goto دستور باز کردن صفحه اجازه دهید ابتدا کد اصلی را بنویسیم که از طریق آن می توانیم صفحه هدف را باز کرده و آن را ببندیم.

// right.js

const playwright = require('playwright');
const cheerio = require('cheerio')

async function test(){
 const browser = await playwright.chromium.launch({headless: false});

 const page = await browser.newPage();
 await page.goto('https://www.myntra.com/trousers/the+indian+garage+co/the-indian-garage-co-men-black-slim-fit-solid-joggers/9922235/buy');

 await browser.close();
}

test()

اجازه دهید کد را مرحله به مرحله توضیح دهم.

  • ابتدا کتابخانه Playwright را وارد می کنیم.
  • سپس در داخل تست() عملکرد، خط اول از Playwright برای راه‌اندازی مرورگر Chromium استفاده می‌کند. گزینه headless: false به این معنی است که مرورگر دارای یک رابط کاربری گرافیکی (GUI) خواهد بود و شما می توانید پنجره مرورگر را ببینید. اگر شما بدون سر به عنوان درست است، واقعی، مرورگر در پس زمینه بدون پنجره قابل مشاهده اجرا می شود.
  • خط بعدی یک تب جدید در مرورگر باز کنید.
  • سپس با استفاده از تابع goto() playwright به مرورگر دستور می دهد تا صفحه مورد نظر را باز کند.
  • سپس با استفاده از بستن() تابع ما می خواهیم پنجره مرورگر را ببندیم. این نیز منابع شما را آزاد می کند.

راه اندازی اولیه آماده است. اما قبل از اینکه وارد آن شویم، اجازه دهید ابتدا صفحه را بررسی کنیم و بررسی کنیم که کدام اطلاعات را می‌خواهیم خراش دهیم و در کجای DOM قرار دارد.

6. Node.js Playwright’s Script را اجرا کنید

پس از ایجاد اسکریپت، کد Node.js را با استفاده از node filename.js دستور در ترمینال

$ node right.js

پروژه های Web Scraping با Playwright و NodeJS

در پروژه زیر، ما اسکریپت های Node.js را ایجاد می کنیم:

  1. اسامی محصولات و قیمت ها را خراش دهید
  2. اسکرین شات بگیرید
  3. اسکرین شات از صفحه کامل بگیرید
  4. احراز هویت در یک وب سایت

1. نحوه خراش دادن نام و قیمت محصولات

برای حذف نام و قیمت محصول، باید صفحه را با Playwright واکشی کنیم و سپس از کتابخانه Cheerio برای تجزیه HTML استفاده کنیم.

در این مثال، ما قصد داریم قیمت و توضیحات یک محصول را از یک وب‌سایت تجارت الکترونیک بررسی کنیم.

همانطور که در تصویر زیر مشاهده می کنید، نام محصول در داخل آن قرار دارد h1 با کلاس تگ کنید عنوان pdf.

قیمت محصول در داخل ذخیره می شود طول با کلاس تگ کنید pdp-price.

در حال حاضر، ما ایجاد می کنیم 2_parsing_html.js فایل برای دانلود و تجزیه داده ها.

// 2_parsing_html.js

const playwright = require('playwright');
const cheerio = require('cheerio')
let obj={}
let arr=[]

async function test(){
 const browser = await playwright.chromium.launch({headless: false});

 const page = await browser.newPage();
 await page.goto('https://www.myntra.com/trousers/the+indian+garage+co/the-indian-garage-co-men-black-slim-fit-solid-joggers/9922235/buy');
 let html = await page.content();

 const $ = cheerio.load(html);
 obj["name"]=$('h1.pdp-title').text()
 obj["price"]=$('span.pdp-price').text()

 arr.push(obj)
 console.log(arr)
 await browser.close();
}

test()

ما دو خط کد جدید از خود اضافه کرده ایم 1_open_webpage.js فایل. محتوا() تابع HTML خام صفحه محصول هدف ما را در اختیار ما قرار می دهد. سپس آن داده ها را روی کنسول خود چاپ می کنیم. با این قسمت دانلود انجام می شود. ما با موفقیت داده ها را از myntra.com خراش داده و دانلود کردیم. حال، بیایید عنوان و قیمت را با استفاده از Cheerio تجزیه کنیم.

با استفاده از تابع load() در حال ایجاد نمونه Cheerio هستیم.

obj["name"] = $('h1.pdp-title').text();

این خط محتوای متن را انتخاب می کند <h1> عنصر با کلاس pdp-title و آن را به ویژگی نام یک شی نسبت می دهد (obj).

obj["price"] = $('span.pdp-price').text();

این خط مشابه خط قبلی است اما محتوای متن را در داخل a استخراج می کند <span> عنصر با کلاس pdp-price.

پس از اجرای این کد، باید این خروجی را دریافت کنید.

$ 2_parsing_html.js
[ { name: 'The Indian Garage Co', price: '₹692' } ]

با این کار، ما موفق شده ایم یک وب سایت را با استفاده از Playwright خراش دهیم.

2. چگونه با نمایشنامه نویس اسکرین شات بگیریم؟

همراه با خراش دادن، می توانید با نمایشنامه نویس نیز اسکرین شات بگیرید. برای گرفتن اسکرین شات، نمایشنامه نویس دارای ویژگی داخلی است screenshot() عملکردی که می تواند روی شی صفحه مرورگر وب اعمال شود.

گرفتن اسکرین شات از نقاط کلیدی در اسکریپت اتوماسیون می تواند به شما کمک کند وضعیت صفحه وب را در آن لحظه به صورت بصری بررسی کنید. این به ویژه زمانی مفید است که می‌خواهید بفهمید چرا یک مرحله معین شکست می‌خورد.

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

یک را ایجاد خواهیم کرد 3_screenshot.js فایل با کد زیر

// 3_screenshot.js

const playwright = require('playwright');
const cheerio = require('cheerio')
let obj={}
let arr=[]

async function test(){
 const browser = await playwright.chromium.launch({headless: false});
 const page = await browser.newPage();
 await page.goto('https://www.myntra.com/trousers/the+indian+garage+co/the-indian-garage-co-men-black-slim-fit-solid-joggers/9922235/buy');
 await page.screenshot({ path: 'myntra.png' });
 await browser.close();
}
test()
$ node 3_screenshot.js

این screenshot() تابع یک اسکرین شات می گیرد و آن را در پوشه فعلی شما با نام ذخیره می کند myntra.png. هنگامی که این کد را اجرا کردید، باید یک اسکرین شات مانند این دریافت کنید.

3. چگونه با نمایشنامه نویس یک اسکرین شات تمام صفحه بگیریم؟

برای گرفتن اسکرین شات تمام صفحه می توانید پاس کنید تمام صفحه آرگومان تابع اسکرین شات. شما باید یک اسکرین شات مثل این بگیرید.

// 4_full_page_screenshot.js

const playwright = require('playwright');
const cheerio = require('cheerio')
let obj={}
let arr=[]

async function test(){
 const browser = await playwright.chromium.launch({headless: false});

 const page = await browser.newPage();
 await page.goto('https://www.myntra.com/trousers/the+indian+garage+co/the-indian-garage-co-men-black-slim-fit-solid-joggers/9922235/buy');
 await page.screenshot({ path: 'fp_myntra.png', fullPage: true });
 await browser.close();
}

test()
$ node 4_full_page_screenshot.js

4. چگونه می توان پشت دیوار تأیید هویت در نمایشنامه نویس خراش داد؟

Web Scraping فقط در مورد درخواست GET برای یک وب سایت نیست، گاهی اوقات مجبور خواهید بود از دیوار تأیید نیز عبور کنید. شما می توانید این کار را در نمایشنامه نویس با استفاده از page.fill و page.click کارکرد. برای این مثال، ما می‌خواهیم صفحه اصلی github.com را پس از ورود خراش دهیم.

// 5_authentication.js

const playwright = require('playwright');
const cheerio = require('cheerio')

async function test(){
    const browser = await playwright.chromium.launch({headless: false});
   
    const page = await browser.newPage();
    await page.goto('https://github.com/login');
         
    await page.fill('input[name="login"]', "your-user-name");
    await page.fill('input[name="password"]', "your-password");
    await page.click('input[type="submit"]');
   
    await page.waitForNavigation();
    // scrape anything from here
    await page.screenshot({ path: 'logged_git.png' });
    await browser.close();
   }
   
   test()
   
$ node 5_authentication.js

این .fill روش برای تنظیم مقدار یک فیلد ورودی استفاده می شود. دو پارامتر نیاز دارد:

  • selector: انتخاب کننده ای که فیلد ورودی را مشخص می کند.
  • value: مقداری که باید در فیلد ورودی پر شود.

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

  • selector: انتخاب کننده ای که عنصری را که قرار است روی آن کلیک شود مشخص می کند.

سپس ما منتظر هستیم تا با استفاده از ناوبری انجام شود waitForNavigation() تابع.

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

عروسک گردان در مقابل نمایشنامه نویس

Puppeteer و Playwright هر دو مورد علاقه توسعه دهندگان هستند و هر دو کتابخانه دارای اسناد عالی هستند. اگرچه تفاوت های خاصی بین این دو وجود دارد.

Puppeteer در مقایسه با Playwright جامعه بزرگی دارد، اما جامعه Playwrit به سرعت در حال رشد است و شما می توانید از نمودار ارائه شده در اینجا متوجه این موضوع شوید.

برای کسب اطلاعات بیشتر، این آموزش عالی در مورد نحوه استفاده از Puppeteer در Node.js را دنبال کنید.

اگر به آمار بیشتری در مورد Puppeteer vs Playwright نیاز دارید، این را بخوانید. و اگر می خواهید بفهمید کدام گزینه برای مورد استفاده شما بهتر است، این وبلاگ را بخوانید تا بینش بیشتری کسب کنید.

نتیجه

Playwright یک کتابخانه اتوماسیون مرورگر قدرتمند است که سریعتر از Puppeteer محبوبیت پیدا می کند. این یک پایه قوی دارد که به شما امکان می دهد وب سایت های بی پایان را خراش دهید.

اگر این مقاله را دوست دارید، فراموش نکنید که آن را در صفحات اجتماعی خود به اشتراک بگذارید.