PUPPETEER – CÀO DATA TỪ WEBSITE

Sep 25, 2020

Trước khi bắt đầu vào code thì chúng ta tìm hiểu sơ chút lý thuyết

Headless browser là gì? Làm được trò gì?

Muốn biết Puppeteer làm được trò gì, ta phải hiểu về khái niệm Headless browser – dịch cho vui là browser không đầu, tức là browser chạy mà không cần giao diện.

Ủa chạy browser không cần giao diện để làm chi vậy? Đôi khi chúng ta sẽ cần mở browser lên không phải để … duyệt web, mà là cào dữ liệu, để test, chụp screenshot, đo performance.

Puppeteer là cái gì?

Puppeteer là một thư viện của NodeJS, có khả năng điều khiển Chrome headless browser thông qua code.

Do vậy, Chrome làm được gì thì Puppeteer làm được cái đấy. Ta có thể dùng NodeJS + Puppeteer để làm nhiều trò hay ho như chụp ảnh màn hình, thu thập dữ liệu, chạy automation test.

Bắt đầu thực hiện :

Để làm được thì cần có :

IDE: Ở đây chúng ta sử dụng tool nào cũng được tùy khả năng (Visual Studio Code, Notepad++, sublime text….

NodeJS: Để cài NodeJS, các bạn vào https://nodejs.org/en/download/ nhé.Cứ mới nhất là được

Khởi tạo project

Tạo 1 thư mục mang tên puppeteer
Các bạn mở cửa sổ cmd trong thư mục này, gõ npm init, sau đó cứ enter ok hết để khởi tạo project nodejs
Tiếp tục gõ npm install puppeteer để cài puppeteer. npm sẽ tải luôn bản Chrome mới nhất khoảng 100MB nên có thể hơi lâu nhé (xem hình minh hoạ dưới).

4. Mở Visual Studio code hay Nodepad++ cũng được, gõ đoạn code sau vào và save lại thành file index.js

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  page.setViewport({ width: 1280, height:720 });
  await page.goto('https://dantri.com.vn/', { waitUntil: 'networkidle2' });
  await page.screenshot({path: 'dantri.png'})
  await browser.close();
})();

Vì các method như launch(), newPage() trả về một Promise, vì vậy để cho code trông tuần tự dễ nhìn, chúng ta sẽ sử dụng await/async.

Trong pham vi bài viết, chúng ta chỉ quan tâm tới một số api chính:

puppeteer.launch: Mở trình duyệt Chrome lên để bắt đầu làm trò. Hàm này trả về object kiểu Browser.
browser.newPage: Mở một tab mới trong Chrome để làm trò. Hàm này trả về object kiểu Page.
browser.close: Tắt trình duyệt (Đỡ phải tắt bằng tay)

page.goto: Đi tới một trang nào đó. Có params waitUntil khá quan trọng. Params này quyết định chúng ta chờ tới khi page vừa mới load xong, hay sau khi page đã load toàn bộ JavaScript và hình ảnh.
page.screenshot: Chụp ảnh tab hiện tại, lưu thành file ảnh.
page.evaluate: Đây là API quan trọng nhất, cho phép ta chạy script trong browser và lấy kết quả trả về. Chúng ta sẽ dùng API này để cào dantri nhé.

Chúng ta sẽ khởi động với màn lấy tiêu đề và url của các bài viết

1. Trước khi code thật thì chúng ta tìm hiểu cấu trúc HTML của dantri.com.vn

Các bạn có thể thấy, tiêu đề của các bài viết nằm trong element a, con của element h3 có class là news-item__title. URL nằm trong attribute href của element a đó luôn.

2. Chúng ta thử cào dữ liệu bằng cách viết code JavaScript trong của số console trước nào. Các bạn bấm qua tab console, dán đoạn code này và xem kết quả.

const puppeteer = require('puppeteer');
(async() => {
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
await page.goto('https://dantri.com.vn/');

const articles = await page.evaluate(() => {
    let titleLinks = document.querySelectorAll('h2.news-item__title > a');
    titleLinks = [...titleLinks];
    let articles = titleLinks.map(link => ({
        title: link.getAttribute('title'),
        url: link.getAttribute('href')
    }));
    return articles;
});

console.log(articles);
await browser.close();
})();

Hết.

Link tham khảo :

https://github.com/puppeteer/puppeteer

https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md

You need to login in order to like this post: click here