第一步
将需求告诉deepseek，或者kimi，然后叫它按照指定格式输出测试用例。
第二步
解析指定格式数据，将数据写入表。
第一步我们省略，我们来做一个快速解析的工具。如图：
代码实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试用例解析与表格展示</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 40px;
background-color: #f5f7fa;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
table {
width: auto;
border-collapse: collapse;
margin-top: 20px;
table-layout: auto;
}
th, td {
border: 1px solid #ddd;
padding: 6px;
text-align: center;
white-space: pre-wrap;
font-size: 12px;
word-wrap: break-word;
}
th {
background-color: #3498db;
color: white;
font-weight: bold;
}
h1 {
color: #2c3e50;
margin-bottom: 20px;
font-size: 28px;
text-align: center;
}
textarea {
width: 90%;
height: 200px;
padding: 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
margin-bottom: 20px;
resize: vertical;
}
button {
padding: 12px 24px;
background-color: #3498db;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
button:hover {
background-color: #2980b9;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.copy-button {
padding: 5px 10px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
display: inline-block;
}
.copy-button:hover {
background-color: #0056b3;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
/* 添加toast样式 */
.toast {
visibility: hidden;
min-width: 250px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 4px;
padding: 16px;
position: fixed;
z-index: 1;
left: 50%;
bottom: 30px;
transform: translateX(-50%);
font-size: 14px;
}
.toast.show {
visibility: visible;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
/* 添加使用说明按钮样式 */
.help-button {
position: fixed;
top: 20px;
right: 20px;
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
border-radius: 6px;
/* cursor: pointer; */
font-size: 14px;
z-index: 1000;
}
/* 添加弹窗样式 */
.modal {
display: none;
position: fixed;
z-index: 1001;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
border-radius: 8px;
width: 50%;
max-width: 600px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
text-align: center;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.close:hover {
color: #000;
}
</style>
</head>
<body>
<button style="position: fixed; right: 20px;" onclick="window.open('https://kimi.moonshot.cn/')">kimi官网</button></br></br></br>
<button style="position: fixed; right: 20px;" onclick="window.open('https://chat.deepseek.com/')">deepseek官网</button>
<!-- 添加弹窗 -->
<div id="helpModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeHelp()">×</span>
<h2>使用说明</h2>
<p>1. 与deepseek或者kimi对话</p>
<p>2. 指明ai的身份为软件测试工程师</p>
<p>3. 强制要求ai按照以下格式输出测试用例</p>
<p>4. 复制ai生成后的内容粘贴到输入框中，点击解析并生成表格</p>
<p>5. 点击"复制表格数据"按钮，将表格数据复制到剪贴板，并去excel中粘贴数据</p>
<p>测试用例格式示例：</p>
<pre style="background-color: black; color: white; padding: 10px; border-radius: 6px;text-align: left">
按以下格式，输出对应的测试用例：
* 测试用例标题：xxx
* 优先级：xxx
* 测试提要：xxx
* 前提条件：
* 1. xxx
* 2. xxx
* 测试步骤：
* 1. xxx
* 2. xxx
* 3. xxx
* 预期结果：
* xxx
</pre>
</div>
</div>
<div style="text-align: center;" class="container">
<h1>测试用例解析</h1>
<textarea id="dataInput" rows="10" cols="100" placeholder="请输入测试用例数据..."></textarea><br>
<button onclick="parseData()" style="margin: 0 auto;">解析并生成表格</button>
<button onclick="copyTableData()" style="margin: 0 auto;">复制表格数据</button>
<!-- 添加使用说明按钮 -->
<button style="margin: 0 auto;background-color: pink;" onclick="showHelp()">使用说明</button>
<table id="resultTable" style="width: 100%;">
<thead>
<tr>
<th>测试用例标题</th>
<th>优先级</th>
<th>测试提要</th>
<th>前提条件</th>
<th>测试步骤</th>
<th>预期结果</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<!-- 添加toast元素 -->
<div id="toast" class="toast">表格数据已复制到剪贴板</div>
</div>
<script>
function parseData() {
const dataInput = document.getElementById('dataInput').value;
const resultTableBody = document.querySelector('#resultTable tbody');
resultTableBody.innerHTML = '';
const testCases = dataInput.split('---').filter(Boolean);
testCases.forEach(testCase => {
const lines = testCase.split('\n').map(line => line.trim()).filter(line => line !== '');
const testCaseData = {
title: '',
priority: '',
summary: '',
preconditions: '',
steps: '',
expectedResults: ''
};
let currentField = null;
lines.forEach(line => {
if (line.startsWith('* 测试用例标题：')) {
testCaseData.title = line.replace('* 测试用例标题：', '').trim();
} else if (line.startsWith('* 优先级：')) {
testCaseData.priority = line.replace('* 优先级：', '').trim();
} else if (line.startsWith('* 测试提要：')) {
testCaseData.summary = line.replace('* 测试提要：', '').trim();
} else if (line.startsWith('* 前提条件：')) {
currentField = 'preconditions';
} else if (line.startsWith('* 测试步骤：')) {
currentField = 'steps';
} else if (line.startsWith('* 预期结果：')) {
currentField = 'expectedResults';
} else if (currentField) {
const cleanedLine = line.trim().replace(/^\* /, '');
if (cleanedLine === '') {
return;
}
if (cleanedLine) {
if (testCaseData[currentField]) {
testCaseData[currentField] += '\r\n' + cleanedLine;
} else {
testCaseData[currentField] = cleanedLine;
}
}
}
});
const row = document.createElement('tr');
if (testCaseData.title === '') {//去除空行
return;
}
row.innerHTML = `
<td>${testCaseData.title}</td>
<td>${testCaseData.priority}</td>
<td>${testCaseData.summary}</td>
<td>${testCaseData.preconditions}</td>
<td>${testCaseData.steps}</td>
<td>${testCaseData.expectedResults}</td>
`;
resultTableBody.appendChild(row);
});
}
function copyTableData() {
const table = document.getElementById('resultTable');
let data = '';
for (let i = 1; i < table.rows.length; i++) {
const row = table.rows[i];
const rowData = [];
for (let j = 0; j < row.cells.length; j++) {
const cellContent = row.cells[j].innerText.replace(/"/g, '""'); // 将内容中的双引号替换为两个双引号
rowData.push(`"${cellContent}"`); // 用双引号包裹单元格内容
}
data += rowData.join('\t') + '\n';
}
navigator.clipboard.writeText(data.trim())
.then(() => showToast())
.catch(() => alert('复制失败，请手动选择并复制表格内容'));
}
function showToast() {
const toast = document.getElementById("toast");
toast.className = "toast show";
setTimeout(() => toast.className = toast.className.replace("show", ""), 3000);
}
// 添加帮助弹窗相关函数
function showHelp() {
document.getElementById('helpModal').style.display = 'block';
}
function closeHelp() {
document.getElementById('helpModal').style.display = 'none';
}
// 点击弹窗外区域关闭弹窗
window.onclick = function(event) {
const modal = document.getElementById('helpModal');
if (event.target == modal) {
modal.style.display = 'none';
}
}
</script>
</body>
</html>