在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

abi/screenshot-to-code

菜单

测试

相关源文件

本文档介绍了Screenshot-to-Code项目所使用的测试基础架构和方法。它涵盖了前端和后端测试方法，重点介绍了如何运行现有测试和编写新测试。

概述

Screenshot-to-Code采用多层测试方法来确保功能和可靠性

测试类型目的工具位置
端到端测试验证完整的应用程序工作流程Puppeteerfrontend/src/tests/qa.test.ts
类型检查（前端）捕获类型错误TypeScript贯穿前端代码
类型检查（后端）捕获类型错误Pyright贯穿后端代码
单元测试（后端）测试单个组件pytest后端测试目录

测试架构图

来源: frontend/src/tests/qa.test.ts1-276 frontend/jest.config.js1-10 frontend/src/setupTests.ts1-4 backend/README.md1-8

前端端到端测试

该项目使用Puppeteer进行端到端测试，它自动化浏览器交互来验证完整的应用程序工作流程。

测试配置

端到端测试在jest.config.js中配置，具有以下设置

  • 使用ts-jest预设以支持TypeScript
  • 将测试环境设置为node
  • 为API调用配置更长的超时时间（30秒）
  • 从.env.jest加载环境变量

来源: frontend/jest.config.js1-10 frontend/src/setupTests.ts1-4

测试用例结构

中的E2E测试qa.test.ts分为三个主要类别

  1. 创建测试：从屏幕截图和URL生成代码
  2. 更新测试：通过编辑指令修改生成的代码
  3. 导入测试：从现有代码开始进行修改

每个测试都针对不同的AI模型（如GPT-4o、Claude）和技术栈（HTML+Tailwind、React等）组合进行运行。

来源: frontend/src/tests/qa.test.ts15-143

App 辅助类

E2E 测试依赖一个名为App的辅助类，它抽象了常见的测试操作

主要方法包括

  • uploadImage()：上传屏幕截图并等待代码生成
  • generateFromUrl()：输入URL并捕获结果页面
  • edit()：应用编辑指令以更新生成的代码
  • clickVersion()：在不同代码版本之间切换
  • regenerate()：触发代码重新生成
  • _screenshot()：在各个步骤进行屏幕截图（用于调试）

来源: frontend/src/tests/qa.test.ts146-276

测试执行流程

此图显示了典型测试执行期间的操作顺序

来源: frontend/src/tests/qa.test.ts202-259

测试夹具

E2E 测试使用了以下固定值

测试夹具目的应用场景
simple_button.png带按钮的简单UI更新和重新生成测试
simple_ui_with_image.png带有文本和图像的UI图像处理测试

测试结果（屏幕截图）保存在frontend/src/tests/results/目录中，该目录在.gitignore中被排除版本控制。

来源: frontend/src/tests/fixtures/simple_button.png frontend/src/tests/fixtures/simple_ui_with_image.png frontend/src/tests/qa.test.ts8-10 frontend/.gitignore28-30

后端测试

单元测试

后端使用Python的pytest框架进行测试。您可以通过以下方式运行测试：

类型检查

后端类型检查使用Pyright进行。

中的pyrightconfig.json文件配置了要从类型检查中排除的文件

来源: backend/README.md1-8 backend/pyrightconfig.json1-4

运行测试

运行前端测试

运行E2E测试

  1. 确保前端开发服务器正在运行（npm run dev）
  2. 创建一个.env.jest文件，其中包含所需的环境变量（示例如下）
  3. 使用npm test或npx jest qa.test.ts运行测试

示例.env.jest文件

TEST_ROOT_PATH=src/tests
TEST_SCREENSHOTONE_API_KEY=your_api_key_here

运行后端测试

使用以下命令运行后端测试：

使用以下命令运行类型检查：

来源: backend/README.md1-8 frontend/src/setupTests.ts1-4

编写新测试

添加E2E测试

添加新的E2E测试

  1. 识别您要测试的工作流程
  2. 在qa.test.ts中，使用Puppeteer和App辅助类添加新的测试用例
  3. 遵循现有测试的模式
    • 创建具有适当参数的App实例
    • 初始化应用
    • 执行操作（上传图片、从URL生成、编辑）
    • 允许操作完成（根据需要使用超时）

示例

添加测试固定值

添加新的测试固定值

  1. 将图像或文件添加到frontend/src/tests/fixtures/
  2. 在qa.test.ts的顶部定义一个引用固定值的常量
  3. 在您的测试中使用固定值

来源: frontend/src/tests/qa.test.ts15-143

最佳实践

  1. 使用App辅助类进行所有浏览器交互，以保持一致性
  2. 在测试的关键点截屏，以便调试失败
  3. 为涉及API调用或模型生成的测试设置适当的超时
  4. 保持固定值小巧，但要代表实际使用情况
  5. 添加清晰的测试名称，描述正在测试的内容

通过遵循这些模式，您可以确保测试套件在应用程序发展过程中保持可维护性。

来源: frontend/src/tests/qa.test.ts146-276