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

ek3nk4r 2025-01-13

0 4 خواندن این مطلب 16 دقیقه زمان میبرد

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

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

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

خراش وب پتانسیل استخراج داده های ارزشمند از وب سایت ها را باز می کند و Playwright یک تغییر دهنده بازی برای خودکارسازی این فرآیند است. Playwright با پشتیبانی از چندین محیط مانند Node.js، Deno، و Bun، اسکراپینگ وب را برای مبتدیان و برای حرفه ای ها قدرتمند می کند.

در این وبلاگ، نحوه استفاده از Playwright برای خراش دادن وب در محیط های مختلف مانند Node.js، Deno و Bun را بررسی خواهیم کرد.

فهرست مطالب

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

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

ویژگی های کلیدی نمایشنامه نویس

نمایشنامه نویس دارای ویژگی هایی است که اتوماسیون مرورگر را یکپارچه و کارآمد می کند. در اینجا نگاهی دقیق تر به ویژگی های برجسته آن داریم:

پشتیبانی از مرورگرهای متقابل: کرومیوم، فایرفاکس، و WebKit را برای سازگاری یکپارچه در همه پلتفرم‌ها، خودکار می‌کند.
حالت های بدون سر و سر: حالت هدلس سریع و اشکال زدایی بصری را در حالت headful ارائه می دهد.
پشتیبانی چند زبانه: کتابخانه هایی برای جاوا اسکریپت، پایتون، جاوا و دات نت فراهم می کند.
رهگیری شبکه: درخواست ها و پاسخ ها را برای کنترل پیشرفته بازرسی، اصلاح یا مسدود می کند.
اسکرین شات ها و فیلم ها: تصاویری از جلسات مرورگر را برای اشکال زدایی و مستندسازی می گیرد.
اتوماسیون امن: از استفاده از پروکسی، ذخیره سازی ایمن و مدیریت CAPTCHA پشتیبانی می کند.

Playwright با مجموعه ویژگی‌های گسترده و طراحی قوی خود، به عنوان ابزاری همه کاره و مناسب برای توسعه‌دهندگان برای خودکارسازی مرورگرها و رسیدگی به نیازهای پیچیده وب‌سایت یا تست مورد توجه قرار می‌گیرد.

راه اندازی

شروع کار با نمایشنامه نویس ساده است. قبل از غواصی در وب اسکرپینگ، باید آن را در محیط توسعه دلخواه خود تنظیم کنید. Playwright از چندین زمان اجرا جاوا اسکریپت پشتیبانی می کند و آن را انعطاف پذیر و قابل دسترس می کند. در اینجا نحوه تنظیم آن برای Node.js، دنو، و نان:

NodeJS

دنو

نان

# Install Playwright using your favorite package manager, such as npm or Yarn.
# This is the most common setup and works seamlessly with Node.js projects.
npm install playwright

// Deno allows you to import Playwright directly from the Deno registry.
// There's no need for additional installation steps, making setup quick and easy.
import * as playwright from "https://deno.land/x/playwright@1.22.1/mod.ts";

# Bun, known for its performance and speed, also supports Playwright.
# Use Bun’s package manager to add it to your project effortlessly.
bun add playwright

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

در مرحله بعد، نحوه استفاده از Playwright را در محیط REPL (حلقه خواندن، ارزیابی، چاپ) بررسی خواهیم کرد.

نکته: نمایشنامه نویس در REPL

نمایشنامه نویس همچنین می تواند در محیط REPL (حلقه خواندن-ارزیابی-چاپ) استفاده شود که برای آزمایش سریع عالی است. در اینجا نحوه تنظیم آن در محیط های مختلف آورده شده است:

برای اجرای Playwright در محیط جاوا اسکریپت REPL در زمان های مختلف اجرا مانند Node.js، Deno و Bun، این مراحل را دنبال کنید:

Node.js

برای استفاده از Playwright در محیط Node.js، می‌توانید از قابلیت‌های REPL (Read-Evaluate-Print Loop) برای آزمایش سریع و نمونه‌سازی اولیه استفاده کنید. مراحل زیر را دنبال کنید تا Playwright را به صورت تعاملی تنظیم و کاوش کنید:

REPL را با پشتیبانی سطح بالای انتظار شروع کنید:
```
$ node --experimental-repl-await
```

در REPL:

const { chromium } = require("playwright");
const browser = await chromium.launch({ headless: false });
const page = await browser.newPage();
await page.goto("https://twitch.tv");

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

دنو

در Deno، می‌توانید با وارد کردن مستقیم از رجیستری Deno، از Playwright استفاده کنید. REPL (حلقه خواندن-ارزیابی-چاپ) به شما امکان می دهد دستورات Playwright را به صورت تعاملی با مجوزهای مورد نیاز آزمایش و اجرا کنید. برای شروع مراحل زیر را دنبال کنید:

Deno REPL را با مجوزهای لازم شروع کنید:
```
$ deno repl --allow-net --allow-env --allow-run
```

در REPL:

const { chromium } = await import(
  "https://deno.land/x/playwright@1.22.1/mod.ts"
);
const browser = await chromium.launch({ headless: false });
const page = await browser.newPage();
await page.goto("https://twitch.tv");

در Deno، مجوزهایی مانند --allow-net، --allow-env، و --allow-run برای عملکرد صحیح نمایشنامه نویس ضروری است.

نان

Bun یک محیط سریع و کارآمد برای استفاده از Playwright فراهم می کند. با استفاده از REPL (حلقه خواندن-ارزیابی-چاپ)، می توانید به سرعت دستورات Playwright را به صورت تعاملی آزمایش و اجرا کنید. برای شروع مراحل زیر را دنبال کنید:

Bun REPL را شروع کنید:
```
$ bun repl
```

در REPL:

const { chromium } = await import("playwright");
const browser = await chromium.launch({ headless: false });
const page = await browser.newPage();
await page.goto("https://twitch.tv");

استفاده از Playwright در یک محیط REPL به شما امکان می دهد اسکریپت های اتوماسیون را به صورت تعاملی در زمان های مختلف اجرا مانند Node.js، Deno، و Bun آزمایش و آزمایش کنید. این انعطاف پذیری آن را به گزینه ای عالی برای نمونه سازی سریع و اشکال زدایی تبدیل می کند.

مبانی

قبل از پرداختن به ویژگی‌های نمایشنامه‌نویس، بیایید با راه‌اندازی یک مرورگر، ایجاد یک زمینه جدید و باز کردن یک برگه مرورگر (به عنوان “صفحه”) شروع کنیم. اینها مراحل اساسی برای هر کار خراش دادن وب یا اتوماسیون در Playwright هستند.

const { chromium } = require("playwright");

(async () => {
  const browser = await chromium.launch({
    // Choose headless mode for speed or headful mode for debugging
    headless: false,
  });

  // Create a new browser context with custom settings
  const context = await browser.newContext({
    // Set viewport dimensions to match a common desktop resolution
    viewport: { width: 1920, height: 1080 },
  });

  // Open a new page (tab) in the browser
  const page = await context.newPage();

  // Now, we can use the page object for all our automation tasks
})();

هنگامی که یک مرورگر و صفحه آماده کردیم، می‌توانیم ویژگی‌های اصلی Playwright را بررسی کنیم، که هر چیزی را که برای خراش دادن وب کارآمد نیاز است را پوشش می‌دهد:

ناوبری: یک صفحه وب را با استفاده از بارگیری کنید page.goto().
کلیک دکمه: کلیک روی دکمه ها یا لینک ها را شبیه سازی کنید.
ورودی متن: متن را در فرم ها یا جعبه های جستجو وارد کنید.
اجرای جاوا اسکریپت: جاوا اسکریپت سفارشی را در صفحه اجرا کنید.
در انتظار مطالب: قبل از تعامل، اطمینان حاصل کنید که عناصر به طور کامل بارگذاری شده اند.

بیایید از Playwright برای خراش دادن داده های ویدئویی پویا از بخش هنر Twitch استفاده کنیم. در اینجا چیزی است که ما انجام خواهیم داد:

یک نمونه مرورگر را شروع کنید، یک زمینه ایجاد کنید و یک صفحه را باز کنید.
حرکت به https://twitch.tv/directory/game/Art.
صبر کنید تا صفحه به طور کامل لود شود.
داده‌های پویا، مانند عناوین جریان، تعداد بینندگان و جزئیات سازنده را تجزیه و استخراج کنید.

بیایید آن را گام به گام، با ناوبری و انتظار شروع کنیم.

ناوبری و انتظار

برای پیمایش می توانیم استفاده کنیم page.goto() عملکردی که مرورگر را به هر URL هدایت می کند:

const { chromium } = require("playwright");

(async () => {
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext({
    viewport: { width: 1920, height: 1080 },
  });
  const page = await context.newPage();

  try {
    // Navigate to the URL
    await page.goto("https://twitch.tv/directory/game/Art");

    const content = await page.content();

    console.log(content);
  } catch (error) {
    console.error("An error occurred:", error);
  } finally {
    // Close the browser
    await browser.close();
  }
})();

با این حال، برای وب سایت های جاوا اسکریپت سنگین مانند twitch.tv ما page.content() کد ممکن است قبل از بارگیری همه چیز، داده ها را پیش از موعد بازگرداند.

برای اطمینان از اینکه این اتفاق نمی افتد، می توانیم منتظر باشیم تا یک عنصر خاص در صفحه ظاهر شود. به عبارت دیگر، اگر لیست ویدیوها در صفحه وجود دارد، می‌توانیم با خیال راحت فرض کنیم که صفحه بارگذاری شده است:

await page.goto("https://twitch.tv/directory/game/Art");
// wait for first result to appear
await page.waitForSelector("div[data-target=directory-first-item]");
// retrieve final HTML content
console.log(await page.content());

در بالا استفاده کردیم page.waitForSelector() تابع منتظر ماندن عنصری است که توسط انتخابگر CSS ما در صفحه ظاهر می شود.

تجزیه داده ها

از آنجایی که Playwright از یک مرورگر وب واقعی با محیط جاوا اسکریپت استفاده می کند، می توانیم از قابلیت تجزیه HTML مرورگر استفاده کنیم. در نمایشنامه نویس این از طریق اجرا می شود locators ویژگی:

(async () => {
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext({
    viewport: { width: 1920, height: 1080 },
  });
  const page = await context.newPage();

  try {
    await page.goto("https://twitch.tv/directory/game/Art"); // Go to the URL

    await page.waitForSelector('div[data-target="directory-first-item"]'); // Wait for the content to load

    // Locate all stream boxes
    const streamBoxes = await page
      .locator('//div[contains(@class,"tw-tower")]/div[@data-target]')
      .elementHandles();

    // Parse data from each stream box
    const parsed = [];
    for (const box of streamBoxes) {
      const title = await box.$eval("h3", (el) => el.innerText);
      const url = await box.$eval(".tw-link", (el) => el.getAttribute("href"));
      const username = await box.$eval(".tw-link", (el) => el.innerText);
      const viewers = await box.$eval(
        ".tw-media-card-stat",
        (el) => el.innerText
      );
      const tagsElement = await box.$(".tw-tag");
      // tags are not always present:
      const tags = tagsElement ? await tagsElement.innerText() : null;

      parsed.push({
        title,
        url,
        username,
        viewers,
        tags,
      });
    }

    for (const video of parsed) {
      console.log(video);
    }
  } catch (error) {
    console.error("An error occurred:", error);
  } finally {
    await browser.close(); // Close the browser
  }
})();

خروجی نمونه

[
{
  title: '✖ first stream of the new year YIPPIE ( •̀ᴗ•́ )و ̑ | !kofi !merch',
  url: '/littlemisstina',
  username: '✖ first stream of the new year YIPPIE ( •̀ᴗ•́ )و ̑ | !kofi !merch\n' +
    '\n' +
    'LittleMissTina',
  viewers: '751 viewers',
  tags: 'ENVtuber'
}
{
  title: '♡ Short early stream | ( ͡° ͜ʖ ͡°))| !socials !discord !boosty !domestika',
  url: '/dzikawa',
  username: '♡ Short early stream | ( ͡° ͜ʖ ͡°))| !socials !discord !boosty !domestika\n' +
    '\n' +
    'Dzikawa',
  viewers: '122 viewers',
  tags: 'digital'
}
    ...
  ]

در کد بالا، هر باکس نتیجه را با استفاده از انتخابگرهای XPath انتخاب کردیم و با استفاده از انتخابگرهای CSS، جزئیات را از درون آن استخراج کردیم.

روی دکمه ها و ورودی متن کلیک کنید

برای کاوش کلیک و ورودی متن، بیایید اسکراپر twitch.tv خود را با قابلیت جستجو گسترش دهیم:

ما به twitch.tv خواهیم رفت
کادر جستجو را انتخاب کنید و یک عبارت جستجو را وارد کنید
روی دکمه جستجو کلیک کنید یا Enter را فشار دهید
صبر کنید تا محتوا بارگذاری شود
نتایج را تجزیه کنید

در نمایشنامه نویس برای تعامل با مؤلفه های وب، می توانیم از همان عملکرد مکان یاب که در تجزیه استفاده کردیم استفاده کنیم:

(async () => {
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext({
    viewport: { width: 1920, height: 1080 },
  });
  const page = await context.newPage();

  try {
    // Go to the Twitch Art directory
    await page.goto("https://www.twitch.tv/directory/game/Art");

    // Find the search box and enter the query
    const searchBox = page.locator('input[autocomplete="twitch-nav-search"]');
    await searchBox.type("Painting", { delay: 100 });

    // Press Enter to submit the search
    await searchBox.press("Enter");

    // Alternatively, click the search button explicitly
    // const searchButton = page.locator('button[aria-label="Search Button"]');
    // await searchButton.click();

    // Click on the "Tagged Channels" link
    await page.locator('.search-results .tw-link[href*="all/tags"]').click();

    // Wait for the results to load
    await page.waitForSelector("div[data-target]");

    // Parse the results
    const parsed = [];
    const streamBoxes = await page
      .locator('//div[contains(@class,"tw-tower")]/div[@data-target]')
      .elementHandles();

    for (const box of streamBoxes) {
      const title = await box.$eval("h3", (el) => el.innerText.trim());
      const url = await box.$eval(".tw-link", (el) => el.getAttribute("href"));
      const username = await box.$eval(".tw-link", (el) => el.innerText.trim());
      const viewers = await box.$eval(".tw-media-card-stat", (el) =>
        el.innerText.trim()
      );
      const tagsElement = await box.$(".tw-tag");
      const tags = tagsElement ? await tagsElement.innerText() : null;

      parsed.push({
        title,
        url,
        username,
        viewers,
        tags,
      });
    }

    // Print the parsed data
    console.log(parsed);
  } catch (error) {
    console.error("An error occurred:", error);
  } finally {
    // Close the browser
    await browser.close();
  }
})();

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

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

پیمایش و صفحه بندی بی نهایت

بخش نتایج جریان twitch.tv از صفحه‌بندی پیمایش بی‌نهایت استفاده می‌کند. برای بازیابی بقیه نتایج در اسکراپر Playwright ما باید به طور مداوم به آخرین نتیجه قابل مشاهده در صفحه پیمایش کنیم تا بارگذاری صفحات جدید را ایجاد کنیم.

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

در نمایشنامه نویس این کار را می توان با استفاده از مکان یاب و scrollIntoViewIfNeeded() تابع ما به پیمایش آخرین نتیجه برای شروع بارگیری صفحه بعدی ادامه می دهیم تا زمانی که نتایج جدیدی ظاهر نشود:

(async () => {
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext({ viewport: { width: 1920, height: 1080 } });
  const page = await context.newPage();

  try {
    // Go to the Twitch Art directory
    await page.goto('https://www.twitch.tv/directory/game/Art');

    // Wait for the content to fully load
    await page.waitForSelector('div[data-target="directory-first-item"]');

    // Loop scrolling until no more new elements are loaded
    let streamBoxes;
    while (true) {
      streamBoxes = await page.locator('//div[contains(@class,"tw-tower")]/div[@data-target]').elementHandles();
      await streamBoxes[streamBoxes.length - 1].scrollIntoViewIfNeeded();

      const itemsOnPage = streamBoxes.length;
      await page.waitForTimeout(2000); // Wait for new items to load

      const itemsOnPageAfterScroll = (await page.locator('//div[contains(@class,"tw-tower")]/div[@data-target]').elementHandles()).length;

      if (itemsOnPageAfterScroll > itemsOnPage) {
        continue; // More items loaded - keep scrolling
      } else {
        break; // No more items - break scrolling loop
      }
    }

    // Parse the data
    const parsed = [];
    for (const box of streamBoxes) {
        ...

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

توابع پیشرفته

ما رایج‌ترین ویژگی‌های نمایشنامه‌نویس مورد استفاده در اسکراپینگ وب را پوشش داده‌ایم: پیمایش، انتظار، کلیک کردن، تایپ کردن و پیمایش. با این حال، چند ویژگی پیشرفته وجود دارد که برای خراش دادن اهداف پیچیده تر خراش دادن وب مفید است.

ارزیابی جاوا اسکریپت

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

به عنوان مثال، اگر پیمایش داخلی با مشکل مواجه شد، می‌توانیم تابع جاوا اسکریپت پیمایشی خود را تعریف کرده و آن را به Playwright ارسال کنیم:

await page.evaluate(() => {
  const items = document.querySelectorAll(".tw-tower > div");
  if (items.length > 0) {
    items[items.length - 1].scrollIntoView({
      behavior: "smooth",
      block: "end",
      inline: "end",
    });
  }
});

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

ارزیابی جاوا اسکریپت یک ویژگی قدرتمند است که می‌توان از آن برای حذف برنامه‌های وب پیچیده استفاده کرد، زیرا به ما کنترل کامل قابلیت‌های مرورگر را از طریق جاوا اسکریپت می‌دهد.

رهگیری درخواست و پاسخ

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

const { chromium } = require("playwright");

// Function to intercept requests
const interceptRequest = (request) => {
  // Update requests with custom headers
  if (request.url().includes("secret")) {
    request.headers({ "x-secret-token": "123" });
    console.log("patched headers of a secret request");
  }
  // Adjust sent data for POST requests
  if (request.method() === "POST") {
    request.postData("patched");
    console.log("patched POST request");
  }
};

// Function to intercept responses
const interceptResponse = (response) => {
  // Extract details from background requests
  if (response.request().resourceType() === "xhr") {
    console.log(response.headers()["cookie"]);
  }
};

(async () => {
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext({
    viewport: { width: 1920, height: 1080 },
  });
  const page = await context.newPage();

  // Enable intercepting for this page
  page.on("request", interceptRequest);
  page.on("response", interceptResponse);

  // Navigate to the Twitch Art directory
  await page.goto("https://www.twitch.tv/directory/game/Art");
  await page.waitForSelector('div[data-target="directory-first-item"]');

  // Close the browser
  await browser.close();
})();

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

مسدود کردن منابع

خراش دادن وب با استفاده از مرورگرهای بدون سر واقعاً پهنای باند فشرده است. مرورگر در حال دانلود همه تصاویر، فونت ها و سایر منابع گران قیمت است که اسکراپر وب ما به آنها اهمیتی نمی دهد. برای بهینه سازی این، می توانیم نمونه Playwright خود را برای مسدود کردن این منابع غیر ضروری پیکربندی کنیم:

const { chromium } = require("playwright");

// Block pages by resource type (e.g., image, stylesheet)
const BLOCK_RESOURCE_TYPES = [
  "beacon",
  "csp_report",
  "font",
  "image",
  "imageset",
  "media",
  "object",
  "texttrack",
  // We can even block stylesheets and scripts, though it's not recommended:
  // 'stylesheet',
  // 'script',
  // 'xhr',
];

// Block popular third-party resources like tracking
const BLOCK_RESOURCE_NAMES = [
  "adzerk",
  "analytics",
  "cdn.api.twitter",
  "doubleclick",
  "exelator",
  "facebook",
  "fontawesome",
  "google",
  "google-analytics",
  "googletagmanager",
];

// Function to intercept and block requests
const interceptRoute = (route) => {
  const request = route.request();

  // Block by resource type
  if (BLOCK_RESOURCE_TYPES.includes(request.resourceType())) {
    console.log(
      `Blocking background resource: ${request.url()} (blocked type: ${request.resourceType()})`
    );
    return route.abort();
  }

  // Block by resource name (URL)
  if (BLOCK_RESOURCE_NAMES.some((key) => request.url().includes(key))) {
    console.log(
      `Blocking background resource: ${request.url()} (blocked name)`
    );
    return route.abort();
  }

  // Continue all other requests
  return route.continue();
};

(async () => {
  const browser = await chromium.launch({
    headless: false,
    // Enable devtools to see total resource usage
    devtools: true,
  });
  const context = await browser.newContext({
    viewport: { width: 1920, height: 1080 },
  });
  const page = await context.newPage();

  // Enable intercepting for all requests
  await page.route("**/*", interceptRoute);

  // Navigate to the Twitch Art directory
  await page.goto("https://www.twitch.tv/directory/game/Art");
  await page.waitForSelector('div[data-target="directory-first-item"]');

  // Close the browser
  await browser.close();
})();

در مثال بالا، ما در حال تعریف یک قانون رهگیری هستیم که به Playwright می‌گوید هر درخواست منبع پس‌زمینه ناخواسته‌ای را که از نوع نادیده گرفته شده یا حاوی عبارات نادیده گرفته شده در URL هستند (مانند google analytics) را رها کند.

اجتناب از مسدود کردن

اگرچه Playwright از یک مرورگر واقعی استفاده می‌کند، اما وب‌سایت‌ها همچنان می‌توانند رفتار خودکار را از طریق تکنیک‌هایی مانند اثرانگشت جاوا اسکریپت و نظارت متغیر تشخیص دهند. این روش ها می توانند نشان دهند که آیا یک مرورگر توسط یک انسان کنترل می شود یا یک جعبه ابزار اتوماسیون.

برای اطلاعات بیشتر در این مورد، مقاله گسترده ما را در مورد اثر انگشت جاوا اسکریپت و نشت متغیرها ببینید:

[

How Javascript is Used to Block Web Scrapers? In-Depth Guide

Introduction to javascript fingerprinting and how to fortify automated web browsers against it.

How Javascript is Used to Block Web Scrapers? In-Depth Guide

](https://scrapfly.io/blog/how-to-avoid-web-scraping-blocking-javascript/#fortifying-browsers)

جایگزین ScrapFly

Playwright یک ابزار قدرتمند برای خراش دادن وب است، اما در برخی از سناریوهای خراش دادن وب، بزرگ کردن و مدیریت آن دشوار است و اینجاست که Scrapfly می تواند کمک کننده باشد!

ScrapFly APIهای اسکرین شات، اسکرین شات و استخراج وب را برای جمع آوری داده ها در مقیاس فراهم می کند.

میان افزار scrapfly

با استفاده از ScrapFly SDK می‌توانیم همان اقداماتی را که در Playwright انجام دادیم تکرار کنیم:

import { ScrapflyClient, ScrapeConfig } from "scrapfly-sdk";

const client = new ScrapflyClient({ key: "YOUR SCRAPFLY KEY" });

// We can use a browser to render the page, screenshot it and return final HTML
result = await client.scrape(
  new ScrapeConfig({
    url: 'https://www.twitch.tv/directory/game/Art',
    // enable browser rendering
    render_js: True,
    // we can wait for specific part to load just like with Playwright:
    wait_for_selector: "div[data-target=directory-first-item]",
    // we can capture screenshots
    screenshots: {"everything": "fullpage"},
    // for targets that block scrapers we can enable block bypass:
    asp: True
  }),
);

// It's also possible to execute complex javascript scenarios like button clicking
// and text typing:

result = client.scrape(new ScrapeConfig({
  url: "https://www.twitch.tv/directory/game/Art",
  // enable browser rendering
  wait_for_selector: "div[data-target=directory-first-item]",
  render_js: true,
  js_scenario: [
      // wait to load
      {"wait_for_selector": {"selector": 'input[autocomplete="twitch-nav-search"]'}},
      // input search
      {"fill": {"value": "watercolor", "selector": 'input[autocomplete="twitch-nav-search"]'}},
      // click search button
      {"click": {"selector": 'button[aria-label="Search Button"]'}},
      // wait explicit amount of time
      {"wait_for_navigation": {"timeout": 2000}}
  ]
}));

درست مانند Playwright، ما می‌توانیم یک مرورگر وب را برای پیمایش در وب‌سایت، کلیک روی دکمه‌ها، وارد کردن متن و برگرداندن HTML رندر شده نهایی به ما برای تجزیه کنترل کنیم.

سوالات متداول

برای پایان دادن به این مقدمه، اجازه دهید نگاهی به چند سوال متداول در مورد خراش دادن وب با Playwright در جاوا اسکریپت بیندازیم:

چگونه از پروکسی با Playwright در جاوا اسکریپت استفاده کنیم؟

با استفاده از جاوا اسکریپت می توانید به ازای هر نمونه مرورگر در Playwright یک سرور پراکسی اختصاص دهید. هنگامی که نیاز به چرخش IP یا دسترسی به محتوای خاص منطقه دارید، این برای خراش دادن وب مفید است:


const { chromium } = require("playwright");

(async () => {
  const browser = await chromium.launch({
    headless: true, // Set to false if you want a visible browser
    proxy: { server: "11.11.11.1:9000" }, // Proxy server configuration
    // Optional: Add authentication
    // proxy: { server: '11.11.11.1:9000', username: 'user', password: 'pass' },
  });

  const page = await browser.newPage();
  await page.goto("https://example.com");

  // Scrape or interact with the page here

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

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

هنگام استفاده از Playwright می توانید یک پروکسی برای نمونه مرورگر خود اختصاص دهید. این به ویژه برای حذف محتوای خاص منطقه یا اجتناب از ممنوعیت IP مفید است. بسته به نیاز شما، پروکسی ها را می توان با یا بدون احراز هویت پیکربندی کرد.

کدام مرورگر Headless برای Scraping نمایشنامه نویس جاوا اسکریپت بهترین است؟

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

از سوی دیگر، فایرفاکس می تواند به ویژه برای دور زدن کپچاها و جلوگیری از شناسایی مفید باشد، زیرا کمتر در اسکرپینگ وب استفاده می شود و بنابراین احتمال کمتری دارد که اقدامات ضد خراش را ایجاد کند.

خلاصه

این راهنما مورد بررسی قرار گرفت نمایشنامه نویس با جاوا اسکریپت، یک جعبه ابزار اتوماسیون مرورگر برای خراش دادن وب. نکات کلیدی عبارتند از:

ویژگی های اصلی: پیمایش، کلیک روی دکمه، ورودی متن، پیمایش و تجزیه داده ها.
مثال زندگی واقعی: Scraping دسته هنری Twitch.tv برای عناوین، بینندگان و جزئیات سازنده.
ابزارهای پیشرفته: مسدود کردن منابع، رهگیری درخواست و ارزیابی جاوا اسکریپت.
اسکرول بی نهایت: تکنیک های مدیریت بارگذاری محتوای پویا.
استفاده از پروکسی: دور زدن محدودیت های جغرافیایی و اقدامات ضدخراش.
جایگزین: ScrapFly برای خراش دادن در مقیاس بزرگ با محافظت ضد ربات و رندر جاوا اسکریپت.

با مجموعه ابزار غنی از ویژگی Playwright، می‌توانید وب‌سایت‌های مدرن و پویا را به‌طور کارآمد خراش دهید و در عین حال بر چالش‌های رایجی مانند CAPTCHA و تأخیر بارگذاری محتوا غلبه کنید.

ek3nk4r 2025-01-13

0 4 خواندن این مطلب 16 دقیقه زمان میبرد