Nghịch ngợm với Puppeteer (P1)

Tram Ho

1. Pupperteer là gì?

Nguyên văn

Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome or Chromium.

Tạm dịch là:

Puppeteer là một thư viện của Node cung cấp API cấp cao để kiểm soát Chrome hoặc Chromium sử dụng giao thức DevTools. Puppeteer mặc định chạy headless, nhưng có thể được định cấu hình để chạy non-headless.

Mình sẽ giải thích một chút: Theo mình hiểu, run headless là việc bạn chạy browser mà không có giao diện. Việc chạy browser như vậy thường để crawl dữ liệu, chụp ảnh màn hình,… chứ không phải để duyệt web.

Một số việc khá hay ho mà bạn có thể làm với Pupperteer là:

  • Chụp ảnh màn hình hoặc xuất file pdf của các trang.
  • Crawl một SPA (Single-Page Application) và xuất ra nội dung pre-rendered (ví dụ như “SSR” (Server-Side Rendering)).
  • Tự động gửi form, test giao diện và nhập dữ liệu từ bàn phím,…
  • Tạo môi trường testing tự động cập nhật. Chạy bản thử nghiệm trong Chorme với các tính năng mới nhất và phiên bản javascript mới nhất.
  • Ghi lại timeline trace cho website của bạn giúp phát hiện sớm các vấn đề về hiệu năng.
  • Test Chorme Extensions.

Trong bài viết này, mình sẽ cùng các bạn thử dùng puppeteer để chụp ảnh màn hình hoặc xuất file pdf nhé 😃 Các tính năng khác, mình hẹn nhau trong tương lai nhé 😅

2. Nghịch ngợm thôi nào

Đầu tiên, mình sẽ init một project Node trong folder test

Đừng quên cài puppeteer cho project nhé:

Giờ thì mình sẽ viết file index.js để nghịch thử ahihi 😀.

2.1 Chụp ảnh màn hình cái nhỉ

Gõ lệnh run và chờ thành quả thôi nào:

Kết quả:

2.2 Thử xuất một file pdf nha

Kết quả:

2.3 Chụp trang yêu cầu authenticate

Nếu bạn chụp một trang yêu cầu đăng nhập thì sẽ thế nào nhỉ.

Ví dụ: Ở dây, mình muốn chụp màn hình trang viết bài của trang Viblo.

Kết quả:

Như trong trường hợp này, chúng ta sẽ chụp được trang đăng nhập. Vì khi brower run và truy cập tới trang https://viblo.asia/publish/post thì router được điều hướng sang trang đăng nhập vì trang mà chúng ta muốn truy cập yêu cầu authenticate.

Cách xử lý là chúng ta sẽ phải xét cookie trước khi truy cập trang web đó. Thử lại lần nữa nào:

Kết quả bạn thu được sẽ như vầy nè

Chúc các bạn thành công và hẹn gặp lại các bạn ở các bài viết tiếp theo.

Tài liệu tham khảo:

https://developers.google.com/web/tools/puppeteer/

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo