การขูดเว็บด้วย Puppeteer และ Nodejs

ในบทความนี้ ฉันจะแสดงให้คุณเห็นว่าคุณสามารถทำการขูดเว็บโดยใช้ Puppeteer และ Nodejs ได้อย่างไร ในการเริ่มต้น เราต้องทำความเข้าใจก่อนว่าการขูดเว็บคืออะไร และ Puppeteer สามารถช่วยให้เราทำเช่นนั้นได้อย่างไร

การขูดเว็บ

การขูดเว็บเป็นกระบวนการดึงข้อมูลจากหน้าเว็บ มันเกี่ยวข้องกับการดึงข้อมูลหน้าเว็บแล้วดึงข้อมูลออกมา หลังจากแยกข้อมูลแล้ว คุณสามารถทำอะไรก็ได้ที่คุณต้องการด้วยข้อมูลนั้น คุณสามารถใช้สิ่งนั้นสำหรับ API หรือเก็บไว้ในไฟล์ CSV

นักเชิดหุ่น

Puppeteer เป็นไลบรารี Nodejs แบบโอเพ่นซอร์สที่พัฒนาโดย Google มีพื้นฐานมาจากโครเมียม ซึ่งเป็นเวอร์ชันยอดนิยมของ Google Chrome Puppeteer ทำงานแบบไม่มีส่วนหัวตามค่าเริ่มต้น แต่สามารถกำหนดค่าให้ใช้งาน Chrome หรือ Chromium แบบเต็ม (ไม่มีส่วนหัว) ได้
ไม่เพียงช่วยให้เราทำการขูดเว็บเท่านั้น แต่เรายังสามารถทำอะไรได้มากกว่านั้นอีกด้วย ชอบ:

การสร้างภาพหน้าจอของหน้าเว็บ
กำลังสร้าง pdf
การส่งแบบฟอร์มอัตโนมัติ การทดสอบ UI การป้อนข้อมูลด้วยแป้นพิมพ์ ฯลฯ

มาทำการขูดเว็บกันดีกว่า

ในการเริ่มต้น เราจำเป็นต้องมี Nodejs ในระบบของเรา หากคุณไม่มี Nodejs คุณสามารถติดตั้งได้โดยไปที่ เว็บไซต์อย่างเป็นทางการ
ตอนนี้ให้สร้างโฟลเดอร์และตั้งชื่อตามที่คุณต้องการ แล้วเปิดใน vscode เปิดเทอร์มินัลแล้วเขียนคำสั่งต่อไปนี้เพื่อเริ่มต้นโฟลเดอร์โปรเจ็กต์ด้วยไฟล์ package.json:

npm init -y

ตอนนี้สร้างไฟล์ index.js หลังจากนี้ ให้รันคำสั่งต่อไปนี้เพื่อติดตั้ง Puppeteer:

npm install --save puppeteer

การติดตั้งจะใช้เวลาสักครู่เนื่องจากจะติดตั้งโครเมียมด้วย ดังนั้นจงอดทน

สำหรับคำแนะนำเฉพาะนี้ เราจะแยก "หน้าเว็บนี้":

เพื่อให้ทุกอย่างง่ายขึ้น เราจะแยกเฉพาะชื่อเรื่องและบทสรุปจากหน้าเว็บนี้เท่านั้น ตอนนี้เปิดไฟล์ index.js แล้วทำตามขั้นตอนเหล่านี้:

ขั้นตอนที่ 1

ต้องการ Puppeteer เพื่อที่เราจะได้ใช้มัน

const puppeteer = require("puppeteer");

ขั้นตอนที่ 2

สร้างฟังก์ชัน async เพื่อให้เราสามารถใช้คีย์เวิร์ด await ได้ นี่เป็นเพราะนักเชิดหุ่นใช้คำสัญญา

async function scrap() {
}
scrap();

เราจะเขียนโค้ดที่เหลือในฟังก์ชันนี้

ขั้นตอนที่ 3

โทร puppeteer.launch() เพื่อเปิดเบราว์เซอร์

const browser = await puppeteer.launch();

ขั้นตอนที่ 4

เรียก browser.newPage() เพื่อสร้างอินสแตนซ์ของเพจ

const page = await browser.newPage();

ขั้นตอนที่ 5

โทรไปที่ page.goto() และระบุ URL ของหน้าเว็บที่เราต้องการทิ้งเป็นอาร์กิวเมนต์

await page.goto("https://www.imdb.com/title/tt1013752/");

ขั้นตอนที่ 6

โทรไปที่ page.evaluate() มันใช้ฟังก์ชันเป็นอาร์กิวเมนต์ ในฟังก์ชันนี้ เราสามารถเลือกองค์ประกอบใดก็ได้จากหน้าเว็บ ในกรณีของเรา เราจะเลือกชื่อเรื่องและข้อมูลสรุปจากหน้าเว็บนั้น
ไปที่ "หน้าเว็บ" นั้นแล้วเปิดเครื่องมือสำหรับนักพัฒนา คลิกที่เครื่องมือตรวจสอบ (ที่มุมซ้ายบน) จากนั้นคลิกที่ชื่อ

คลิกขวาที่องค์ประกอบที่ไฮไลต์บนแท็บองค์ประกอบ จากนั้นคลิกที่ "คัดลอก" จากนั้นคลิกที่ "ตัวเลือกการคัดลอก" เพื่อคัดลอกตัวเลือก CSS ในทำนองเดียวกัน คุณยังสามารถคัดลอกตัวเลือกของข้อมูลสรุปได้เช่นกัน ตอนนี้ให้ดูที่รหัสต่อไปนี้:

const data = await page.evaluate(() => {
   const title = document.querySelector("#title-overview-widget > div.vital > div.title_block > div > div.titleBar > div.title_wrapper > h1").innerText;
   const summary = document.querySelector("#title-overview-widget > div.plot_summary_wrapper > div.plot_summary > div.summary_text").innerText;
   return {
     title,
     summary
   }
});

ในโค้ดข้างต้น เราเลือกชื่อเรื่องและข้อมูลสรุป จากนั้นจัดเก็บข้อความภายในไว้ในตัวแปร (ชื่อเรื่องและสรุป) หลังจากนั้นเราส่งคืนออบเจ็กต์ (เราใช้ไวยากรณ์ชวเลข es6) ซึ่งมีชื่อเรื่องและบทสรุป วัตถุนี้จะถูกเก็บไว้ในตัวแปรข้อมูล ในทำนองเดียวกัน คุณสามารถเลือกองค์ประกอบใดก็ได้จากหน้าเว็บ จากนั้นสิ่งที่คุณจะส่งคืนจากฟังก์ชันนั้นจะถูกจัดเก็บไว้ในตัวแปรข้อมูล

ตอนนี้เมื่อเราดึงข้อมูลสำเร็จแล้ว เราก็สามารถทำอะไรกับมันได้ เราสามารถจัดเก็บไว้ในไฟล์ CSV หรือใช้เป็น API ได้

ขั้นตอนสุดท้าย

โทร browser.close() เพื่อปิดเบราว์เซอร์

await browser.close();

ในการรันไฟล์ index.js ให้เขียนคำสั่งต่อไปนี้ในเทอร์มินัล:

node index.js

นี่คือลักษณะของโค้ดของเรา:

const puppeteer = require("puppeteer");
async function scrap() {
  // Launch the browser
  const browser = await puppeteer.launch();
  // Create an instance of the page
  const page = await browser.newPage();
  // Go to the web page that we want to scrap
  await page.goto("https://www.imdb.com/title/tt1013752/");
  // Here we can select elements from the web page
  const data = await page.evaluate(() => {
    const title = document.querySelector(
      "#title-overview-widget > div.vital > div.title_block > div > div.titleBar > div.title_wrapper > h1"
    ).innerText;
    const summary = document.querySelector(
      "#title-overview-widget > div.plot_summary_wrapper > div.plot_summary > div.summary_text"
    ).innerText;
    // This object will be stored in the data variable
    return {
      title,
      summary,
    };
  });
  // Here we can do anything with this data
  // We close the browser
  await browser.close();
}
scrap();

บทสรุป

การขูดเว็บเป็นสิ่งที่สนุกที่จะทำ มันมีกรณีการใช้งานมากมาย มีไลบรารีอื่น ๆ ที่คุณสามารถใช้เพื่อขูดเว็บได้ อย่างไรก็ตาม Puppeteer ช่วยให้ทำได้ง่ายขึ้น มันไม่เพียงช่วยให้เราทำการขูดเว็บได้เท่านั้น แต่ยังมีสิ่งอื่น ๆ ที่เราสามารถทำได้อีกด้วย

หากคุณต้องการเชื่อมต่อกับฉัน ติดตามฉันได้ที่ twitter

การขูดเว็บด้วย Puppeteer และ Nodejs