Cách tìm các phần tử bằng trình chọn CSS trong Puppeteer

Câu trả lời

Trong Puppeteer, các phần tử thường được xác định bằng các bộ chọn CSS thông qua các phương thức page.$ và page.$$. Phương thức đầu tiên trả về một phần tử khớp, trong khi phương thức thứ hai lấy tất cả các phần tử khớp. Các phương thức này cho phép truy vấn DOM hiệu quả cho các nhiệm vụ tự động hóa và quét trang web.

Giải thích chi tiết

Puppeteer hoạt động bằng cách điều khiển một phiên bản trình duyệt Chromium thực tế, cho phép tương tác với các trang web bằng JavaScript. Các bộ chọn CSS được sử dụng như cầu nối giữa script của bạn và DOM của trang. Khi bạn gọi page.$("selector"), Puppeteer thực thi document.querySelector bên trong ngữ cảnh trình duyệt. Tương tự, page.$$("selector") thực thi document.querySelectorAll, trả về nhiều phần tử dưới dạng các trình giữ chỗ.

Sau khi chọn các phần tử, bạn có thể trích xuất các thuộc tính, nội dung văn bản hoặc thuộc tính bằng các trợ giúp đánh giá như page.$eval hoặc page.$$eval. Điều này cho phép xây dựng các công cụ quét cấu trúc, tự động hóa kiểm thử giao diện người dùng hoặc tương tác với các trang động. Quan trọng là đảm bảo trang đã được tải hoàn toàn hoặc sử dụng các đợi rõ ràng như waitForSelector để tránh bỏ lỡ các phần tử được render động.

Các giải pháp / Phương pháp

• Chọn phần tử đơn lẻ: Sử dụng page.$("selector") khi bạn chỉ cần nút đầu tiên khớp với DOM, ví dụ như tiêu đề hoặc nút chính.
• Trích xuất nhiều phần tử: Sử dụng page.$$ để lấy mảng các phần tử, hữu ích cho danh sách, bảng hoặc các thành phần giao diện lặp lại như các thẻ sản phẩm.
• Trích xuất dữ liệu với hỗ trợ tự động hóa: Kết hợp các bộ chọn với các hàm đánh giá như page.$eval hoặc page.$$eval để quét dữ liệu có cấu trúc. Trong môi trường được bảo vệ bởi quản lý bảo mật, quy trình quét có thể yêu cầu cơ sở hạ tầng mạnh mẽ và các giải pháp xử lý captcha như CapSolver để duy trì liên tục tự động hóa khi gặp các thách thức như reCAPTCHA hoặc Cloudflare.

Thực hành tốt / Mẹo

Ưu tiên sử dụng các bộ chọn ổn định như ID, thuộc tính data hoặc tên lớp có ý nghĩa thay vì các đường dẫn DOM sâu. Luôn đợi cho phần tử bằng waitForSelector trước khi truy vấn trang động. Đối với quét quy mô lớn, kết hợp các bộ chọn CSS với logic thử lại, xoay chuyển proxy và các kỹ thuật giảm thiểu quản lý bảo mật để cải thiện độ tin cậy.

👉 Liên quan:

• Cách giải Captcha trong Puppeteer bằng CapSolver
• Cách tích hợp Puppeteer

Sử dụng mã code FAQ khi đăng ký tại CapSolver để nhận thêm 5% tiền thưởng khi nạp tiền.

FAQ CapSolver - capsolver.com