测试工具应该怎样优化？——得结合大家的实际工作痛点

Lynn

231
文章

0
评论

2022-07-15 15:51:27测试交流评论92字数 2265阅读模式

写这篇文章的契机

这几天忙写用例和点点，觉得需要调节下。恰好手头在用的用例工具中有个 2 年前的小优化功能，我觉得可以拿出来讲讲，于是有了这个文章。

背景

部门的测试工作是传统的 web 系统测试，页面元素是很重要的，需要维护到测试用例上（用例是那种表格形式的）。
测试用例一般都是 word 或在网页上，页面元素需求就是 1 个个表格。
当时大部分人都是不断的 ctrl+c，然后 ctrl+v 从 word 表到用例系统上，十分耗时间，这其中当然也包括我。
作为用例系统的维护人，这个肯定不能忍，因为大家都有同样的痛点，那解决这个问题不就是一个很好的优化吗。文章源自玩技e族-https://www.playezu.com/181981.html

方案分析

方案 1-导入法：将网页端、word 上的表格复制到 excel 上，然后再导入系统

这个是最容易想到的，但是发现产品经理的需求文档上的表格换行不统一，复制到 excel 上后明明是一个格子，但因为换行变成了多行格子。这就麻烦了，总不能在 excel 上再处理格式吧，这样更麻烦了，放弃。

方案 2-直接粘贴法：将网页端、word 上的表格直接复制到用例工具上（测试用例组件是富文本）

得益于前端设计者 (81—1) 当时用了 tinymce 富文本组件，它可以将 word、excel 或网页表格粘贴后会转化格式统一的 html 表格，这就方便了
在提交用例内容时，判断内部是否含表格特征，那么解析其中的内容然后调用批量生成测试点接口即可。

方案实施

后端实现批量生成测试点功能，这个不细说了
前端判断内容是否含表格特征，然后让用户决定是 “主题型”（1 个测试主题对应多个期望值）还是 “结论型”（多个条件对应 1 个结论）
然后解析出测试点和测试期望结果，调用后端接口

前端代码参考（仅限 tinymce）文章源自玩技e族-https://www.playezu.com/181981.html

``handleOk = () => {
this.setState({
confirmLoading: true,
}, () => {
const trElms = $(this.state.tmpValue).find('tr'); // 获取表格的每一行元素
if (trElms.length >= 2) { // 2行及以上情况下
let titles = []; // 测试点标题列表
for (let tdElm of $(trElms[0]).find('td,th')) {
titles.push(tdElm.innerText);  // 获取表头
}
let spanMark = new Array(titles.length); // 由表头的长度决定测试项内元素的个数
for (let k = 0; k < spanMark.length; k++) {
spanMark[k] = 0;
}
let testPonits = [];
let tmpCheck = null;
for (let trElm of trElms.slice(1)) { // 非表头部分
let tdElms = $(trElm).find('td,th'); // 获取每行中的每各个格子
let tdElmsArray = [];
for (let elm of tdElms) {
tdElmsArray.push(elm);
}
let testPonit = [];
for (let k = 0; k < spanMark.length; k++) {
if (spanMark[k] > 0) {
if (k == 0 && !!tmpCheck) {
testPonit.push('<strong>' + titles[0].trim() + '</strong>' + ':' + tmpCheck);
}
spanMark[k]--;
continue;
}
if (tdElmsArray.length == 0) {
break;
}
let x = tdElmsArray.shift();
let content = x.innerText.trim(); // 获取表格内容
//if (content === '') continue;
if (x.rowSpan > 1) { // 处理第一列跨行情况（即第1列有单元格合并情况）
spanMark[k] = x.rowSpan - 1;
if (k == 0) {
tmpCheck = content;
}
}
testPonit.push('<strong>' + titles[k].trim() + '</strong>' + ':' + content);
}
if (testPonit.length === 0) return
if (this.state.tablePointType === 1) { // 判断主题型还是结论型
testPonit[0] = testPonit[0].replace("</strong>:", "</strong>:<br/>")
} else {
testPonit[testPonit.length - 1] = testPonit[testPonit.length - 1].replace("</strong>:", "</strong>:<br/>")
}
testPonits.push(testPonit);
}
if (testPonits.length === 0) return
// 保留表格之外的内容
//let modValueObj=$(this.state.tmpValue)
// modValueObj.find("table,tbody").remove()
//let newValue=modValueObj.html()
//this.doOriginEdit(this.state.tmpRecord,newValue)
this.doTablePoints(testPonits); //提交后端
}
})
};