Sử dụng Puppeteer để dễ dàng kiểm soát trên Chrome không đầu
Làm thế nào về một cách dễ dàng để chuyển theo chương trình đến các trang khác nhau, chụp ảnh màn hình, extract nội dung trang web, tạo file PDF và chạy thử nghiệm? Như vậy, việc sử dụng thư viện mới của group Chrome, Puppeteer , một thư viện Node.js tóm tắt giao thức Chrome DevTools hiện khá dễ dàng.
Bắt đầu
Cách nhanh nhất để bắt đầu là sử dụng Thử Puppeteer , một công cụ cho phép chơi với Puppeteer ngay trong trình duyệt của bạn.
Nếu bạn muốn khám phá Puppeteer cho bất kỳ điều gì nghiêm trọng hơn là chỉ chơi xung quanh, bạn cần thực sự thêm thư viện vào dự án Node của bạn bằng Yarn hoặc npm:
$ yarn add puppeteer # or, using npm: $ npm install puppeteer Sau đó, tất cả những gì bạn phải làm là yêu cầu người múa rối và bạn sẽ sẵn sàng bắt tay vào công việc:
'use strict'; Sử dụng
Đánh giá các yếu tố
Dưới đây là một ví dụ đơn giản về Hello World sử dụng Puppeteer để truy cập bài viết trên Wikipedia về Hello World , extract đoạn đầu tiên của bài viết và xuất kết quả ra console :
'use strict'; const puppeteer = require('puppeteer'); async function helloWorld() { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https://en.wikipedia.org/wiki/%22Hello,_World!%22_program'); const firstPar = await page.$eval('#mw-content-text p', el => el.innerText); console.log(firstPar); // A "Hello, World!" program is a computer program that outputs ... await browser.close(); } helloWorld(); Do Puppeteer tiết lộ một API dựa trên lời hứa, thật dễ dàng sử dụng các hàm không đồng bộ để xác định một loạt các bước cần làm theo.
Ở trên, ta đã sử dụng $ eval trên cá thể trang để lấy phần tử đầu tiên phù hợp với bộ chọn của ta và sau đó extract văn bản bên trong của nó. Các trang cũng có phương thức $$ eval để chọn tất cả các phần tử phù hợp với bộ chọn.
Ngoài ra còn có các phương thức $ và $$ , tương tự, nhưng thay vào đó trả về một elementHandle . Tay cầm phần tử có thể được nhấp hoặc khai thác.
Chụp ảnh màn hình
Sử dụng Puppeteer để chụp ảnh màn hình của một trang hoặc một phần tử cũng dễ dàng như vậy. Dưới đây là một ví dụ đơn giản chụp ảnh màn hình trang chủ của Alligator.io và lưu nó vào đĩa:
async function takeScreenshot() { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https://alligator.io/'); await page.screenshot({ path: 'hello-alligator.png' }); await browser.close(); } takeScreenshot(); 🎩 Khá kỳ diệu nếu bạn hỏi tôi! Bây giờ hãy nói rằng bạn không hài lòng với ảnh chụp màn hình đó. Thay vào đó, bạn muốn hình ảnh Jpeg chất lượng thấp hơn và bạn cũng muốn kiểm soát kích thước chính xác của khung nhìn. Điều đó dễ dàng được thực hiện chỉ với một số tùy chọn khác:
async function takeScreenshot() { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https://alligator.io/'); await page.setViewport({ width: 1440, height: 900 }); await page.screenshot({ path: 'hello-alligator.jpg', type: 'jpeg', quality: 20 }); await browser.close(); } takeScreenshot(); Tạo file PDF cũng dễ dàng như sau:
async function pdf() { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https://alligator.io/'); await page.pdf({ path: 'hello-alligator.pdf' }); await browser.close(); } pdf(); Tương tác với Trang
Cho rằng ta đang kiểm soát hiệu quả version trình duyệt Chrome thực, ta cũng có thể tương tác với một trang, chẳng hạn như điền các trường biểu mẫu và nhấp vào các phần tử.
Dưới đây là một ví dụ thực hiện các bước sau:
- Truy cập trang chủ của Alligator.io
- Đặt tiêu điểm vào đầu vào tìm kiếm
- Chờ 1 giây
- Nhập từ Fancy width có độ trễ 150ms giữa các lần nhấn phím
- Chờ trang có một phần tử có lớp algolia__results
- Chụp màn hình
'use strict'; const puppeteer = require('puppeteer'); async function performSearch() { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https://alligator.io/'); await page.focus('.algolia__input'); await page.waitFor(1000); await page.type('.algolia__input', 'Fancy', { delay: 150 }); await page.waitForSelector('.algolia__results'); await page.screenshot({ path: 'search.png' }); await browser.close(); } performSearch(); Đây là ảnh chụp màn hình kết quả…
🤖 Bài đăng này hầu như không làm trầy xước bề mặt với những gì có thể với Chrome và Puppeteer không đầu. Tham khảo tài liệu API mở rộng để tìm hiểu sâu hơn.
Các tin liên quan
