Puppeteer - Tự động hóa các tác vụ trên trình duyệt

Puppeteer là gì?

Puppeteer là một thư viện của Node.js giúp điều khiển Chromium/Chrome thông qua giao diện lập trình (API). Nó cho phép bạn tự động hóa các tác vụ trên trình duyệt như:
• Tạo bot lướt web (crawling, scraping).
• Tự động hóa điền form, nhấp chuột.
• Chụp ảnh màn hình, tạo file PDF từ trang web.
• Kiểm tra giao diện (UI Testing) trên Chrome.
• Mô phỏng hành vi người dùng như cuộn trang, nhập liệu, chụp ảnh DOM.

Puppeteer hoạt động dựa trên Chrome DevTools Protocol, giúp tương tác với trình duyệt một cách trực tiếp mà không cần giao diện.

Cài đặt Puppeteer

Trước khi sử dụng, bạn cần cài Node.js và Puppeteer:

npm install puppeteer

Lệnh này sẽ tải xuống phiên bản Chromium phù hợp với Puppeteer.

Nếu bạn muốn sử dụng Chrome đã cài sẵn trên máy:

npm install puppeteer-core

Ví dụ sử dụng Puppeteer

1️⃣ Chụp ảnh màn hình trang web

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'screenshot.png' });
  await browser.close();
})();

Giải thích:

• Mở trình duyệt Chromium.
• Truy cập https://example.com.
• Chụp ảnh màn hình và lưu thành screenshot.png.
• Đóng trình duyệt.

2️⃣ Lấy dữ liệu từ trang web (Web Scraping)

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  const title = await page.evaluate(() => document.title);
  console.log('Tiêu đề trang:', title);

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

Giải thích:

• Mở Chrome và vào example.com.
• Trích xuất tiêu đề trang bằng document.title.
• Hiển thị kết quả trên console.

3️⃣ Tự động điền form và nhấn nút

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false }); // Mở giao diện Chrome
  const page = await browser.newPage();
  
  await page.goto('https://example.com/login');
  await page.type('#username', 'myUsername'); // Điền tên đăng nhập
  await page.type('#password', 'myPassword'); // Điền mật khẩu
  await page.click('#submit'); // Nhấn nút đăng nhập
  
  await page.waitForNavigation(); // Chờ tải trang mới
  console.log('Đăng nhập thành công!');

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

Giải thích:

• Mở trình duyệt có giao diện (headless: false).
• Điền username/mật khẩu vào form đăng nhập.
• Nhấn nút submit rồi chờ trang chuyển hướng.

4️⃣ Cuộn trang xuống cuối

await page.evaluate(async () => {
  await new Promise((resolve) => {
    let totalHeight = 0;
    const distance = 100;
    const timer = setInterval(() => {
      let scrollHeight = document.body.scrollHeight;
      window.scrollBy(0, distance);
      totalHeight += distance;
      if (totalHeight >= scrollHeight) {
        clearInterval(timer);
        resolve();
      }
    }, 100);
  });
});

Dùng để:

• Tải toàn bộ nội dung trên các trang web cuộn vô hạn (Facebook, Tiktok, Instagram).

Puppeteer có thể làm gì?

• Web Scraping – Lấy dữ liệu tự động từ website.
• Automation – Tự động hóa thao tác trình duyệt.
• Chụp ảnh & Xuất PDF – Dùng Puppeteer để tạo tài liệu PDF.
• UI Testing – Kiểm thử giao diện web mà không cần Selenium.
• Bypass CAPTCHA – Dùng AI hoặc proxy để vượt qua CAPTCHA.

Puppeteer vs Selenium

Tiêu chí Puppeteer Selenium
Ngôn ngữ JavaScript Nhiều ngôn ngữ (Python, Java, C#…)
Tốc độ Nhanh hơn vì dùng Chrome DevTools Chậm hơn vì qua WebDriver
Hỗ trợ trình duyệt Chrome/Chromium Chrome, Firefox, Safari…
Độ phức tạp Dễ cài đặt, code gọn nhẹ Cấu hình phức tạp hơn
Tự động hóa CAPTCHA Cần tích hợp giải pháp riêng Hỗ trợ tốt hơn với WebDriver

• Nếu chỉ làm việc với Chrome và muốn tốc độ cao, Puppeteer là lựa chọn tốt nhất.
• Nếu cần hỗ trợ nhiều trình duyệt hoặc viết test tự động, Selenium sẽ phù hợp hơn.

Tóm tắt

• Puppeteer là thư viện Node.js để điều khiển trình duyệt Chrome.
• Dùng để tự động hóa web: lấy dữ liệu, điền form, test giao diện.
• Nhanh hơn Selenium, nhưng chỉ hỗ trợ Chrome/Chromium.
• Ứng dụng phổ biến: bot tự động, web scraping, kiểm thử UI.