# General Translation Integrations: 录制操作演示
URL: https://generaltranslation.com/zh/docs/integrations/rrweb/guides/recording-walkthroughs.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 如何使用 gt-rrweb 捕获产品流程、审校会话并保存其录制包。

只需录制一次可重复的产品流程，即可将其保存为一个可供审校、发布和回放的录制包。

本指南着重介绍如何完成一次有效的捕获会话。请先完成[快速开始](/docs/integrations/rrweb/quickstart)。

## 开始前的准备 [#before-start]

录制前：

* 针对所需的产品区域和播放画面，[配置录制器](/docs/integrations/rrweb/guides/configuring-recordings)。
* 在源区域设置下打开该流程，并将其重置为可预期的初始状态。
* 确定要包含哪些已发布的区域设置。 (参见[配置本地化回放](/docs/integrations/rrweb/guides/configuring-recordings#localized-replay)) 。

## 开始与停止捕获 [#capture]

先以源区域设置调用 [`start()`](/docs/integrations/rrweb/reference/recorder#use-recorder)，然后依次传入每个待采集的目标区域设置。录制器会将会话保存在模块状态中，因此路由变化导致组件重新挂载时，正在进行的录制并不会中断。

```tsx title="src/RecordButton.tsx"
const { start, stop, status } = useRecorder();

await start({ locales: ['en', 'de', 'ja'] });
const bundle = await stop();
```

`status` 会从 `preparing` 变为 `recording`，在采集翻译期间回到 `preparing`，最终停留在 `idle`。catalog 加载器失败只会影响对应的那个区域设置；更大范围的采集失败并不致命，`stop()` 仍会解析为仅含源语言内容的录制包。

离开页面会中止正在进行的会话，既不会采集翻译，也不会调用 `onComplete`。在执行会卸载应用的导航之前，请先停止录制。

## 捕获产品流程 [#product-flow]

在 `start()` 解析完成后，按照观看者应当看到的顺序完成整个演示流程。点击、导航、DOM 变化、滚动位置以及可见的页面内容都会成为事件流的一部分。

让会话保持聚焦：

* 从稳定的页面和应用状态开始。
* 在与异步内容交互之前，留出足够时间让其完成渲染。
* 在观看者到达明确的成功状态后结束。
* 避免暴露敏感的应用状态。

表单输入值会被遮蔽，鼠标移动的遥测数据不会被记录。发布之前请审校录制好的内容，因为其他可见文本和状态仍会保留在事件流中。

为不应出现在录制中的操作控件或其他元素添加 rrweb 的 `rr-block` 类：

```tsx
<div className="rr-block">
  <RecordingControls />
</div>
```

## 通过自动化驱动录制 [#automation]

若要在端到端测试中以脚本方式控制录制，请配置录制器的 `expose` 选项。由此得到的 `window[name]` 句柄提供相同的 `start` 和 `stop` 函数。

```tsx title="src/RecordingTools.tsx"
<GTRecorder expose="gtRecorder" />
```

```js title="record.spec.js"
await page.evaluate(() => window.gtRecorder.start({ locales: ['en', 'es'] }));
// ... 执行需要录制的操作流程
const bundle = await page.evaluate(() => window.gtRecorder.stop());
```

## 存储录制包 [#store-bundle]

将返回的 [`RecorderBundle`](/docs/integrations/rrweb/reference/recorder#recorder-bundle) 序列化为 JSON，并与应用资源一同保存，或存放到你自己的存储中。该 package 不会将录制内容上传到任何位置。

你可以存储完整的录制包，也可以只存储 `bundle.events`。区域设置和叠加层元数据已嵌入事件流中，因此当仅含事件的导出内容后续被包装为 `{ events }` 时，replayer 仍能恢复本地化播放。

<Callout type="warn">
  在发布录制内容之前请先进行审校。输入值会被遮蔽，但事件流中仍包含该会话中可见的页面文本和应用状态。
</Callout>

## Next steps

- /docs/integrations/rrweb/guides/configuring-recordings
- /docs/integrations/rrweb/guides/replaying-recordings

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.