Cách xây dựng trình thu thập sản phẩm WooCommerce với Playwright

Scrapeless Agent Browser chạy tự động hóa Playwright cho các cửa hàng WooCommerce, và Scrapeless Residential Proxies hỗ trợ định tuyến mạng theo thị trường cụ thể khi giá cửa hàng thay đổi theo vị trí.

Chọn bề mặt WooCommerce trả lời được câu hỏi

Một trình thu thập sản phẩm WooCommerce sử dụng nguồn catalog để tìm sản phẩm và Playwright để xác nhận một offer tương tác khi giao diện cửa hàng đã render là quan trọng. Trên một cửa hàng bạn sở hữu hoặc được phép thu thập, hãy kiểm tra tài nguyên WooCommerce Store API Products để xem các trường và bộ lọc catalog công khai. Tài nguyên Products mô tả cách sản phẩm đã xuất bản và được bảo vệ bằng mật khẩu được biểu diễn và cách bản ghi biến thể sản phẩm khác với bộ sưu tập sản phẩm mặc định.

Hãy sử dụng một nguồn cấp catalog đã được phê duyệt nếu nó cung cấp đầy đủ các trường bắt buộc. Trình duyệt là phù hợp khi một theme hoặc extension thay đổi giá hiển thị, thông điệp tồn kho hoặc lựa chọn biến thể sau tương tác. Giữ rõ nguồn gốc của từng trường. Số tiền từ store API và giá sản phẩm hiển thị có thể phục vụ các mục đích khác nhau nếu một bên là giá gốc và bên kia có điều chỉnh hiển thị do cửa hàng định nghĩa.

Cách tiếp cận này phù hợp cho QA catalog, giám sát các offer công khai đã chọn, kiểm tra rằng sản phẩm biến thể hiển thị đúng thông tin mong muốn, và thu thập ảnh chụp màn hình phục vụ đánh giá trưng bày. Xác định loại đầu ra mà nhóm mong đợi trước khi thu thập. Một fixture phù hợp để kiểm tra chọn giá có thể lược bỏ các trường marketing mà vẫn đại diện được quy trình biến thể.

Yêu cầu và cài đặt

Dùng Node.js với Playwright và một runtime Chromium. Cài đặt gói Playwright và binary Chromium của nó hoặc dùng một bản thực thi Chromium tương thích sẵn có. Bạn cần một cửa hàng do bạn vận hành hoặc được phép thu thập và một mẫu với sản phẩm đơn giản, sản phẩm biến thể và các tổ hợp không khả dụng. Ví dụ dưới đây sử dụng một fixture được kiểm soát với thuộc tính ổn định, để có thể chạy trước khi điều chỉnh selector cho một theme WooCommerce.

Để thực thi từ xa, hãy sử dụng Agent Browser Playwright quickstart và cấu hình tài khoản Scrapeless cùng API key như đã được ghi tài liệu. Giữ thông tin xác thực tránh xuất hiện trong URL mục tiêu và log. Ví dụ được kiểm tra cục bộ dùng một trang Playwright đã tồn tại. Một lượt chạy từ xa cũng cần một mục tiêu được ủy quyền, có thể truy cập từ phiên cloud và mọi thiết lập vị trí hoặc thị trường đã thỏa thuận.

Bước 1. Khám phá sản phẩm và giữ nguyên ID nguồn

Khám phá từng mục tiêu từ sitemap đã được phê duyệt, điều hướng storefront, nguồn cấp cửa hàng hoặc nguồn catalog đã ghi tài liệu. Giữ namespace cửa hàng và ID sản phẩm khi có. Lưu route chuẩn tắc để khử trùng lặp và route gốc được dùng trong lần truy cập. Tiêu chuẩn URL Standard định nghĩa cách các liên kết tương đối được phân giải. Giữ nguyên tham số truy vấn hoặc thành phần route của biến thể khi chúng nhận diện trạng thái storefront mà bạn định xác minh.

Xử lý phân trang catalog tách biệt với bước trích xuất sản phẩm. Ghi lại bộ lọc và cursor hoặc trang cho từng lượt khám phá. Dùng ID bền vững để khử trùng lặp kết quả, và đặt một giới hạn trên rõ ràng cùng quy tắc hoàn tất. Điều này ngăn trang danh sách bị nhầm với trang chi tiết sản phẩm và cung cấp cho nhóm một lịch sử kiểm tra nếu một danh mục có vẻ như bị mất sản phẩm.

Bước 2. Xác định cách theme xác nhận một biến thể

Việc thu thập biến thể bắt đầu bằng việc xác định các điều khiển tùy chọn và tín hiệu chốt trạng thái cuối cùng của chúng. Kiểm tra nhãn và hành vi input. Một theme có thể dùng select gốc, swatch hoặc nút tùy chỉnh. Khi bộ thu thập chọn một tổ hợp, hãy quan sát một định danh biến thể, trạng thái tồn kho đã phân giải hoặc số tiền hiển thị gắn với tổ hợp đó. Giới hạn phạm vi trích xuất trong vùng chi tiết sản phẩm để banner giảm giá hoặc sản phẩm liên quan không cung cấp số tiền.

Hàm Playwright sau đây đọc một fixture sản phẩm kiểu WooCommerce được kiểm soát. Các test ID và thuộc tính readiness là một phần của fixture đó. Trên một trang WooCommerce thực, hãy điều chỉnh selector cho một theme đã biết hoặc đề nghị nhóm cửa hàng cung cấp một marker readiness ổn định. Ví dụ mô phỏng một thay đổi giá bất đồng bộ cho một chiếc cốc màu xanh được chọn.

async function readWooProduct(page, targetUrl, selections) {
  const response = await page.goto(targetUrl, { waitUntil: 'domcontentloaded' });
  if (!response?.ok()) throw new Error('Product navigation failed');

  const product = page.getByTestId('product-detail');
  const title = await product.getByRole('heading', { level: 1 }).innerText();
  for (const [label, value] of Object.entries(selections)) {
    await product.getByRole('combobox', { name: label }).selectOption(value);
  }

  const expected = JSON.stringify(selections);
  await page.waitForFunction(options => {
    const node = document.querySelector('[data-testid="resolved-offer"]');
    if (!node || node.dataset.state !== 'ready') return false;
    const selected = JSON.parse(node.dataset.options || '{}');
    return Object.entries(JSON.parse(options))
      .every(([name, value]) => selected[name] === value);
  }, expected, { timeout: 5000 });

  return product.getByTestId('resolved-offer').evaluate((node, heading) => ({
    title: heading,
    url: location.href,
    variantId: node.dataset.variantId,
    options: JSON.parse(node.dataset.options),
    priceText: node.querySelector('[data-testid="price"]')?.textContent.trim() || null,
    currency: node.dataset.currency || null,
    availability: node.dataset.availability || 'unknown'
  }), title);
}

Fixture được kiểm soát bắt đầu với tùy chọn màu trắng và phân giải màu xanh thành biến thể 11 với số tiền hiển thị là $21.00. Bài kiểm tra cục bộ xác minh biến thể và số tiền cùng nhau. Một sản phẩm đơn giản có thể dùng lựa chọn rỗng và một offer sẵn sàng với chính định danh sản phẩm của nó nếu hợp đồng adapter định nghĩa cấu trúc đó. Khi một biến thể không khả dụng, hãy thu thập thông điệp tồn kho rõ ràng của nó và cho phép số tiền vắng mặt nếu hợp đồng cho phép.

Bước 3. Diễn giải giá trong ngữ cảnh của nó

Một trường giá nên phân biệt giá bán hiển thị với giá niêm yết bị gạch bỏ và khoảng giá. Giữ nguyên số tiền thô và đơn vị tiền tệ trước khi chuẩn hóa. Sử dụng từ vựng Offer cho giá và tình trạng khả dụng khi đặt tên cho các trường đã chuẩn hóa. Nếu thuế, phí, vận chuyển hoặc khuyến mãi quan trọng, hãy ghi lại cách giao diện hiện tại bao gồm chúng. Tránh trộn lẫn chúng một cách âm thầm giữa các thị trường.

Một biến thể không khả dụng vẫn là một quan sát danh mục hữu ích. Lưu trạng thái rõ ràng và tổ hợp đã chọn của nó. Dành một kết quả riêng cho trạng thái biến thể chưa được giải quyết để giá trống không bao giờ bị hiểu là bằng không. Bộ chọn trống có thể do chủ đề đang dùng, tổ hợp không được hỗ trợ hoặc lỗi khi truy cập trang. Kiểm tra bằng chứng xung quanh trước khi gán nhãn tồn kho.

Sử dụng một nguồn chuẩn hóa số tiền được phê duyệt duy nhất. Nếu bạn dùng Store API, hãy diễn giải các số tiền của nó cùng với thông tin tiền tệ đi kèm. Nếu bạn dùng giao diện hiển thị, hãy phân tích nó theo locale đã biết của trang web và loại số tiền. So sánh hai nguồn cho một mẫu nhỏ và ghi lại các khác biệt có chủ ý. Việc này có thể phát hiện các plugin cửa hàng thay đổi trường hiển thị mà không cập nhật nguồn cấp danh mục.

Bước 4. Chạy Trình duyệt ở Đúng Thị trường

Sử dụng Scrapeless Agent Browser khi công việc cần một phiên trình duyệt được quản lý, và managed web automation solution khi lập kế hoạch các quy trình tương tác trên một danh mục cửa hàng. Tài liệu Playwright proxy setup guide giải thích cách định tuyến phù hợp với cấu hình trình duyệt. Để thu thập được ủy quyền theo vị trí cụ thể, hãy chọn Residential Proxies và kiểm tra tiền tệ, locale và ngữ cảnh giao hàng sau khi điều hướng.

Một thị trường được đặt trong bộ chọn cửa hàng có thể được lưu trong cookie hoặc URL. Bắt đầu mỗi lần kiểm thử thị trường độc lập với chính sách phiên dự định. Xác minh rằng thị trường được hiển thị khớp trước khi chấp nhận số tiền. Giữ thời lượng trình duyệt thực tế và lưu lượng theo mẫu để bạn có thể so sánh với Scrapeless pricing. price monitoring proxy solution rất hữu ích khi việc thu thập cần những quan sát nhất quán theo từng khu vực.

Những gì Collector Trả về

Một bản ghi WooCommerce hữu ích chứa định danh cửa hàng, sản phẩm hoặc biến thể, thuộc tính đã chọn, URL cuối cùng, giá hiển thị thô, tiền tệ, tình trạng khả dụng rõ ràng và thời điểm quan sát. Ghi lại nguồn, phiên bản bộ thu thập và liệu bạn đã dùng đường dẫn sản phẩm đơn giản hay sản phẩm biến thể. Lưu các đầu ra chưa hoàn chỉnh với lý do rõ ràng và tách chúng khỏi các sự kiện chào hàng đã được xác thực. Điều này cung cấp cho bộ phận định giá hoặc QA một cách đáng tin cậy để phân biệt một quan sát hoàn chỉnh với một collector đã truy cập URL nhưng không thể xác minh trang.

Xây Dựng Adapter Xung Quanh Một Dòng Sản Phẩm Đã Biết

Bắt đầu với một cửa hàng bạn có thể kiểm tra và một biến thể mà bạn biết rõ giá hiển thị. Thực hành riêng rẽ đường dẫn danh sách sản phẩm, sản phẩm đơn giản và sản phẩm biến thể, sau đó so sánh các dòng đã lưu với cửa hàng được hiển thị. Thêm thị trường và mẫu nguồn sau khi bạn có thể giải thích từng trường và kết quả.