Web Scraping với Node.js: Hướng dẫn Puppeteer & Playwright
TL;DR
Sử dụng Node.js fetch cho các trang tĩnh được phép hoặc API đã được tài liệu hóa; thêm trình duyệt chỉ khi dữ liệu cần thiết xuất hiện sau JavaScript hoặc hành động tương tác.
Puppeteer và Playwright đều điều khiển trình duyệt. Mô hình locater và đa trình duyệt của Playwright thường phù hợp với các quy trình làm việc được duy trì; Puppeteer là lựa chọn tập trung cho tự động hóa trên Chrome.
Chờ một phần tử hay phản hồi có ý nghĩa, không phải một giấc ngủ cố định hay một sự kiện networkidle toàn cầu. Xác thực trạng thái trang kết quả trước khi trích xuất.
Tái sử dụng tài nguyên trình duyệt trong một công việc có giới hạn, đóng chúng một cách đáng tin cậy, và lưu trữ URL nguồn, thời gian lấy dữ liệu, phiên bản trình phân tích, và lý do từ chối.
Nstdata Crawl có thể cung cấp việc thu thập trang đã được render, phát hiện trang, đầu ra sẵn sàng cho LLM, và định tuyến proxy tích hợp tới một ứng dụng Node.js thông qua API hoặc SDK đã được tài liệu hóa.
Khi nào một trình thu thập Node.js nên sử dụng trình duyệt?
Một trình thu thập Node.js nên sử dụng trình duyệt khi nội dung yêu cầu của một trang được phép được tạo ra bởi JavaScript phía khách hoặc một hành động của người dùng không thể được đại diện bởi một API nguồn đã được tài liệu hóa. Đầu tiên hãy kiểm tra HTML ban đầu và bảng mạng. Nếu nguồn cung cấp JSON ổn định qua API chính thức, việc sử dụng trình duyệt sẽ tăng thêm chi phí và độ phức tạp vận hành mà không cải thiện ngữ nghĩa trong trường. Nếu trang dựa vào React, Vue, hoặc một ứng dụng được render bởi khách khác, fetch() có thể chỉ trả về một shell trống.
Nstdata Crawl là một con đường thu thập khác khi đầu ra là nội dung trang thay vì một chuỗi các tương tác trình duyệt.
Hướng dẫn hướng dẫn mạng Playwright cho thấy rằng các yêu cầu và phản hồi của trình duyệt có thể được kiểm tra, trong khi mô tả các hành động phần tử và đầu vào. Cả hai công cụ hoạt động trong phạm vi truy cập được cấp bởi nguồn. Một trình duyệt không cung cấp quyền vào các trang riêng tư hoặc bỏ qua một thử thách.
Puppeteer và Playwright so sánh như thế nào cho việc thu thập dữ liệu?
Lựa chọn dựa trên tương tác cần thiết và ngăn xếp vận hành của đội ngũ thay vì trên một tuyên bố “tốt nhất” chung chung. Puppeteer có một mô hình trình duyệt/trang trực tiếp và thường thấy trong các kịch bản hướng tới Chrome. Playwright cung cấp một mô hình tương tự với các ngữ cảnh trình duyệt, locater dựa trên vai trò, và hỗ trợ đã được tài liệu cho Chromium, Firefox và WebKit. Cả hai đều yêu cầu cài đặt trình duyệt, quản lý bộ nhớ, thời gian chờ, chọn lọc, và điều chỉnh yêu cầu theo nguồn.
Quyết định
Puppeteer
Playwright
Phù hợp nhất
Quy trình làm việc tập trung vào Chrome
Quy trình làm việc đa trình duyệt hoặc nặng về locator được duy trì
Lựa chọn trang
Cú pháp selector CSS và tùy chỉnh
API locater với vai trò, văn bản, CSS, XPath
Tách biệt
Các ngữ cảnh trình duyệt có sẵn
Các ngữ cảnh trình duyệt là một đơn vị quy trình làm việc trung tâm
Kiểm tra mạng
Sự kiện yêu cầu/phản hồi và chặn
Sự kiện yêu cầu/phản hồi, định tuyến, thử nghiệm API
Gánh nặng vận hành
Vòng đời trình duyệt, bộ nhớ, gói
Vòng đời trình duyệt, bộ nhớ, gói
Đừng giả định rằng tài liệu của một gói bảo đảm thành công trước một trang web cụ thể. Hành vi và quyền truy cập của trang quyết định xem quy trình làm việc có phù hợp hay không. Tài liệu tài liệu locator Playwright khuyên dùng các locater phản ánh cách một người dùng xác định một phần tử; điều này có thể giảm sự mong manh khi các tên lớp CSS được tạo ra thay đổi.
Bạn cần gì trước khi bắt đầu?
Sử dụng một phiên bản Node.js được hỗ trợ, một URL thử nghiệm đã được phê duyệt, dấu hiệu nội dung mong đợi, và ngân sách trang tối đa. Đối với Thư viện Playwright, cài đặt playwright và tệp nhị phân trình duyệt mà theo hướng dẫn chính thức hiện tại yêu cầu. Đối với Puppeteer, cài đặt puppeteer, đi kèm với hành vi tải xuống trình duyệt đã được tài liệu hóa; kiểm tra hướng dẫn bắt đầu với Puppeteer cho môi trường của bạn.
Đặt "type": "module" trong package.json cho các ví dụ ESM dưới đây, hoặc lưu chúng dưới dạng .mjs. Xác minh rằng một trình duyệt không giao diện có thể khởi động trong hình ảnh triển khai của bạn trước khi viết selector. [Chụp màn hình: Công cụ phát triển trình duyệt cho thấy nội dung mục tiêu xuất hiện sau một yêu cầu từ phía khách hàng.]
Bạn thu thập dữ liệu một trang đã được render như thế nào với Playwright?
Phương pháp 1: Sử dụng một Locator và một Kiểm tra Chấp nhận Rõ ràng
Bước 1. Kiểm tra trang đã được phê duyệt và xác định một tiêu đề, bài viết, hoặc phần tử mục ổn định. Ví dụ sử dụng example.com để minh họa cách thiết lập trình duyệt; nó không yêu cầu một mục tiêu động.
Bước 2. Tạo ngữ cảnh, điều hướng với một thời gian chờ, và đọc tiêu đề hiển thị:
import{ chromium }from'playwright';const browser =await chromium.launch({headless:true});try{const context =await browser.newContext();const page =await context.newPage();const response =await page.goto('https://example.com/',{waitUntil:'domcontentloaded',timeout:30000});if(!response?.ok())thrownewError(`Điều hướng thất bại: ${response?.status()}`);const heading = page.getByRole('heading',{level:1});await heading.waitFor({state:'visible',timeout:10000});const title =(await heading.textContent())?.trim();if(!title)thrownewError('Tiêu đề mong đợi là trống');console.log({url: page.url(), title });await context.close();}finally{await browser.close();}
Bước 3. Trên trang được phép thật sự của bạn, thay thế bộ định vị tiêu đề bằng dấu hiệu nội dung có ý nghĩa của trang, sau đó xác thực các trường đã trích xuất. Một phản hồi điều hướng có thể là 200 trong khi trang được hiển thị là một bức tường đồng ý, vì vậy hãy kiểm tra DOM và một mô hình hồ sơ đã được chấp nhận trước khi lưu trữ nó.
Làm Thế Nào Để Bạn Thực Hiện Nhiệm Vụ Tương Tự Với Puppeteer?
Phương Pháp 2: Sử Dụng Một Trang Và Một Bộ Chọn Phạm Vi
Bước 1. Giữ nguyên URL đã được phê duyệt và tiêu đề mong đợi để so sánh đo lường thư viện thay vì hai mục tiêu khác nhau.
Bước 2. Khởi động và đóng trình duyệt trong một khối finally:
importpuppeteerfrom'puppeteer';const browser =await puppeteer.launch({headless:true});try{const page =await browser.newPage();const response =await page.goto('https://example.com/',{waitUntil:'domcontentloaded',timeout:30000});if(!response?.ok())thrownewError(`Điều hướng thất bại: ${response?.status()}`);await page.waitForSelector('h1',{timeout:10000});const title =await page.$eval('h1',node=> node.textContent.trim());if(!title)thrownewError('Tiêu đề mong đợi là trống');console.log({url: page.url(), title });}finally{await browser.close();}
Bước 3. Ánh xạ các trường của trang thực tế, xác thực chúng, và lưu trữ siêu dữ liệu nguồn. Nếu trang yêu cầu nhấp chuột hoặc cuộn, hãy chờ một mặt hàng mới hoặc phản hồi sau hành động. Hướng dẫn hướng dẫn chèn yêu cầu Puppeteer lưu ý rằng các yêu cầu bị chèn sẽ bị đình trệ cho đến khi tiếp tục, phản hồi hoặc hủy bỏ; chỉ thêm chèn khi cần thiết.
Làm Thế Nào Để Giữ Cho Việc Scraping Trình Duyệt Ổn Định Trong Sản Xuất?
Giới hạn độ đồng thời của trang và trình duyệt dựa trên bộ nhớ đo được và giới hạn nguồn. Tái sử dụng một trình duyệt cho một tập hợp giới hạn các trang, nhưng cách ly các phiên với bối cảnh và tái sử dụng công nhân trước khi bộ nhớ tăng không giới hạn. Đặt thời gian chờ xung quanh điều hướng và chờ cho phần tử có ý nghĩa. Lưu ảnh chụp màn hình hoặc HTML thô cho các trang không thành công khi chính sách giữ lại cho phép; nó giúp phân biệt sự trôi dạt của đánh dấu, hiển thị một phần và một trang thách thức.
Sử dụng một hàng đợi với một khóa URL ổn định, số lần cố gắng và lý do cuối cùng. 401 và 403 đòi hỏi xem xét quyền truy cập, không phải là những lần thử trình duyệt vô tận. 429 yêu cầu tốc độ. Một 200 thiếu yếu tố sản phẩm hoặc bài viết cần thiết là một từ chối nội dung. Hướng dẫn Nstdata về việc xử lý JavaScript quy mô lớn thảo luận về việc tiếp nhận trình duyệt và xác thực, trong khi hướng dẫn AI-agent scraping mô tả cách sử dụng công cụ tại thời điểm yêu cầu.
Làm Thế Nào Để Nstdata Giúp Đội Ngũ Node.js Thu Thập Nội Dung Web?
Nstdata Crawl là một API Thu Thập Web cho dữ liệu sẵn sàng cho LLM giải quyết công việc xuất hiện lặp đi lặp lại, khám phá trang web, và chuyển đổi đầu ra. Nó có thể bắt đầu từ một URL, khám phá các trang liên kết trong các giới hạn đã cấu hình, hiển thị JavaScript và trả về các hiện vật thông qua một API REST hoặc SDK Node được tài liệu hóa. Ứng dụng vẫn định nghĩa danh tính mặt hàng, xác thực, lưu trữ, và chính sách nguồn.
Định dạng sẵn sàng cho LLM: Markdown hữu ích cho RAG và bối cảnh tác nhân; HTML và dữ liệu thô bảo tồn cấu trúc có thể phân tích; các liên kết hỗ trợ khám phá; ảnh chụp màn hình và PDF bảo tồn trạng thái trang hiển thị. Tài liệu Crawl liệt kê những đầu ra này và giải thích các mã tham chiếu cho các hiện vật lớn hơn.
Proxy tích hợp sẵn: Một yêu cầu quản lý tiêu chuẩn sử dụng khóa API mà không cần thiết lập proxy Host, Port, Username, Password, hoặc Protocol riêng biệt. Điều đó loại bỏ dây mạng khỏi ứng dụng Node.js, trong khi các quyền nguồn và quy tắc sử dụng vẫn áp dụng.
Kiểm soát nhiệm vụ và phạm vi:maxDepth, maxPages, quy tắc bao gồm và loại trừ ràng buộc một công việc trang web. Các điểm cuối trạng thái và trang cho phép ứng dụng của bạn đối chiếu các bản ghi đã hoàn thành, thất bại, và chấp nhận.
Bước 1. Trong Dashboard → Crawl Playground, lấy một API key và lưu nó vào NSTDATA_API_TOKEN. Cài đặt SDK chính thức được mô tả trong tài liệu trực tiếp:
npminstall @nstdata-ai/crawl
Bước 2. Gửi một trang đã được phê duyệt thông qua phương thức SDK được tài liệu:
import{NstDataClient,Format}from'@nstdata-ai/crawl';const client =newNstDataClient(process.env.NSTDATA_API_TOKEN);const result =await client.submitScrapeTaskSync({url:'https://example.com/',formats:[Format.MARKDOWN,Format.HTML],timeout:60000,onlyMainContent:true,});console.log(result);
Bước 3. Kiểm tra sự thành công của nhiệm vụ và trạng thái trang trước khi lập bản đồ nội dung vào sơ đồ của bạn. Đối với một trang web, sử dụng submitCrawlTask với độ sâu và số trang đã giới hạn, sau đó truy vấn trạng thái. Ví dụ này tuân theo hình dạng API chính thức; nó yêu cầu một key hoạt động và gói chính xác đã cài đặt để thực hiện. Đừng cho rằng Crawl trả về đối tượng kinh doanh cuối cùng của bạn mà không có sự xác nhận.
Chọn con đường ít bảo trì nhất mà vượt qua bài kiểm tra hồ sơ được chấp nhận của bạn. Để tiếp tục tương tác với trình duyệt, Nstdata Cloud Browser là một tùy chọn riêng biệt. So sánh các công cụ trích xuất web cung cấp tiêu chí quyết định dựa trên khối lượng công việc thêm.
Bạn nên đo gì trước khi chuyển một trình cào web sang sản xuất?
Đo số hồ sơ được chấp nhận trên mỗi phút trình duyệt, bộ nhớ tối đa, độ trễ điều hướng trang, thời gian chờ rendering, tỷ lệ từ chối và thời gian để chẩn đoán một lỗi. Chạy một tập hợp đại diện chứa một trang bình thường, chuyển hướng, trường thiếu, trang được render bởi khách, và một trang nên bị từ chối. Một quy trình trình duyệt lấy thông tin nhanh nhưng thường xuyên để lại các ngữ cảnh mở sẽ trở nên không ổn định dưới tải. Đóng các ngữ cảnh và trang sau một lô đã giới hạn và tái chế trình duyệt theo bộ nhớ đo được thay vì một giả định tùy ý.
Tách biệt các lỗi nguồn từ các lỗi thư viện. Một thời gian chờ trong page.goto() có thể có nghĩa là điều hướng không hoàn thành; một bộ định vị thiếu sau khi điều hướng thành công có thể có nghĩa là trang đã thay đổi hoặc trả về một thách thức. Ghi lại những kết quả này với mã khác biệt và lưu một ảnh chụp màn hình hoặc mẫu HTML được phép. Khi một trang web có nhiều mẫu, theo dõi sản lượng chấp nhận theo mẫu. Một tỷ lệ vượt qua toàn cầu duy nhất có thể ẩn một trang chi tiết sản phẩm bị hỏng trong khi các trang danh mục vẫn tiếp tục hoạt động.
Để có sự lựa chọn công bằng giữa Puppeteer, Playwright và API quản lý, chạy cùng một URL và quy tắc chấp nhận. Bao gồm cả công việc tải xuống và cập nhật trình duyệt, kích thước hình ảnh triển khai, bộ nhớ công nhân, hành vi thử lại và chẩn đoán trên gọi. Sự lựa chọn tốt nhất là cái đáp ứng hồ sơ hợp lệ trong phạm vi phép của nguồn và ngân sách hoạt động của nhóm.
Q: Puppeteer hay Playwright nhanh hơn cho mọi trình cào?
Cả hai đều không có lợi thế toàn cầu từ đầu đến cuối. Kiểm tra trang thực tế, thời gian chờ rendering, đầu ra được chấp nhận và chi phí tài nguyên trình duyệt.
Q: Tôi có nên sử dụng networkidle để chờ từng trang không?
Không. Ưu tiên một dấu hiệu nội dung cụ thể cho trang hoặc phản hồi; phân tích và các kết nối lâu dài có thể khiến các tín hiệu network-idle tổng quát không đáng tin cậy.
Q: Nstdata Crawl có thể thay thế xác minh trường kinh doanh không?
Không. Crawl lấy và chuyển đổi các trang, trong khi ứng dụng của bạn quyết định xem các trường có đại diện cho thực thể đúng hay không và có đáng để lưu trữ hay không.
Q: Node.js fetch có render một trang không?
Không. Nó lấy phản hồi HTTP; một trình duyệt hoặc con đường render được quản lý là cần thiết khi nội dung chỉ xuất hiện sau JavaScript phía khách.
Lena Zhou
Oct. 30th 2026
Thu thập toàn bộ trang web chỉ với một yêu cầu API
Tỷ lệ thành công 99,8% với kết xuất JavaScript
Nhận dữ liệu sạch, sẵn sàng cho LLM ở nhiều định dạng
Chuyển mọi trang web thành Markdown, HTML, JSON, liên kết, PDF và hơn thế nữa mà không cần quản lý hạ tầng thu thập dữ liệu.
