如何使用 Playwright 构建 WooCommerce 产品爬虫

Scrapeless Agent Browser 使用 Playwright 自动化来操作 WooCommerce 店面，而 Scrapeless Residential Proxies 则支持按市场划分的网络路由，以应对不同地区门店价格差异。

选择能够回答该问题的 WooCommerce 界面

一个 WooCommerce 产品爬虫使用目录来源来发现产品，并在渲染后的店面很重要时使用 Playwright 来确认交互式报价。在您拥有或被授权收集数据的商店上，检查 WooCommerce 商店 API 产品资源 用于公共目录字段和筛选器。Products 资源说明了已发布和受密码保护的产品是如何表示的，以及产品变体记录与默认产品集合有何不同。

如果已批准的目录 feed 提供了所有必需字段，则使用该 feed。 当主题或扩展在交互后更改显示价格、库存信息或变体选择时，适合使用浏览器。 保持每个字段的来源清晰。 如果商店 API 金额是基础值，而可见产品价格带有商店定义的显示调整，那么它们可能具有不同用途。

这种方法适用于目录问答、监控选定的公开商品、检查可变产品是否显示预期信息，以及为商品陈列评审收集截图。在抓取之前，先定义团队期望得到的输出内容。一个适合测试价格选择的基准数据集可以省略营销字段，同时仍然能够代表变体处理流程。

先决条件和安装

使用 Node.js 搭配 Playwright 和 Chromium 运行时。安装 Playwright 包及其 Chromium 二进制文件，或使用可用的兼容 Chromium 可执行文件。你需要一个由你运营或已获得收集许可的商店，以及一个包含简单产品、可变产品和不可用组合的示例。下面的示例使用具有稳定属性的受控夹具，因此可以在将选择器适配到 WooCommerce 主题之前运行。

对于远程执行，请使用 Agent Browser Playwright 快速入门 并按照文档配置 Scrapeless 帐户和 API 密钥。不要在目标 URL 和日志中包含凭证。本地测试示例使用一个已有的 Playwright 页面。远程运行还需要一个可从云会话访问的已授权目标，以及任何约定的位置或市场设置。

步骤 1：发现产品并保留源 ID

从经批准的网站地图、店面导航、商店数据源或有文档记录的目录来源中发现每个目标。在可用的情况下保留商店命名空间和产品 ID。保存用于去重的规范路由以及访问时使用的原始路由。 URL 标准 定义了相对链接如何解析。保留用于标识你计划验证的店面状态的可变查询参数或路由组件。

将目录分页与产品抽取分开处理。记录每次发现运行所使用的过滤条件以及游标或页面编号。使用持久化 ID 来对结果进行去重，并设定明确的上限和完成规则。这样可以防止将列表页误认为产品详情页，并在某个类别似乎出现产品丢失时，为团队提供可审计的追踪记录。

步骤 2：识别主题如何确认某种变体

变体捕获首先要确定选项控件以及用于提交其最终状态的信号。检查标签和输入行为。某个主题可能使用原生下拉选择、色板或自定义按钮。当收集器选择一个组合时，观察是否有与该组合关联的变体标识符、已解析的库存状态或可见的数量。将抽取范围限制在产品详情区域，以避免促销横幅或关联商品提供该数量。

下面的 Playwright 函数读取了一个受控的 WooCommerce 风格产品夹具。测试 ID 和就绪属性是该夹具的一部分。在真实的 WooCommerce 站点上，请将选择器适配到已知主题，或者让商店团队暴露一个稳定的就绪标记。该示例演示了为选定的蓝色马克杯进行的异步价格变更。

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);
}

受控夹具从白色选项开始，并将蓝色解析为变体 11，显示金额为 $21.00。本地测试同时验证该变体和金额。若适配器契约定义了这种结构，简单产品可以使用空选择以及带有自身产品标识的就绪报价。当某个变体不可用时，获取其明确的库存消息，并且如果契约允许，可以不提供金额。

步骤 3：在情境中解读价格

价格字段应区分可见的销售价格、被划线的标价以及价格区间。在归一化之前保留原始金额和货币。使用 提供有关价格和可用性的词汇 在命名规范化字段时。如果税费、手续费、运费或促销活动会影响结果，请记录当前界面如何包含它们。避免在不同市场之间悄然混合这些因素。

一个不可用的变体仍然是有用的目录观测。存储其明确状态和所选组合。为未解析的变体状态设置单独的结果，这样空价格就不会被解释为零。空选择器可能是由当前主题、一个不受支持的组合或无法访问页面导致的。在分配库存标签之前，检查周围的证据。

在金额规范化时使用单一的经批准的真实来源。如果你使用 Store API，要结合随附的货币信息来解释其金额。如果你使用展示界面，要根据站点已知的本地化设置和金额类型进行解析。对一小部分样本比较两者，并记录有意的差异。这可以捕捉到那些更改展示字段却未更新目录 feed 的商店插件。

第 4 步。在正确的市场中运行浏览器

使用 Scrapeless Agent Browser 当任务需要托管浏览器会话时；在规划跨店铺组合的交互式工作流时，则使用 managed web automation solution 。 Playwright proxy setup guide 解释了路由如何融入浏览器配置。若要进行授权的、特定位置的采集，请选择 Residential Proxies ，并在导航后检查货币、本地化和配送上下文。

在店铺选择器中设置的市场可以存储在 cookies 或 URL 中。以预期的会话策略开启每一次独立的市场测试。在接受金额之前，验证渲染的市场是否一致。按模板保留实际浏览器时长和传输数据，这样就可以与 Scrapeless pricing进行比较。 price monitoring proxy solution 在采集需要跨区域保持一致观测时非常有用。

采集器返回的内容

一条有用的 WooCommerce 记录应包含：店铺、产品或变体标识符、所选属性、最终 URL、原始展示价格、货币、明确的可用性以及观测时间。记录数据来源、采集版本，以及你使用的是简单产品路径还是可变产品路径。将不完整的输出连同明确原因一起保存，并将其与已验证的报价事件分开。这能为定价或 QA 使用方提供一种可靠方式，以区分完整观测与仅访问了 URL 却无法验证页面的采集器。

围绕一个已知产品家族构建适配器

从一个你可以检查的店铺和一个价格可见的变体开始。分别测试产品列表、简单产品和可变产品路径，然后将存储的行与渲染的店面进行比较。在你能够解释每个字段和结果之后，再添加市场和来源模板。