如何将 AdsCrawl 与 Playwright 结合使用以实现可靠的端到端测试

了解如何将 Playwright 连接到 AdsCrawl 云浏览器,通过代理路由、CDP 会话和 CI 示例,对现代 Web 应用进行可靠的端到端测试。

Anonymous10 分钟阅读

如何将 AdsCrawl 与 Playwright 结合使用以实现可靠的端到端测试

Playwright 提供了一种快速、可靠的方式来驱动真实浏览器,但浏览器仍然需要在某处运行。在笔记本电脑上这没问题。在 CI 中、在企业网络之后,或者面对地理限制的应用时,这正是不稳定测试的温床。AdsCrawl 提供托管的云 Chromium 浏览器,Playwright 可以通过 CDP 附加到这些浏览器,并支持住宅代理路由和持久化配置文件。本文展示两者如何配合、如何设置,以及这种组合实际消除了哪些问题。

为什么将 AdsCrawl 与 Playwright 配对使用

First viewport screenshot of Release notes | Playwright

First viewport screenshot of Release notes | Playwright.

Release notes | Playwright 的首屏截图。

Playwright 是测试运行器和自动化库。AdsCrawl 是其底层的浏览器基础设施。你继续编写相同的 Playwright 规范、选择器、断言和夹具。改变的是浏览器所在的位置以及它呈现的网络身份。

这种分工很重要,原因有三:

  • 环境一致性。 云 Chromium 构建在开发人员机器、CI 运行器和暂存环境上的行为相同。不再有因浏览器版本不匹配或缺少系统库而导致的“本地能跑,流水线失败”的调试过程。
  • 网络真实性。 AdsCrawl 支持住宅代理路由和自定义代理,因此测试可以从用户实际所在的地区访问应用。地理相关的内容、同意横幅以及货币或区域设置逻辑变得可测试,而不是被模拟。
  • 状态持久化。 云浏览器配置文件在任务之间持久保存 cookie、localStorage 和设置。在一次测试运行中创建的登录会话可以被重用,这消除了一大类身份验证不稳定性。

如果你仍在决定托管浏览器 API 是否适合你的技术栈,AdsCrawl 与浏览器自动化和网页抓取工具对比 中的比较详细介绍了托管云浏览器与自托管自动化之间的权衡。

两个产品如何协同工作

在技术层面上,集成很简单。AdsCrawl 暴露一个远程 Chrome DevTools Protocol 端点。Playwright 的 chromium.connectOverCDP() 方法附加到该端点并返回一个 Browser 对象。从那里开始,一切都是标准的 Playwright:上下文、页面、定位器、期望、跟踪。

分工如下:

层级 职责
Playwright 测试编写、定位器、断言、重试、报告器、跟踪查看器
AdsCrawl 云 Chromium 托管、代理路由、指纹和配置文件管理、会话生命周期
你的 CI 调度、密钥、制品上传、并行分片控制

由于 AdsCrawl 还提供同步渲染内容端点,例如 POST /html 和截图捕获,你可以将同一平台用于两种不同的工作:通过 Playwright 进行交互式测试,以及通过普通 HTTP 调用进行轻量级内容或视觉检查。当完整浏览器会话对于冒烟测试来说过于重量级时,这很有用。

设置:将 Playwright 连接到 AdsCrawl 浏览器

First viewport screenshot of Fast and reliable end-to-end testing for modern web apps | Playwright

First viewport screenshot of Fast and reliable end-to-end testing for modern web apps | Playwright.

Fast and reliable end-to-end testing for modern web apps | Playwright 的首屏截图。

步骤 1:获取 API 密钥和浏览器配置文件

创建 AdsCrawl 账户并生成 API 密钥。免费套餐包含 500 个一次性积分,足以在承诺付费计划之前验证集成。每月 9 美元的 Hobby 适合独立开发者,每月 49 美元的 Starter 面向小型生产团队,每月 199 美元的 Pro 则针对高容量自动化团队。不同计划在每月积分、浏览器并发数、云浏览器配置文件限制和 API 密钥数量上有所不同,因此请根据你打算运行的并行测试工作进程数量来选择。

接下来,创建一个云浏览器配置文件。该配置文件保存浏览器设置、指纹配置和代理分配。在测试套件中重用一个配置文件可以保持身份稳定;为每个分片创建新配置文件可以保持运行隔离。

步骤 2:启动远程 CDP 会话

为你的配置文件请求一个会话,并捕获返回的 connectUrl。将此 URL 视为机密:它授予对活动浏览器的控制权。AdsCrawl 为交互式访问签发短期实时控制令牌,因此请轮换并使其过期,而不是硬编码长期有效的值。

步骤 3:附加 Playwright

const { chromium } = require('playwright');

async function run() {
  const browser = await chromium.connectOverCDP(process.env.ADSCRAWL_CONNECT_URL);

  const context = await browser.newContext({
    viewport: { width: 1440, height: 900 },
    locale: 'en-US',
  });

  const page = await context.newPage();
  await page.goto('https://example.com/checkout', { waitUntil: 'networkidle' });
  await page.getByRole('button', { name: 'Add to cart' }).click();
  await page.getByTestId('cart-count').waitFor();

  console.log(await page.title());
  await browser.close();
}

run();

步骤 4:将其接入 Playwright Test

在 Playwright Test 项目中,覆盖浏览器夹具,使每个规范都附加到 AdsCrawl,而不是启动本地 Chromium。

// fixtures.js
const base = require('@playwright/test');
const { chromium } = require('playwright');

const test = base.test.extend({
  browser: async ({}, use) => {
    const browser = await chromium.connectOverCDP(process.env.ADSCRAWL_CONNECT_URL);
    await use(browser);
    await browser.close();
  },
});

module.exports = { test, expect: base.expect };

将你的规范指向此夹具,其余测试代码保持不变。断言、expect.poll、跟踪和重试都继续工作,因为 Playwright 仍然是驱动程序。

步骤 5:配置代理和等待

代理选择发生在 AdsCrawl 配置文件级别,而不是在 Playwright 内部。在配置文件上设置住宅代理或自定义代理,然后让 Playwright 正常导航。这样可以将代理凭据排除在测试代码和仓库之外。

对于动态页面,优先使用显式等待而不是固定休眠。AdsCrawl 的 API 模式涵盖等待和操作,而 Playwright 自身的自动等待处理大多数元素就绪情况。将它们结合起来:使用 Playwright 定位器进行交互,并使用 AdsCrawl 的等待配置处理页面级条件,这些条件甚至在你的第一个选择器相关之前就已发生。

实际示例

First viewport screenshot of Release notes | Playwright

First viewport screenshot of Release notes | Playwright.

Release notes | Playwright 的首屏截图。

测试地理限制的结账流程

将目标国家的住宅代理分配给专用配置文件。针对该配置文件运行结账规范。应用看到本地 IP,提供正确的货币和支付方式,你的断言验证真实行为而不是模拟的区域设置。

JavaScript 密集型仪表板的视觉回归

使用 Playwright 登录并到达仪表板状态,然后通过 AdsCrawl 的截图端点捕获截图,并控制视口和选择器。由于渲染发生在同一个云浏览器上,截图与测试看到的内容一致。如果你想更深入地了解从此类页面提取结构化数据,抓取网站数据:动态页面开发者指南 涵盖了渲染和提取模式。

重用已认证的会话

在持久化云浏览器配置文件中登录一次。后续测试运行附加到同一配置文件并跳过登录流程,从而缩短运行时间并消除常见的不稳定性来源。为登录测试本身保留单独的配置文件,这样你仍然可以在每次流水线运行时验证认证路径。

CI 中的并行分片

为每个分片提供自己的配置文件和自己的 connectUrl。AdsCrawl 计划上的并发限制决定了可以同时运行多少个分片。将 Playwright 工作进程数与限制匹配,而不是让运行器排队无法打开的会话。

这种组合解决了什么

  • 环境漂移导致的不稳定测试。 云浏览器经过版本控制且一致,因此在一台机器上通过的运行在另一台机器上也有意义。
  • 地理封锁和区域特定行为。 住宅代理路由使位置相关逻辑可测试,而无需在 CI 中使用 VPN 技巧。
  • 身份验证和状态重置。 持久化配置文件向前传递会话状态,因此测试不必每次从头重建登录流程。
  • 暂存和第三方界面上的机器人检测。 真实浏览器指纹和住宅 IP 降低了合法测试运行被反自动化防御阻止的可能性。
  • 分散的工具。 一个平台处理交互式 CDP 测试、渲染 HTML 检索和截图,因此团队维护的移动部件更少。

决策指导

First viewport screenshot of Release notes | Playwright .NET

First viewport screenshot of Release notes | Playwright .NET.

Release notes | Playwright .NET 的首屏截图。

当你的测试需要真实浏览器身份、代理路由或持久会话,并且你宁愿不自己运营浏览器集群时,请将 AdsCrawl 与 Playwright 一起使用。当你测试完全公开的应用,没有地理或反机器人限制,并且你的 CI 已经拥有稳定的浏览器镜像时,请使用普通的本地 Playwright。

中间路径很常见:在本地运行快速的单元和组件测试,仅将通过 AdsCrawl 触及第三方服务、地理逻辑或认证流程的端到端套件路由出去。这样可以保持积分消耗可预测,同时仍然修复真正会出问题的测试。

如果你的团队正在更广泛地评估浏览器基础设施,AdsCrawl vs Steel vs Axiom:浏览器基础设施对比 和 AdsCrawl vs ApiFlash:截图 API 还是完整浏览器? 涵盖了 CDP 控制和仅截图工作流的相邻选项。

相关阅读

来源与进一步阅读

常见问题

AdsCrawl 会取代 Playwright 吗?

不会。Playwright 仍然是测试框架和驱动程序。AdsCrawl 提供 Playwright 通过 CDP 连接的云浏览器,以及代理和配置文件管理。

我可以使用 Playwright Test 的跟踪和重试等功能吗?

可以。一旦 connectOverCDP 返回浏览器对象,Playwright 就会正常行为。跟踪、重试、报告器和跟踪查看器都像使用本地浏览器一样工作。

如何在测试运行之间处理身份验证?

使用持久化云浏览器配置文件。登录一次,后续运行附加到同一配置文件,cookie 和存储保持不变。为专门验证登录流程的测试保留单独的配置文件。

每个测试都需要住宅代理吗?

不需要。仅将住宅或自定义代理应用于测试地理相关或反机器人敏感行为的配置文件。其他所有内容都可以在没有代理路由的情况下运行。

可以并行运行多少测试?

这取决于你的 AdsCrawl 计划的浏览器并发数和云浏览器配置文件限制。将 Playwright 工作进程数与这些限制对齐,以避免会话争用。

有没有办法在没有完整浏览器会话的情况下进行测试?

有。AdsCrawl 的 POST /html 端点同步返回渲染的 HTML、Markdown 或 JSON,截图端点则通过视口和选择器控制捕获页面。在不需要完整 Playwright 会话的冒烟检查中使用这些功能。

结论

Playwright 已经为你提供了可靠的测试 API。AdsCrawl 为该 API 提供了可靠的运行场所。连接两者只需一次 connectOverCDP 调用和一次夹具覆盖,从那里你将获得一致的云 Chromium 构建、住宅代理路由、持久会话,以及用于交互式测试、渲染内容和截图的单一平台。从免费套餐开始,获得 500 个一次性积分,针对你最不稳定的套件验证集成,然后随着流水线增长扩展并发。