Cách Thu thập Bộ Sưu Tập Sản Phẩm Cuộn Vô Hạn với Playwright

Scrapeless Agent Browser chạy các phiên đám mây do Playwright điều khiển, và Scrapeless Residential Proxies cung cấp các tuyến định vị theo khu vực cho những job bộ sưu tập đủ điều kiện.

Xác Định Cái Gì Tải Trang Bộ Sưu Tập Tiếp Theo

Một bộ sưu tập sản phẩm cuộn vô hạn yêu cầu thêm mục khi người dùng chạm tới một điểm kích hoạt, có thể là mép trang, một phần tử sentinel hoặc đáy của một vùng chứa lồng nhau. Đặc tả Intersection Observer mô tả cách một trang có thể quan sát một mục tiêu băng qua ranh giới khung nhìn hoặc vùng chứa. DevTools có thể giúp bạn xác định phần tử nào thực sự cuộn và liệu có một lần fetch theo sau hành động đó hay không. Hãy kiểm tra sau khi thay đổi bộ lọc nữa. Tìm kiếm, sắp xếp và các bộ lọc tồn kho mỗi cái đều có thể khởi tạo một bộ sưu tập riêng.

Trước tiên hãy tìm một nguồn có cấu trúc được phép. Một feed thuộc sở hữu cửa hàng hoặc endpoint phân trang được hỗ trợ có thể phơi bày trực tiếp một con trỏ, định danh mục ổn định và cờ kết thúc. Giữ nguyên mọi bộ lọc xác định bộ sưu tập. Khi chính trải nghiệm người dùng là mục tiêu, hãy dùng trình duyệt để xem lô kế tiếp được tải như thế nào và trạng thái nào cho khách hàng biết rằng bộ sưu tập đã kết thúc. Đối xử với dữ liệu thu được từ mỗi bề mặt theo đúng phạm vi đã thống nhất với chủ sở hữu.

Chiều cao trang bề ngoài có thể gây hiểu nhầm. Một danh sách ảo hóa duy trì một tập nhỏ thẻ được gắn và tái sử dụng chúng khi người dùng cuộn. Chiều cao của nó có thể được dành sẵn ngay từ đầu. Trong trường hợp đó, tín hiệu tiến triển là một ID mục mới được quan sát hoặc con trỏ lô mới, và tín hiệu hoàn tất đến từ ứng dụng. Vị trí của hàng hiển thị cuối cùng chỉ là một manh mối.

Điều Kiện Tiên Quyết và Cài Đặt

Sử dụng môi trường Node.js với Playwright và Chromium. Thêm gói Playwright vào một dự án nhỏ, cài đặt trình duyệt Chromium của nó hoặc dùng một thực thi Chromium đã cấu hình, và bắt đầu với một fixture cửa hàng mà bạn kiểm soát. Trong một tích hợp thực tế, hãy kiểm tra markup để tìm ID thẻ bền vững và tín hiệu hoàn tất. Test ID trong ví dụ là thuộc tính của fixture. Chúng được kỳ vọng sẽ thay đổi khi bạn điều chỉnh hàm cho một cửa hàng thực tế.

Dùng Playwright locators để giới hạn các phần tử sản phẩm trong bộ sưu tập. Một bộ chọn link rộng có thể bắt cả điều hướng, thẻ biên tập và băng chuyền gợi ý. Ưu tiên một ID sản phẩm bất biến trên thẻ hoặc một mẫu URL đã được xác minh. Giữ nguyên link gốc làm bằng chứng và chỉ chuẩn hóa các thành phần URL theo những quy tắc đã biết. URL Standard mô tả hành vi phân tích và tuần tự hóa URL của trình duyệt.

Thu Thập Mỗi Lô Trước Khi Nó Rời Khỏi DOM

Đọc các thẻ hiện tại vào một map được khóa bằng ID ổn định trước khi di chuyển vị trí cuộn. Lưu tiêu đề đang hiển thị và URL sản phẩm đã được resolve với ID đó. Khi một thẻ xuất hiện lại vì người dùng cuộn ngược, map giữ lại một dòng khám phá cho sản phẩm đó. Nếu nhiều biến thể cố ý xuất hiện như các thẻ riêng biệt, hãy dùng một khóa đại diện cho đơn vị khám phá mong muốn.

Ví dụ sau chạy với một fixture cửa hàng được kiểm soát có một panel có thể cuộn, một điểm đánh dấu lô, hai thẻ sản phẩm được gắn nối tiếp và một điểm đánh dấu kết thúc rõ ràng. Hãy dùng cùng mẫu này với các bộ chọn đặc thù cửa hàng sau khi xác nhận quyền và hành vi phân trang. Một phiên Agent Browser trực tiếp yêu cầu tài khoản Scrapeless và thiết lập kết nối như mô tả trong quickstart.

async function collect(page, targetUrl, maxRounds = 12) {
  await page.goto(targetUrl, { waitUntil: 'domcontentloaded' });
  const grid = page.getByTestId('collection');
  const cards = grid.locator('[data-product-id]');
  const scroller = page.getByTestId('scroll-pane');
  const seen = new Map();

  for (let round = 0; round < maxRounds; round += 1) {
    await cards.first().waitFor({ state: 'visible' });
    const batch = await cards.evaluateAll(nodes => nodes.map(node => ({
      id: node.getAttribute('data-product-id'),
      title: node.querySelector('a')?.textContent.trim(),
      url: node.querySelector('a')?.href
    })));
    for (const item of batch) {
      if (item.id && item.title && item.url) seen.set(item.id, item);
    }
    if (await page.getByTestId('collection-end').isVisible()) {
      return { status: 'complete', items: [...seen.values()] };
    }
    const batchId = await grid.getAttribute('data-batch');
    if (!batchId) throw new Error('Collection batch identifier is missing');
    await scroller.hover();
    await page.mouse.wheel(0, 240);
    try {
      await page.waitForFunction(previous => {
        const root = document.querySelector('[data-testid="collection"]');
        return root?.getAttribute('data-batch') !== previous;
      }, batchId, { timeout: 3000 });
    } catch (error) {
      if (error.name !== 'TimeoutError') throw error;
      return { status: 'no_progress', items: [...seen.values()] };
    }
  }
  return { status: 'round_limit', items: [...seen.values()] };
}

Fixture trả về ID mục A và B với trạng thái hoàn tất sau khi thẻ đầu tiên bị xóa khỏi DOM. Điểm đánh dấu lô trong ví dụ là một chi tiết triển khai của fixture. Với một cửa hàng bạn vận hành, một request thành công gắn với cùng bộ lọc và con trỏ có thể phục vụ như một tín hiệu tiến triển hữu ích sau khi các thẻ tương ứng được render. Một thay đổi bị trễ nên dẫn đến một kết quả không-tiến-triển có giới hạn. Kết quả đó giữ danh sách một phần sẵn cho việc kiểm tra.

Điều Khiển Đúng Vùng Chứa Cuộn

Hành động tiếp theo phải nhắm tới phần tử chịu trách nhiệm tải thêm thẻ. Một bộ sưu tập được nhúng trong modal hoặc khung chuyên mục có thể bỏ qua cuộn cửa sổ. Trong ví dụ, hover lên panel đặt đầu vào bánh xe lên đúng vùng. Hãy dùng bước cuộn giữ được phần chồng lấp giữa các hàng được gắn và đo xem bạn có bỏ lỡ ID nào giữa các bước không. Các lưới ảo hóa có thể bỏ qua các thẻ trung gian khi bước nhảy quá lớn.

Quan sát các chỉ báo tải và phân biệt một bộ sưu tập trống đã được tải với một lần render chưa từng tạo thẻ. Một trạng thái trống có chủ ý có thể là một kết quả hoàn chỉnh với không sản phẩm. Skeleton, thử thách truy cập, hộp thoại đồng ý hoặc bộ chọn bị hỏng nên tạo ra một kết quả kèm giải thích. Mở rộng fixture để bao quát các đường dẫn đó trước khi coi kết quả trống là lành mạnh.

Một nút load-more cần hành động khác nhưng dùng cùng mô hình tiến triển. Chọn nút trong bộ sưu tập, click một lần, rồi chờ lô mới hoặc trạng thái kết thúc. Tránh dùng tình trạng không hoạt động toàn cục làm điều kiện hoàn tất. Các request chạy lâu bên ngoài lưới có thể vẫn đang hoạt động trong khi bộ sưu tập hiển thị đã sẵn sàng.

Theo dõi mức độ hoàn tất trên các bộ lọc và lưu thay đổi

Một lần thu thập (crawl) được xem là hoàn tất cho cấu hình bộ sưu tập của nó và trong khoảng thời gian quan sát. Hãy lưu danh mục được yêu cầu, thị trường, tham số sắp xếp, lọc, URL cuối cùng, số lượng phát hiện được, lý do hoàn tất và phiên bản collector. Nếu có số lượng kết quả được quảng bá, hãy ghi lại nó như một so sánh riêng. Giao diện cửa hàng có thể thay đổi trong khi job đang chạy, vì vậy sự không khớp có thể phản ánh việc biến động danh mục hoặc hiển thị trùng lặp cũng như lỗi của collector.

Giữ cho bước khám phá độc lập với bước trích xuất offer. Một thẻ bộ sưu tập có thể đại diện cho một họ sản phẩm và hiển thị giá khởi điểm. Truyền các ID khám phá ổn định và liên kết sang một worker trang chi tiết riêng để phân giải người bán, biến thể, giá và tồn kho. hướng dẫn trích xuất infinite-scroll trình bày thêm các mẫu phân trang, và giải pháp giám sát giá cho so sánh theo khu vực có liên quan khi tập sản phẩm được khám phá phụ thuộc vào thị trường.

Kiểm thử phân trang với một bộ sưu tập nhỏ có danh tính mong đợi đã biết. Thêm một fixture nơi số lượng node được mount vẫn không đổi giữa các batch. Sau đó kiểm tra trường hợp thiếu điểm đánh dấu kết thúc và một batch bị treo. So sánh trạng thái trả về và các ID mục với dữ liệu fixture. Thêm các bài kiểm thử theo bộ lọc cụ thể nếu cùng một adapter bao phủ một danh mục và kết quả tìm kiếm của nó.

Chuyển việc chạy trình duyệt lên đám mây khi cần

Một collector Playwright có thể chạy trên trình duyệt cục bộ hoặc trong Scrapeless Agent Browser. Phần Agent Browser Playwright quickstart cho thấy thiết lập kết nối được hỗ trợ cho các phiên từ xa. Sử dụng giải pháp Agent Browser cho các website động để lập kế hoạch dung lượng khi mỗi bộ sưu tập cần điều khiển được render và một chuỗi sự kiện nhập liệu. Giữ trạng thái crawl và batch cuối cùng được chấp nhận trong ứng dụng của bạn.

Sử dụng Residential Proxies khi cần vị trí địa lý cho quan sát được ủy quyền, và xác minh thị trường mà giao diện cửa hàng thực sự hiển thị. Một vùng được ghim không xác định sắp xếp hoặc bộ lọc của bộ sưu tập. Lưu các thiết lập đó độc lập và giữ từng lần chạy theo thị trường được tách biệt khi cookie có thể ảnh hưởng đến danh mục. Ước tính thời gian trình duyệt đám mây và lưu lượng proxy so với Scrapeless pricing sau khi đo lường các job hoàn tất và bán phần trong cùng một mẫu.

Báo cáo những gì crawl thực sự nhìn thấy

Sử dụng các điểm đánh dấu tiến độ rõ ràng và giữ một bản đồ mục ổn định. Đặt lý do hoàn tất bên cạnh các URL được khám phá để một job phía sau có thể phân biệt một bộ sưu tập đầy đủ với kết quả bán phần. Bắt đầu với một danh mục đã biết và chỉ thêm nguồn sau khi fixture bao phủ ảo hóa, một bộ sưu tập trống và một bộ tải bị treo.