Midscene 项目中中文字符乱码问题的分析与解决

问题现象

在 Midscene 项目（一个基于 Puppeteer/Playwright 的网页自动化测试工具）中，用户报告了一个关于中文字符显示为乱码的问题。具体表现为：

1. 在生成的报告视频中，中文字符无法正常显示，出现乱码
2. 在 TypeScript 代码中直接使用中文字符串时，编译后的产物中中文字符变为乱码
3. 当使用中文作为 prompt 时，功能无法正常工作

问题根源分析

经过技术分析，这个问题可能由以下几个因素导致：

1. 编码设置问题：Puppeteer/Playwright 默认可能没有正确配置中文字符编码
2. 字体支持不足：运行环境中缺少必要的中文字体支持
3. 构建配置问题：TypeScript 编译过程中字符编码处理不当
4. 系统区域设置：运行环境的区域设置不支持中文

解决方案

方案一：配置 Puppeteer/Playwright 支持中文

对于报告视频中的中文乱码问题，可以通过以下方式解决：

const browser = await puppeteer.launch({
  args: ['--font-render-hinting=none', '--lang=zh-CN']
});

const page = await browser.newPage();
await page.setExtraHTTPHeaders({
  'Accept-Language': 'zh-CN'
});

方案二：确保构建系统正确处理中文

对于 TypeScript 编译后的中文乱码问题：

1. 确认项目根目录下的 tsconfig.json 包含正确的编码配置：

{
  "compilerOptions": {
    "charset": "utf8"
  }
}

2. 检查构建工具的配置文件（如 webpack.config.js 或 vite.config.ts），确保正确处理 UTF-8 编码。

方案三：环境配置检查

1. 确认运行环境已安装中文字体：

   • Windows: 确保已安装"微软雅黑"等中文字体
   • Linux: 安装文泉驿等开源中文字体
   • macOS: 确保系统语言设置为中文或安装额外中文字体

2. 检查系统区域设置：

# Linux/macOS
locale -a | grep zh_CN

最佳实践建议

1. 统一编码规范：项目中的所有文件应统一使用 UTF-8 编码
2. 环境检查脚本：在项目启动时添加环境检查，确保中文支持
3. 字体回退机制：在 CSS 中定义完善的中文字体回退方案
4. 文档说明：在项目文档中明确中文支持的要求和配置方法

验证方法

开发者可以通过以下步骤验证问题是否已解决：

1. 创建一个包含中文字符的简单测试页面
2. 使用 Midscene 生成报告
3. 检查报告中的中文字符显示是否正常
4. 检查编译后的代码中中文字符是否保持原样

通过以上系统性的分析和解决方案，应该能够有效解决 Midscene 项目中的中文字符乱码问题，确保中文用户能够正常使用所有功能。