Thử nghịch với Headless browser và Puppeteer

Ủng hộ AnonyHome Team
Chờ một chút: bạn thấy bài viết có ích chứ? Hãy chia sẻ nó với mọi người nhé!

1.Headless browser là cái gì?

Thử nghịch với Headless browser và Puppeteer - AnonyHome

Headless Browser là một trình duyệt web không có giao diện đồ họa người dùng. Các headless browser cung cấp tương tác tự động một trang web trong một môi trường giống như các trình duyệt web phổ biến khác, nhưng nó được thực hiện thông qua giao diện dòng lệnh hoặc qua một mạng truyền thông.  Nôm na là bạn có thể chạy Chrome mà không thực sự phải chạy Chrome. :))
Headless Browser giúp chúng ta:
  • Kiểm tra tự động hóa trong các ứng dụng web hiện đại.
  • Chụp ảnh màn hình của các trang web.
  • Chạy các bài kiểm tra tự động cho các thư viện JavaScript.
  • Scrape các trang web cho dữ liệu.
  • Tự động tương tác của các trang web.
Các bạn có thể tìm hiểu thêm tại đây: https://en.wikipedia.org/wiki/Headless_browser

2.Vậy còn Puppeteer thì sao?

Thử nghịch với Headless browser và Puppeteer - AnonyHome
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. Những gì mà bạn làm được bằng giao diện người dùng trên Chrome thì bạn đều có thể làm bằng Puppeteer

  • Chụp màn hình và lưu lại thành file ảnh hoặc PDF
  • Lấy dữ liệu từ website cho dù site đó bắt ta phải login hay dùng AJAX để load data
  • Tự động submit form, UI testing, keyboard input …

Các bạn có thể tìm hiểu thêm tại đây: https://github.com/GoogleChrome/puppeteer

3.Bắt đầu nghịch với Headless browser và Puppeteer

3.1 Cài đặt NodeJS

Đầu tiên bạn cần phải cài đặt NodeJS. Để cài NodeJS, các bạn vào đây để tải về nhé:
Công việc này chắc không quá khó. Nên mình không hướng dẫn cụ thể nữa.

3.2 Tạo một project

  • Tạo một folder đặt tên bất kì.
  • Các bạn mở cửa sổ cmd trong thư mục này, gõ npm initsau đó cứ enter ok hết để khởi tạo project nodejs.
  • Cuối cùng gõ npm install –save puppeteer để cài puppeteer. 

Lưu ý: Khi bạn cài đặt Puppeteer, nó sẽ download về phiên bản chrome mới nhất. Nên sẽ tốn thêm ít thời gian nhé.

3.3 Test thôi

Mở notepad++ của bạn lên. Hoặc một IDE tương tự. Gõ đoạn code bên dưới vào. Và lưu file đó vào trong folder mà bạn đã tạo ở trên với tên là index.js. Với code này ta sẽ di chuyển đến trang https://anonyhome.blogspot.com và chụp lại ảnh màn hình rồi lưu lại với tên CrthangBlog.png

// file index.js
const puppeteer = require('puppeteer');
(async () => {
// mở trình duyệt
const browser = await puppeteer.launch({ headless: false });
// Mở 1 page mới
const page = await browser.newPage();
// đi đến trang AnonyHome
await page.goto('https://anonyhome.blogspot.com');
// chụp ảnh màn hình và lưu lại với tên CrthangBlog
await page.screenshot({path: 'CrthangBlog.png'});
// tắt trình duyệt
await browser.close();
}
)();

Từ cửa sổ cmd trong thư mục này, gõ node index.jsBạn sẽ thấy Chrome mở lên, sau đó đóng, chụp được file ảnh của trang AnonyHome.blogspot.com. Các bạn mở folder đã tạo bạn đầu lên để nhận kết quả.

Thử nghịch với Headless browser và Puppeteer - AnonyHome


Tạm kết. Một vài điều thú vị về Puppeteer đúng không? Phần sau mình sẽ thử crawl lấy dữ liệu từ 1 trang web thực tế nhé. Cám ơn các bạn đã theo dõi.
Chúc các bạn thành công. Đừng quên theo dõi
AnonyHome để cập nhật những bài viết mới nhé.
Share
0 0 vote
Vui lòng đánh giá bài viết
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
XEM THÊM
Chào các bạn! tiếp tục series…
0
Bạn thích bài viết chứ? Hãy để lại bình luận.x
()
x