企业官网建设流程全解析

基于Vibe Coding的OJ平台（三）

目录

基于Vibe Coding的OJ平台（三）

一、阶段五

1.1.ui-ux-pro-max-skil

1.2.登录注册页面开发

1.3.题目列表页面开发

1.4.题目详情页面开发

1.5.管理后台页面开发

1.6.提交历史页面开发

1.7.落地页面开发

二、阶段六

2.1.playwright

2.2.生成Web自动化测试文档

2.3.实现数据库重置工具

2.4.在Windows上clone仓库

三、文档编写

3.1.项目介绍文档和部署文档

3.2.项目描述文档

一、阶段五

1.1.ui-ux-pro-max-skil

UI：用户界面（界面好不好看）

UX：用户体验（界面好不好用）

sudo npm install -g uipro-cli // 下载安装器 cd /path/to/your/project // 进入到项目目录下 uipro init --ai opencode // 安装skill

更新.gitignore

1.2.登录注册页面开发

1.3.题目列表页面开发

1.4.题目详情页面开发

1.5.管理后台页面开发

1.6.提交历史页面开发

1.7.落地页面开发

二、阶段六

2.1.playwright

Web自动化测试：将前后端放在一起，测试整体的功能

MCP（Model Context Protocol）：给LLM安装“手”的协议

playwright-mcp：clinet端发送请求，server端对浏览器操作

CLI（Command Line Interface）：命令行界面（推荐）

playwright-cli：实现了一个命令行程序

在Windows搭建playwright-cli前，需要在Windows上安装opencode

安装Node.js，安装opencode（npm install -g @opencode/cli）

安装playwright.cli（npm install -g @playwright/cli@latest）

验证playwright环境（playwright-cli open sogou.com --headed）

有头模式：浏览器运行，窗口也显示出来

无头模式：浏览器运行，但会不显示窗口

安装playwright-skill（playwright-cli install --skills agents）

全局安装：在用户目录下安装

局部安装：在当前项目目录下安装

2.2.生成Web自动化测试文档

2.3.实现数据库重置工具

每一次进行自动化测试之前，都需要把数据库进行重置

删除不必要的数据，构建好测试过程依赖的数据，让AI生成程序实现（高风险）

2.4.在Windows上clone仓库

Web自动化在Windows上执行，测试文档在Linux上

需要将文档放到Windows上，通过opencode执行

重置数据库

在Windows端进行接口自动化测试、opencode无法测试调整

在测试一个样例后，让AI再更新一个Web自动化测试文档

记录之前的操作步骤，为了后续更加高效完成自动化测试

三、文档编写

3.1.项目介绍文档和部署文档

3.2.项目描述文档