测试 on 码工瑞瑞的博客https://blog.137027.xyz/tags/%E6%B5%8B%E8%AF%95/Recent content in 测试 on 码工瑞瑞的博客Hugozh-cnThu, 27 Aug 2026 20:00:00 +0800零基础快速无脑搭建后台管理系统（第二期）：AI 帮你测试与修 Bughttps://blog.137027.xyz/posts/vibcoding-ruoyi-tutorial-2/Thu, 27 Aug 2026 20:00:00 +0800https://blog.137027.xyz/posts/vibcoding-ruoyi-tutorial-2/零基础快速无脑搭建后台管理系统（第二期）：TraeCode / TraeWork 测试和 Bug 修复完整教程。零基础快速无脑搭建后台管理系统 Vibcoding_我帮你第二期

导读：上一篇博客教大家怎么样无脑快速搭建一个后台管理系统，这篇继续教大家怎么样使用 Trae（已更名为 TraeCode）或者 TraeWork 进行测试和 Bug 修复。全程不需要懂代码，让 AI 自己操作！

一、工具下载

谷歌浏览器

网上的在线安装包都很慢，如果访问谷歌浏览器官网（https://www.google.cn/chrome）下载，安装需要等待很久。这里推荐使用离线版安装包，下载更快。

下载地址（光鸭云盘）

  • 需要登录保存，无限速，登录送 2T
  • 光鸭云盘用户给你分享了：「ChromeStanda…up64.exe」，点击链接或复制整段内容，打开「光鸭APP」即可获取。 链接：https://www.guangyapan.com/s/1939717744297246725_afdKmntd6DRoD0OP

Trae（更名为 TraeCode）和 TraeWork 谷歌插件安装

第一步：开启外部浏览器控制

开启AI控制外部浏览器设置
开启AI控制外部浏览器设置

点击 设置 -> 左侧浏览器 -> 右侧打开"允许AI控制外部浏览器"，然后点击 “无法访问商店？尝试手动安装”。

第二步：手动安装插件

手动安装插件页面
手动安装插件页面

点击下载，会马上下载完成，然后点击前往安装。在浏览器输入 chrome://extensions/，按照要求拖拽安装。

插件拖拽安装过程
插件拖拽安装过程

第三步：安装完成

安装好之后是这样，图中第一个就是 TraeCode 的插件。

已安装的浏览器扩展列表
已安装的浏览器扩展列表

提示： TraeWork 的插件安装方式与 TraeCode 完全一样，这里不再演示，搜索安装即可。

二、测试和 Bug 修复

版本说明： 2026 年 8 月之后推荐使用 TraeWork 进行测试和 Bug 修复。

TraeCode 使用

步骤 1：配置完全访问权限

Trae 更新到最新版 TraeCode，点击 “如何批准 agent 操作"的设置，选择"完全访问”。

TraeCode的agent操作设置
TraeCode的agent操作设置

选择完全访问权限
选择完全访问权限

步骤 2：配置多模态模型

一定要配置支持图片输入的模型，或者不配置直接选择 Auto Mode。这里配置了 Seed-Code，这个模型多模态在 Trae 里最实惠，可以使用很久。

TraeCode模型配置
TraeCode模型配置

步骤 3：输入测试提示词

测试演示，直接输入这个提示词：

用户名称 admin  密码 admin123  登录地址 http://localhost  帮我对整个项目酒店客房管理进行一次测试，确保每一个按钮点击都有响应，使用浏览器

输入测试提示词
输入测试提示词

步骤 4：修复 Bug

Bug 修复同上：直接截图让 TraeCode 修复 bug 即可，修复完成之后让 Trae 使用浏览器测试，全程不需要懂代码，让 AI 自己操作。

TraeWork 使用

步骤 1：打开并选择项目

打开软件登录后点击 Code，文件夹选择之前的 ry2（上一期项目文件夹），点击 “如何批准 agent 操作"的设置，选择"完全访问”。

TraeWork登录后点击Code
TraeWork登录后点击Code

选择上一期项目文件夹
选择上一期项目文件夹

步骤 2：配置模型

模型配置 DeepSeek-V4-flash 正式版（最经济），思考强度选择极高，打开更大上下文 MAX。

TraeWork模型配置
TraeWork模型配置

步骤 3：让 AI 理解项目

点击项目理解，然后发送，先让 TraeWork 了解整个项目。

点击项目理解并发送
点击项目理解并发送

步骤 4：查看测试结果

本次测试完成，任务耗时 3 分 43 秒。

测试完成结果
测试完成结果

本次使用积分 10.51。

积分使用情况
积分使用情况

步骤 5：多模态浏览器测试

配置多模态模型并发送提示词进行测试（"/" 选择 Browser 可以调用之前安装的浏览器插件，让 AI 使用浏览器），这里思考强度选择高。

多模态模型配置
多模态模型配置

浏览器测试过程
浏览器测试过程

浏览器测试结果
浏览器测试结果

步骤 6：发现 Bug 直接修复

测试完成后如果发现 bug，直接截图让 AI 修复即可。

Bug修复操作
Bug修复操作

总结

通过 TraeCode 或 TraeWork，即使完全不懂代码，也能轻松完成项目的测试和 Bug 修复：

  1. 配置好完全访问权限和多模态模型
  2. 安装并启用浏览器插件
  3. 输入测试提示词，让 AI 自动测试
  4. 发现 Bug 直接截图让 AI 修复
]]>博客功能全测试https://blog.137027.xyz/posts/full-feature-test/Sun, 19 Jul 2026 20:00:00 +0800https://blog.137027.xyz/posts/full-feature-test/一篇文章测试博客所有功能：Markdown 排版、代码高亮、数学公式、图表、短视频、加密内容等。基础排版

文字样式

这是一段普通文字。这是粗体，这是斜体，这是删除线，这是行内代码。

还可以使用 粗斜体 来同时强调。

无序列表

  • 第一项
  • 第二项
    • 子项目 A
    • 子项目 B
  • 第三项

有序列表

  1. 安装 Hugo
  2. 创建站点
  3. 选择主题
  4. 开始写作

任务列表

  • 搭建博客框架
  • 配置主题
  • 添加自定义功能
  • 持续更新文章

引用

代码是写给人看的，附带能在机器上运行。

— Harold Abelson

嵌套引用：

第一层引用

第二层嵌套引用

第三层，兔子洞到底有多深？

分割线

代码高亮

普通代码块

def fibonacci(n: int) -> list[int]:
    """生成斐波那契数列"""
    fib = [0, 1]
    for i in range(2, n):
        fib.append(fib[i-1] + fib[i-2])
    return fib[:n]

print(fibonacci(10))

带文件名的代码块

📄 app.js 
const express = require("express");
const app = express();

app.get("/", (req, res) => {
  res.json({ message: "Hello, Hugo Blog!" });
});

app.listen(3000, () => {
  console.log("Server running on port 3000");
});
📄 index.html 
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>我的博客</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>
📄 deploy.sh 
#!/bin/bash
hugo --minify
git add -A
git commit -m "deploy: $(date '+%Y-%m-%d %H:%M')"
git push origin master

多语言测试

package main

import "fmt"

func main() {
    fmt.Println("Hello, 世界!")
}
:root {
  --primary: #2563eb;
  --radius: 8px;
}

.card {
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
SELECT p.title, p.date, COUNT(c.id) AS comment_count
FROM posts p
LEFT JOIN comments c ON p.id = c.post_id
WHERE p.date >= '2026-01-01'
GROUP BY p.id
ORDER BY comment_count DESC
LIMIT 10;

数学公式（KaTeX）

行内公式

质能方程 $E = mc^2$，欧拉公式 $e^{i\pi} + 1 = 0$，勾股定理 $a^2 + b^2 = c^2$。

块级公式

二次方程求根公式：

$$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$

高斯积分：

$$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$

矩阵：

$$ \begin{pmatrix} a_{11} & a_{12} \ a_{21} & a_{22} \end{pmatrix} \begin{pmatrix} x_1 \ x_2 \end{pmatrix} = \begin{pmatrix} b_1 \ b_2 \end{pmatrix} $$

求和与连乘：

$$ \sum_{k=1}^{n} k = \frac{n(n+1)}{2}, \quad \prod_{k=1}^{n} k = n! $$

表格

基础表格

功能 状态 说明
Markdown 渲染 ✅ 支持 GFM 扩展语法
代码高亮 ✅ Chroma 引擎，Monokai 主题
数学公式 ✅ KaTeX 渲染
Mermaid 图表 ✅ 流程图/时序图/甘特图
图片灯箱 ✅ GLightbox 点击放大
加密内容 ✅ SHA-256 前端验证

对齐方式

左对齐 居中对齐 右对齐
Hugo 静态生成器 Go
Vite 构建工具 JavaScript
Tailwind CSS 框架 Utility-first

提示框（Alert）

💡 提示
这是一条信息提示，用于展示补充说明或小贴士。
✅ 成功
操作已成功完成！你的博客已部署上线。
⚠️ 注意
修改 hugo.toml 后需要重启服务才能生效。
🚫 危险
请勿在生产环境使用 --disableLiveReload 以外的调试参数！

折叠面板（Details）

点击展开：什么是 Hugo？

Hugo 是世界上最快的静态网站生成器，使用 Go 语言编写。它能在几毫秒内将 Markdown 文件转换为完整的 HTML 网站，无需数据库或运行时依赖。

核心优势：

  • 构建速度极快（每秒 1000+ 页面）
  • 丰富的模板系统
  • 内置 Sass/SCSS 处理
  • 多语言支持
点击展开：常用 Hugo 命令 
hugo new posts/my-post.md    # 创建新文章
hugo server -D               # 启动开发服务器（含草稿）
hugo --minify                # 生产构建（压缩输出）
hugo gen doc                 # 生成文档

Mermaid 图表

流程图

graph TD
    A[开始写作] --> B{文章完成?}
    B -->|是| C[git add & commit]
    B -->|否| A
    C --> D[git push]
    D --> E[自动部署]
    E --> F[网站更新完成]

时序图

sequenceDiagram
    participant 用户
    participant 浏览器
    participant 服务器
    用户->>浏览器: 输入网址
    浏览器->>服务器: HTTP 请求
    服务器-->>浏览器: 返回 HTML
    浏览器-->>用户: 渲染页面

甘特图

gantt
    title 博客开发计划
    dateFormat  YYYY-MM-DD
    section 基础搭建
    安装 Hugo           :done, a1, 2026-01-01, 1d
    配置主题            :done, a2, after a1, 2d
    section 功能开发
    评论系统            :done, b1, 2026-01-05, 3d
    搜索功能            :done, b2, after b1, 2d
    自定义短代码        :active, b3, 2026-01-10, 5d
    section 部署上线
    配置域名            :c1, 2026-01-20, 2d
    正式上线            :milestone, c2, 2026-01-22, 0d

时间线（History）

2026-01-01
🎉 博客项目启动，完成 Hugo 安装与基础配置。
2026-01-05
集成 PaperMod 主题，配置暗色模式与多语言支持。
2026-01-10
添加 Giscus 评论系统、搜索功能、阅读进度条等高级特性。
2026-07-19
完成全部功能集成，发布本篇全功能测试文章。

加密内容

此内容已加密，请输入密码查看

密码错误，请重试

B 站视频嵌入

图片与灯箱

点击下图可以放大查看（GLightbox 灯箱效果）：

博客头像
博客头像

链接测试

内部链接

外部链接

脚注测试

Hugo 使用 Go 模板引擎1，支持短代码2扩展。

定义列表

Hugo
静态网站生成器，用 Go 编写
PaperMod
Hugo 的极简响应式主题
KaTeX
快速数学公式渲染库

特殊字符与转义

星号转义：*不是斜体*

反引号转义：`不是代码`

HTML 实体：& < > ©

长段落测试（阅读进度条）

这是一段较长的文字，用于测试阅读进度条的效果。当你向下滚动页面时，顶部应该会出现一个蓝紫渐变的进度条，显示当前的阅读进度。这个功能通过监听 scroll 事件，计算当前滚动位置与页面总高度的比例来实现。进度条使用了 CSS transition 来保证动画流畅，同时设置了较高的 z-index 确保始终显示在最顶层。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

总结

本文测试了以下功能：

# 功能 测试方式
1 基础 Markdown 标题/粗体/斜体/列表/引用
2 代码高亮 多语言 + 带文件名
3 数学公式 行内 + 块级 + 矩阵
4 表格 基础 + 对齐方式
5 提示框 4 种类型全覆盖
6 折叠面板 2 个示例
7 Mermaid 流程图/时序图/甘特图
8 时间线 4 个节点
9 加密内容 密码 1234
10 B 站视频 嵌入播放器
11 图片灯箱 点击放大
12 内/外链接 跳转测试
13 脚注 2 个引用
14 阅读进度条 滚动页面观察顶部
15 目录 TOC 右侧浮动 + 文内
16 版权声明 文末自动显示
17 相关文章 文末推荐

如果以上所有功能都正常显示，说明博客系统运行良好！

  1. Go Template 是 Go 标准库中的模板系统。 ↩︎

  2. Shortcodes 是 Hugo 中用于在 Markdown 中插入复杂内容的占位符。 ↩︎

]]>