首页
/ Playwright JS Release Notes 深度解读:从 Test Locks 到 Screencast,1.63–1.57 版本演进与源码佐证

Playwright JS Release Notes 深度解读:从 Test Locks 到 Screencast,1.63–1.57 版本演进与源码佐证

2026-09-06 14:13:21作者:翟萌耘Ralph

本篇基于仓库中的官方发布说明文档 release-notes-js.md,系统梳理 Playwright for JavaScript 从 1.63 到 1.57 的版本演进主线:每个版本的核心特性、新增 API、破坏性变更与浏览器版本矩阵,并结合 test.d.ts配置解析源码 与发布说明渲染脚本 render_release_notes.mjs 等仓库证据,帮助你在升级 Playwright 时快速判断哪些能力可以直接落地、哪些行为变化需要注意。

版本总览:发布说明的组织方式与版本基线

docs/src/release-notes-js.md 是一份从 Version 1.7 一直延续到 Version 1.63 的完整发布记录,共覆盖 50+ 个版本。每个版本条目遵循统一的骨架:

  1. 特性亮点(带 emoji 标题的大节,如 Test locks、Screencast、WebP screenshots)——该版本最值得关注的 2~5 个能力,附可运行的代码示例;
  2. New APIs——按 Browser/Context、Locators、Network、Test runner、Command line 等分类罗列新增方法与选项;
  3. Announcements / Other improvements——平台支持变化、行为调整;
  4. Breaking Changes——被移除或行为改变的 API(带 ⚠️ 标注);
  5. Browser Versions——本版本捆绑的 Chromium/Firefox/WebKit 精确版本,以及经过验证的稳定渠道(Google Chrome、Microsoft Edge)版本。

当前仓库的版本基线是 1.64.0-next(见 package.jsonversion 字段,engines.node 要求 >=20),即 1.63 是已发布的最新稳定版,1.64 处于开发中。

值得注意的是这份文档在仓库里不是"死"的:构建流程会通过 utils/render_release_notes.mjs 按语言与版本切分渲染——脚本先解析 docs/src/apitest-apitest-reporter-api 等 API 文档(见该脚本第 36~43 行),把文档中的 [method: ...]、[option: ...] 这类宏链接渲染为真实 API 链接,然后定位到 ## Version <版本号> 标题处截断输出(第 64~75 行),供官网按语言生成独立页面。这也解释了为什么文档内的 API 名写作 [`method: Locator.visible`] 这种宏形式——它们在渲染阶段会被解析为对应的 API 文档锚点。

Version 1.63:Test Locks、跨 Frame 定位与 Trace 快照升级

Test locks:声明式解决共享资源竞争

1.63 最重要的特性是测试锁。访问共享资源(外部服务、全局账户设置)的测试可以声明一个命名 lock,共享同一锁名的测试永远不会并发执行——跨越文件、worker 进程和 projects,其余测试照常并行:

test('update user settings', { lock: 'user-settings' }, async ({ page }) => {
  // never runs at the same time as other tests holding 'user-settings'
});

一个测试可以持有多个锁(只有全部可用时才运行),Test.describe 也接受 lock 选项把锁应用到整个分组。这一能力在 test-parallel-js.md 的 "Test locks" 小节有完整讲解,其 TypeScript 类型定义可在 test.d.ts 中确认:测试详情类型上已声明 lock?: string | string[](该文件第 2727 行附近),说明锁名既可传单个字符串也可传数组。

Locate across frames 与 Visible-only locators

  • frameLocator() 无参调用:page.frameLocator()frame.frameLocator() 不带 selector 时,会在子树的任意 frame 中搜索,省去先定位 iframe 的步骤:
// Finds the button in any frame on the page.
await page.frameLocator().getByRole('button').click();

后续 locator 链仍在单个 frame 内解析;若跨多个 frame 匹配到元素会抛错,保证行为可预测。

  • Locator.visible():返回只匹配可见元素的 locator,是 :visible CSS 伪类的官方推荐替代:
await page.locator('button').visible().click();

Step 结构化数据与 Trace 中的 Aria/屏幕快照

Test.step 新增 subtitleparams 选项,Playwright API 步骤也会自动上报目标 locator 与调用参数,reporter 可通过 TestStep.subtitle / TestStep.params 读取;两者会渲染在 Trace Viewer 与 HTML 报告的步骤标题旁:

await test.step('Login', async () => {
  // ...
}, { subtitle: 'as admin', params: { user: 'admin' } });

Tracing.startsnapshots 选项与 trace fixture 选项现在接受对象形式,可选录 DOM、Aria、屏幕快照:

export default defineConfig({
  use: {
    trace: {
      mode: 'on',
      snapshots: { dom: true, aria: true, screen: true }
    },
  },
});

录下 Aria 与屏幕快照后,Trace Viewer 新增 Display Aria 模式:操作截图与 aria 快照并排展示,悬停 aria 节点会在截图上高亮对应元素。

1.63 新增 API 一览

分类 内容
Browser/Context Browser.newContext.httpCredentials 支持凭据数组(按请求 origin 取第一个匹配,无 origin 的条目匹配任意请求);BrowserContext.storageState.opfs 把 origin private file system 纳入存储状态;新增 Page.dialogClosed / BrowserContext.dialogClosed 事件
Locators 新增 Locator.ariaSnapshotJSON / Page.ariaSnapshotJSON,以 JSON 而非 YAML 返回 aria 快照,支持 modedepthboxes 选项;APIRequestContext.get 等请求方法接受类型参数为 json() 提供类型:const user = await (await request.get<User>('/api/users/42')).json()
Test runner 独立选项 reducedMotionforcedColorscontrast;新命令 --add-reporter 在配置 reporter 之上追加 reporter(区别于替换语义的 --reporter);listlinedotgithubjunit reporter 支持 omitTags 选项抑制自动附加到标题的 tags
命令行 npx playwright install --no-remove 安装时保留其他 Playwright 安装的浏览器;npx playwright codegen --http-credentials 支持对 HTTP 认证后的页面录制
其他 新内置 perfetto reporter(见 test-reporters-js.md),输出 Trace Event Format 文件供 Perfetto UI 或 chrome://tracing 渲染,每个 worker 一条泳道;HTML 报告在测试步骤旁渲染耗时时序瀑布图

1.63 公告与浏览器版本

  • ⚠️ 实验性包 @playwright/experimental-ct-react@playwright/experimental-ct-react17@playwright/experimental-ct-vue 停止更新,需按 test-components-js.md 中的迁移指南转向 1.62 引入的 stories 模型;Fixtures.mount 传入的 story id 现可通过生成的 Stories 注册表获得类型。
  • ⚠️ Ubuntu 20.04 不再受支持
  • Linux arm64 平台改为下载 Chrome for Testing 构建的 Chromium(与其他平台一致)。

捆绑浏览器:Chromium 153.0.8010.12、Firefox 155.0、WebKit 26.6;另验证 Google Chrome 153 与 Microsoft Edge 153。

Version 1.62:组件测试 Stories 模型与 AbortSignal 取消

组件测试转向 stories and galleries

组件测试改用**故事(story)+ 画廊(gallery)**模型:story 把组件包裹在一个具体场景里(硬编码 props、mock 数据、providers),gallery 页面按需渲染 story。新的 Fixtures.mount fixture 导航到 gallery、按 id 挂载 story,并返回限定在 story 根元素上的 Locator:

test('click should expand', async ({ mount }) => {
  const component = await mount('components/Expandable/Stateful');
  await component.getByRole('button').click();
  await expect(component.getByTestId('expanded')).toHaveValue('true');
});

把 story 类型作为模板参数传入可以为 props 做类型检查;返回的 locator 还提供 update(props) / unmount() 在测试内重渲染或卸载。

用 AbortSignal 取消操作

大多数操作与 web-first 断言现在接受 signal 选项(接收 AbortSignal),可取消长时间运行的动作、导航、等待与断言:

const controller = new AbortController();
setTimeout(() => controller.abort(), 1000);

await page.getByRole('button', { name: 'Submit' }).click({ signal: controller.signal });
await expect(page.getByText('Done')).toBeVisible({ signal: controller.signal });

注意:提供 signal 不会禁用默认超时,需要显式 timeout: 0 关闭。

WebP 截图与 Reporter.preprocess

  • toHaveScreenshot / page.screenshot 支持 WebP:给快照命名为 .webp 即存为无损 WebP;独立截图可用 quality 调损:
// Visual comparisons store the golden snapshot as lossless WebP.
await expect(page).toHaveScreenshot('homepage.webp');

// Standalone screenshots can trade quality for size with lossy WebP.
await page.screenshot({ path: 'homepage.webp', quality: 50 });

quality: 100(默认)为无损,更低值使用有损压缩。

  • 新增 Reporter.preprocess 钩子,在配置解析之后、Reporter.onBegin 之前运行,允许 reporter 通过 TestRun 对象把单个测试标记为 skip/exclude/fixed/failing,实现自定义测试过滤:
class MyReporter {
  async preprocess({ config, suite, testRun }) {
    for (const test of suite.allTests()) {
      if (shouldSkip(test))
        testRun.skip(test);
    }
  }
}

Isolated retries:把重试与主套件隔离

TestConfig.retryStrategy 控制失败测试的重试时机:默认 'immediate' 一有空闲 worker 就重试;'isolated'所有重试推迟到套件末尾,在单个 worker 中逐个执行,最小化对主套件的干扰:

export default defineConfig({
  retries: 2,
  retryStrategy: 'isolated',
});

仓库源码可以印证该选项已贯穿配置与调度层:类型定义 retryStrategy?: "immediate" | "isolated"test.d.ts,而 retryStrategy 的相关处理分布在 config.tsconfigLoader.tsdispatcher.ts 中,从配置解析到 worker 调度都有对应实现。

1.62 其他新增与公告

  • BrowserContext.storageState.credentials 把虚拟 WebAuthn 凭据(passkey)纳入存储状态,可持久化并重新注入后续 context;
  • 动作类 API 新增 scroll 选项("auto" | "none"),可退出 Playwright 的自动滚动到视口行为;
  • APIResponse.timing 返回 API 响应的 resource timing 信息;
  • Locator.waitForFunction 等待"以匹配元素为参数调用"的函数返回真值;Page.evaluatePage.addInitScript / BrowserContext.addInitScript 现接受函数作为参数;
  • Playwright 现在捆绑 Playwright MCP server 与 playwright-cli,可分别通过 npx playwright mcpnpx playwright cli 运行,文档入口见 getting-started-mcp.mdgetting-started-cli.md;
  • HTML 报告的 Merge files 分组(原仅为 UI 开关)可用 mergeFiles 配置项启用:reporter: [['html', { mergeFiles: true }]];
  • 公告:headless 模式下剪贴板与操作系统隔离,navigator.clipboard 测试不再读写宿主机器剪贴板;⚠️ Debian 11 不再受支持

捆绑浏览器:Chromium 151.0.7922.34、Firefox 153.0、WebKit 26.5;另验证 Chrome 151 / Edge 151。

Version 1.61:WebAuthn Passkeys 与 Web Storage API

虚拟认证器:无需实体密钥的 passkey 测试

Credentials 虚拟认证器通过 BrowserContext.credentials 提供,让测试注册 passkey 并应答页面中的 navigator.credentials.create() / get() 仪式,所有浏览器可用:

const context = await browser.newContext();

// Seed a passkey your backend provisioned for a test user.
await context.credentials.create('example.com', {
  id: credentialId,
  userHandle,
  privateKey,
  publicKey,
});
await context.credentials.install();

const page = await context.newPage();
await page.goto('https://example.com/login');
// The page's navigator.credentials.get() is answered with the seeded passkey.

也可以在 setup 测试中让应用注册一次 passkey,用 Credentials.get 读回后注入后续测试——仓库的 webauthn 示例seed-credential.mjs 演示了注册登录与凭据预置两个典型流程。

Web Storage:直接读写页面存储

WebStorage API 经 Page.localStorage / Page.sessionStorage 访问,针对当前 origin 读写存储:

await page.localStorage.setItem('token', 'abc');
const token = await page.localStorage.getItem('token');
const items = await page.sessionStorage.items();

1.61 其余要点

  • APIResponse.securityDetails / APIResponse.serverAddr 与浏览器侧 Response 对应方法对齐;
  • BrowserType.connectOverCDP 新增 artifactsDir 选项,控制附着到已有浏览器时 trace、下载等产物的存储位置;
  • Screencast.showActions 新增 cursor 选项控制指针动作的光标装饰;Screencast.startonFrame 回调现在携带帧被浏览器呈现的 timestamp;
  • video 选项支持 trace 同款模式:'on-all-retries''retain-on-first-failure''retain-on-failure-and-retries';
  • 支持 expect.soft.poll(...);
  • 新增 FullConfig.argv(runner 进程的 process.argv 快照,便于读取 -- 之后的自定义参数)与 FullConfig.failOnFlakyTests(与配置项镜像,便于 reporter 解释 flaky 运行为何失败);
  • TestInfo.errors 现在把 AggregateError 的每个子错误列为独立条目;
  • 命令行新增 -G 作为 --grep-invert 缩写;
  • 支持 Ubuntu 26.04;HAR 与 trace 录制现在包含 WebSocket 请求。

捆绑浏览器:Chromium 149.0.7827.55、Firefox 151.0、WebKit 26.5;另验证 Chrome 149 / Edge 149。

Version 1.60:Tracing 内的 HAR、drop 拖放与 test.abort()

  • Tracing.startHar / Tracing.stopHar 把 HAR 录制提升为 tracing 一等 API,选项与 recordHar 相同,返回的 Disposable 可用 await using 作用域化管理:
await using har = await context.tracing.startHar('trace.har');
const page = await context.newPage();
await page.goto('https://playwright.dev');
// HAR is finalized when `har` goes out of scope.
  • Locator.drop 模拟外部文件/剪贴板数据拖放到元素,在页面上下文派发带合成 DataTransferdragenterdragoverdrop 事件,适合测试上传区:
await page.locator('#dropzone').drop({
  files: { name: 'note.txt', mimeType: 'text/plain', buffer: Buffer.from('hello') },
});

await page.locator('#dropzone').drop({
  data: {
    'text/plain': 'hello world',
    'text/uri-list': 'https://example.com',
  },
});
  • Aria 快照: PageAssertions.toMatchAriaSnapshot 现在可用于 Page(等价于断言 page.locator('body'));Locator.ariaSnapshot / Page.ariaSnapshot 新增 boxes 选项,为每个元素附加 [box=x,y,width,height] 边界框,便于 AI 消费;
  • test.abort() 可从 fixture、hook 或 route handler 中立即中止当前运行中的测试,适合检测到不可恢复误用时快速失败:
test('does not publish to the shared page', async ({ page }) => {
  await page.route('**/publish', route => {
    test.abort('Tests must not publish to the shared page. Use the `clone` option.');
    return route.abort();
  });
  // ...
});
  • 新增事件 Browser.context;BrowserContext 现在镜像其页面生命周期事件(downloadframeAttachedframeDetachedframeNavigatedpageClosepageLoad);
  • getByRole 系列新增 description 选项(匹配 accessible description);toHaveCSS 新增 pseudo 选项读取 ::before / ::after 计算样式;Locator.highlight 新增 style 选项,并新增 Page.hideHighlight 清除全部高亮;
  • connectOverCDP 新增 noDefaults 选项,关闭 Playwright 对默认上下文的下载/焦点/媒体模拟覆盖,附着用户日常浏览器时不打扰其状态。

破坏性变更:移除长期弃用的 API——Locator.ariaRef()(改用标准 ariaSnapshot 管线)、exposeBindinghandle 选项、connect/connectOverCDPlogger 选项(改用 tracing)、context 选项 videosPath / videoSize(改用 recordVideo)。

捆绑浏览器:Chromium 148.0.7778.96、Firefox 150.0.2、WebKit 26.4;另验证 Chrome 147 / Edge 147。

Version 1.59:Screencast 统一视频 API 与 Agent 互操作

Page.screencast:录制、标注、叠加与逐帧流

Page.screencast 提供统一接口,覆盖录制、动作标注、视觉叠加、实时帧捕获等能力:

// 精确控制起点的录制
await page.screencast.start({ path: 'video.webm' });
await page.screencast.stop();

// 内置动作标注:高亮交互元素并显示动作标题
await page.screencast.showActions({ position: 'top-right' });

// 章节标题与自定义 HTML 叠加
await page.screencast.showChapter('Adding TODOs', {
  description: 'Type and press enter for each TODO',
  duration: 1000,
});
await page.screencast.showOverlay('<div style="color: red">Recording</div>');

// 实时 JPEG 帧流,用于缩略图、实时预览、AI 视觉等
await page.screencast.start({
  onFrame: ({ data }) => sendToVisionModel(data),
  size: { width: 800, height: 600 },
});

showActions 接受 position('top-left'/'top'/'top-right'/'bottom-left'/'bottom'/'bottom-right')、duration(每条标注的毫秒数)、fontSize(px),返回 disposable 用于停止。测试 fixture 中也可经 video 选项开启动作标注:

export default defineConfig({
  use: {
    video: {
      mode: 'on',
      show: {
        actions: { position: 'top-left' },
        test: { position: 'top-right' },
      },
    },
  },
});

Browser.bind 与 Dashboard:让 Agent 附着到运行中的浏览器

Browser.bind 让已启动的浏览器可被 playwright-cli@playwright/mcp 及其他客户端连接;多个客户端可同时连接。传 host / port 选项则走 WebSocket 而非命名管道;Browser.unbind 停止接受新连接:

const { endpoint } = await browser.bind('my-session', {
  workspaceDir: '/my/project',
});
// 另一个进程/客户端:
const browser = await chromium.connect(endpoint);

配套的可观测性:

  • playwright-cli show 打开 Dashboard,列出所有已绑定浏览器、状态,可点击会话做手动干预、打开 DevTools 检查后台浏览器中的页面(见 getting-started-cli.md);
  • playwright-cli 会自动绑定它启动的所有浏览器;
  • 设置环境变量 PLAYWRIGHT_DASHBOARD=1 可让 Dashboard 显示所有 @playwright/test 浏览器。

面向 Agent 的调试与 Trace 分析

  • npx playwright test --debug=cli 让编码 agent 通过 playwright-cli 附着调试测试(attach、step-over 等),适合在 agentic 工作流中自动修复测试;
  • npx playwright trace 可在命令行打开并分析 Playwright Trace:npx playwright trace open test-results/.../trace.zip 查看测试标题,trace actions --grep="expect" 列出动作时间线,trace action 9 查看单步错误详情,trace snapshot 9 --name after 导出步骤快照,trace close 关闭。

await using 与快照/定位器增强

大量 API 现在返回 async disposables,可用 await using 自动清理:

await using page = await context.newPage();
{
  await using route = await page.route('**/*', route => route.continue());
  await using script = await page.addInitScript('console.log("init script here")');
  await page.goto('https://playwright.dev');
}
// route 与 init script 在此已被移除

其他要点:Page.ariaSnapshot(等价于 page.locator('body').ariaSnapshot())、ariaSnapshotdepth / mode 选项、Locator.normalize(转换为 test id / aria role 等最佳实践)、Page.pickLocator / Page.cancelPickLocator(悬停高亮 + 点击取回 Locator 的交互拾取模式)、BrowserContext.setStorageState(就地切换存储状态而无需重建 context)、Page.clearConsoleMessages / Page.clearPageErrorsBrowserContext.debuggerRequest.existingResponseResponse.httpVersionTracing.startlive 选项等。

破坏性变更:移除 macOS 14 对 WebKit 的支持;移除 @playwright/experimental-ct-svelte 包;junit reporter 现在区分错误类型,原先部分 <failure> 改为 <error>

捆绑浏览器:Chromium 147.0.7727.15、Firefox 148.0.2、WebKit 26.4;另验证 Chrome 146 / Edge 146。

Version 1.58 与 1.57:Speedboard、Timeline 与 Chrome for Testing

Speedboard 与 Timeline:定位慢测试

1.57 在 HTML 报告中新增 Speedboard 标签页,把所有已执行测试按慢速排序,帮助定位耗时超预期的测试(通常是不必要的等待):

HTML 报告中的 Speedboard 标签页截图

1.58 进一步把 Timeline 引入 HTML 报告的 Speedboard 标签页(在合并报告场景下):

合并报告中 Speedboard 的 Timeline 图表

同版改进还包括 UI Mode 与 Trace Viewer 的 system 主题(跟随系统深浅色)、代码编辑器内 Cmd/Ctrl+F 搜索、网络详情面板重组、JSON 响应自动格式化;connectOverCDP 新增 isLocal 选项,告知 Playwright 与 CDP server 同主机以启用文件系统优化。破坏性变更:移除 _react / _vue 选择器、:light 选择器后缀、launchdevtools 选项(改用 args: ['--auto-open-devtools-for-tabs'])、移除 macOS 13 对 WebKit 的支持。捆绑浏览器:Chromium 145.0.7632.6、Firefox 146.0.1、WebKit 26.0;验证 Chrome 144 / Edge 144。

Chrome for Testing 与 webServer.wait

1.57 起 Playwright 运行在 Chrome for Testing 构建上(而非裸 Chromium):headed 模式用 chrome,headless 模式用 chrome-headless-shell,现有测试升级后应继续通过,最直观的变化是工具栏图标;Arm64 Linux 继续用 Chromium。

TestConfig.webServer 新增 wait 字段:传入正则,Playwright 会等待 webserver 日志匹配;正则中的命名捕获组会以环境变量形式提供给测试进程:

import { defineConfig } from '@playwright/test';

export default defineConfig({
  webServer: {
    command: 'npm run start',
    wait: {
      stdout: /Listening on port (?<my_server_port>\d+)/
    },
  },
});
import { test, expect } from '@playwright/test';

test.use({ baseURL: `http://localhost:${process.env.MY_SERVER_PORT ?? 3000}` });

test('homepage', async ({ page }) => {
  await page.goto('/');
});

这个模式不仅能捕获开发服务器的随机端口,也适用于没有 HTTP 就绪探针、只在 stdout/stderr 打印就绪信息的服务。同版其他新增:TestConfig.tag(给本次运行的所有测试打 tag,配合 merge-reports 使用)、Worker.console 事件、Locator.description / Locator.toStringclick / dragTosteps 选项(控制移动鼠标时派发的 mousemove 事件数)、Service Worker 发起的网络请求在 Chromium 下可被上报与路由(可用 PLAYWRIGHT_DISABLE_SERVICE_WORKER_NETWORK 关闭);破坏性变更:移除已弃用三年的 page.accessibility API。捆绑浏览器:Chromium 143.0.7499.4、Firefox 144.0.2、WebKit 26.0。

升级指南:各版本破坏性变更与支持策略汇总

把 1.57–1.63 的行为变化集中对照,升级前可以按这张清单自查:

版本 破坏性变更 / 支持变化
1.57 移除 page.accessibility;运行基础切换为 Chrome for Testing(行为预期不变)
1.58 移除 _react_vue 选择器与 :light 后缀;移除 launchdevtools 选项;移除 macOS 13 的 WebKit 支持
1.59 移除 macOS 14 的 WebKit 支持;移除 @playwright/experimental-ct-svelte;junit 的 failure/error 分类调整
1.60 移除 Locator.ariaRef()exposeBindinghandleconnect*loggervideosPath / videoSize
1.61 无移除项;新增 Ubuntu 26.04 支持
1.62 ⚠️ Debian 11 不再受支持;headless 剪贴板与 OS 隔离(依赖读取宿主剪贴板的测试行为会变)
1.63 ⚠️ Ubuntu 20.04 不再受支持;实验性 CT 包(react/react17/vue)停止更新;Linux arm64 改下 Chrome for Testing 构建

从源码结构看,浏览器版本与下载清单由 browsers.json 统一描述,平台支持变化(如移除旧 macOS/Ubuntu)通常伴随该文件与安装逻辑的调整;而测试 runner 侧的新选项(如 retryStrategylock)则同步体现在 test.d.ts 的类型声明中,升级后可用 tsc 校验配置与测试代码是否使用了已移除的 API。

深入仓库:与发布说明相关的可查证资源

掌握以上版本脉络后,你可以按"目标版本 → Browser Versions 表确认捆绑浏览器 → Breaking Changes 清单核对代码 → 特性亮点逐项启用"的顺序安全升级 Playwright,并在遇到行为差异时,用 Trace Viewer(1.12 引入)与各版本新增的结构化步骤信息快速定位变化来源。

登录后查看全文
热门项目推荐
相关项目推荐