Guardian前端项目测试指南：从本地开发到设备验证

Guardian前端项目测试指南：从本地开发到设备验证

frontend The Guardian DotCom. 项目地址: https://gitcode.com/gh_mirrors/fr/frontend

前言

在Guardian前端项目的开发过程中，完善的测试流程是保证产品质量的关键环节。本文将系统性地介绍项目测试的完整流程，包括本地环境搭建、AMP页面验证、多设备测试技巧以及CODE环境测试等核心内容。

一、本地开发环境测试

1.1 环境准备

在开始本地测试前，必须获取必要的访问凭证。这些凭证是访问项目资源的基础保障，建议在开发初期就完成配置，避免后续出现权限问题。

1.2 依赖管理与编译

项目采用Make工具管理构建流程，主要命令包括：

• make compile：生产环境编译模式
• make compile-dev：开发实时编译模式
• make list：查看所有可用命令

建议开发阶段使用compile-dev模式，可以实时看到代码变更效果，显著提升开发效率。

1.3 SBT构建工具使用

项目使用SBT作为构建工具，但需要注意：

• 必须使用./sbt而非sbt命令
• ./sbt会加载项目特定的预设配置
• 推荐使用dev-build项目进行常规测试

1.4 单元测试执行

Scala单元测试支持多种运行方式：

• 全量测试：在根项目执行test命令
• 指定测试套件：test-only *<测试套件名>
• 应用专项测试：先导航到对应项目再执行测试

二、AMP页面专项测试

2.1 本地AMP测试

AMP页面测试要点：

• 访问方式：在URL后添加?amp参数
• 示例URL：http://localhost:9000/article-path?amp
• 必须测试场景：模板修改、文章应用文件变更

2.2 AMP验证机制

AMP页面必须通过验证才能在Google搜索结果中展示：

• 本地验证：URL后追加#development=1
• 命令行验证：make validate-amp
• 生产环境验证：使用AMP验证工具检查

2.3 生产环境AMP测试

特殊测试场景需要使用生产环境：

• 直接访问：https://amp.theguardian.com/路径
• 模拟Google访问：https://www.google.co.uk/amp/s/amp.theguardian.com/路径

2.4 AMP测试重点检查项

1. 确认页面确实是AMP版本
2. 广告展示是否正常
3. 样式表现（特别是徽章和图形标点）
4. 图片和嵌入内容展示
5. 窄屏设备（如iPhone5S）兼容性

三、多设备测试策略

3.1 设备测试方案

• 模拟器方案：
  • Chrome设备模拟器（Android）
  • Xcode硬件模拟器（iOS）
• 真机测试方案：
  • 使用ngrok工具暴露本地端口
  • BrowserStack多设备测试平台

3.2 重点测试设备清单

1. iOS设备（特别是Safari浏览器）
2. Edge浏览器（Windows平台）
3. IE11/IE9浏览器
4. Windows 10上的Chrome/Firefox
5. 老旧设备（iPhone 4S、iPad3等）
6. 特殊屏幕尺寸设备（iPhone 5S、Galaxy Note等）

3.3 实用测试技巧

• 设备旋转测试：检查布局自适应
• 非增强版页面测试：确保基础功能可用
• 特定内容测试：使用示例页面清单定位测试用例

四、CODE环境测试

4.1 CODE环境适用场景

• 测试生产环境不存在的内容类型
• 验证特殊嵌入内容（如Guardian Witness）
• 测试实时事件（如liveblog更新）

4.2 CODE环境使用要点

1. 通过frontend.conf文件覆盖默认配置
2. CODE内容访问路径：https://viewer.code.dev-gutools.co.uk/proxy/preview/路径
3. 注意CODE环境的前端内容仍会从生产环境获取

结语

完善的测试流程是Guardian前端项目质量的重要保障。从本地开发到多设备验证，每个环节都有其特定的测试重点和方法。建议开发者建立完整的测试清单，特别关注AMP兼容性和多设备表现，确保为用户提供一致的阅读体验。

frontend The Guardian DotCom. 项目地址: https://gitcode.com/gh_mirrors/fr/frontend