Skip to content

V
Vue-WebDriver
Commit 75a6b6dc by 高源
Options

sdk-table 重构

parent 4d941edf
Showing with 313 additions and 37 deletions
src/components/collectionTable.vue
......@@ -50,7 +50,8 @@
<script>
import VXETable, { t } from 'vxe-table'
import { getTableData } from '../sdk'
// import { getTableData } from '../sdk'
import { cell, checkTableFromXpaths } from '../sdk-table'
export default {
name: 'collectionTable',
components: {},
......@@ -64,7 +65,9 @@ export default {
firstXpath: [],
somePath: '',
index: 0,
Xpaths:[]
Xpaths: [],
sdkXPath: [],
checkTableFrom: null
}
},
created () {
......@@ -76,8 +79,25 @@ export default {
computed: {},
methods: {
getTable () {
//表格展示配置
let _this = this
console.log(_this.sdkXPath)
_this.checkTableFrom = checkTableFromXpaths(_this.sdkXPath)
console.log(_this.checkTableFrom)
_this.tableData = _this.checkTableFrom.tableData
console.log(_this.tableData)
this.tableColumn = []
for (let i = 0; i < _this.tableData.length; i++) {
let objs = {}
objs.field = ('content' + i) + '.content'
objs.title = '请填写标题'
objs.width = 145
_this.tableColumn.push(objs)
}
_this.isSelectTable = false
return
//表格展示配置
_this.tableData = []
_this.tableColumn = []
_this.tableData = getTableData(_this.Xpaths)
......@@ -94,7 +114,6 @@ export default {
console.log(_this.tableData)
return
},
......@@ -148,6 +167,14 @@ export default {
_this.SelectTableData.push(obj)
_this.firstXpath.push(elementInfo.Xpath)
_this.Xpaths.push(elementInfo.Xpath)
// sdkTable--------------------------------------------------------------------------------------------------------
var selectCell = new cell(elementInfo.Xpath, 'cellName', 'text', 'title')
// console.log(selectCell)
_this.sdkXPath.push(selectCell)
// sdkTable--------------------------------------------------------------------------------------------------------
// 移除事件监听器
document.removeEventListener('contextmenu', contextMenuHandler);
}
......@@ -172,7 +199,7 @@ export default {
}
}
},
},
}
</script>
......
src/sdk-table.js
......@@ -5,23 +5,31 @@
* @param {string} type 元素取值类型，文本，链接，元素路径（点击动作用）
* @param {string} title 标题信息
*/
var cell = function (xpath, name, type, title) {
let Xpath = xpath, Name = name, Type = type, Title = title;//初始化
let _xpathArray = xpath.split('/');
let ParentXpath = null, RelativeXpath = null;
function cell (xpath, name, type, title) {
// 初始化
this.xpath = xpath;
this.name = name;
this.type = type;
this.title = title;
var _xpathArray = this.xpath.split('/');
this.ParentXpath = null;
this.RelativeXpath = null;
/**
* 根据父路径更新当前的相对路径
* @param {string[]} parentXpath 父路径
*/
function updateRelativePath(parentXpath) {
ParentXpath = parentXpath;//其实这边严谨的来说要验证一下XPath是否真的有相同的根
RelativeXpath = _xpathArray.slice(parentXpath.length);
this.updateRelativePath = function (parentXpath) {
this.ParentXpath = parentXpath;//其实这边严谨的来说要验证一下XPath是否真的有相同的根
this.RelativeXpath = _xpathArray.slice(parentXpath.length);
// console.log(this.ParentXpath)
let absolutePath = this.ParentXpath.join('/') + '/' + this.RelativeXpath.join('/');
return absolutePath
}
/**
* 根据索引获取值
* @param {any} index 索引号
*/
function getValue(index) {
this.getValue = function (index) {
}
return this;//返回当前对象
}
......@@ -30,40 +38,56 @@ var cell = function (xpath, name, type, title) {
* @param {cell[]} tags 元素集合{xpath=XPath,name=返回的属性名,title=标题信息,type=操作类型：文本，链接，元素路径（点击动作用）,relativePath=相对路径（最终的）}
* @returns {any} 返回对象信息{}
*/
function checkTableFromXpaths(cells) {
function checkTableFromXpaths (cells) {
let rtns = null;
let absolutePaths = []; //绝对路径集合
let relativeXpaths = []; //相对路径集合
let tableData = [] //最后界面展示数据
//先找到共同的根以及各路径在共同根下的相对路径
let parent = getCommonParentXPath(cells);
if (parent == null || parent.length == 0) return rtns;//如果找不到直接返回null
cells.forEach(o => o.updateRelativePath(parent));//更新每个cell的相对路径
cells.forEach(o => absolutePaths.push(o.updateRelativePath(parent)));//更新每个cell的相对路径
while (parent.length > 0) {
if (verifyTable(parent, absolutePaths)) break;//如果验证表结构成功，就可以退出了
parent.pop();//向上一级找
cells.forEach(o => o.updateRelativePath(parent));//更新每个cell的相对路径
if (verifyTable(parent, absolutePaths, cells)) break;//如果验证表结构成功，就可以退出了
// parent.pop();//向上一级找
// cells.forEach(o => o.updateRelativePath(parent));//更新每个cell的相对路径
}
if (parent.length === 0) return rtns;//如果父对象都为空了，直接返回null
let tableData = getTableData(parent, relativeXpaths);//根据验证后的信息来获取表
// 循环数组将相对路径取出
for (let i = 0; i < cells.length; i++) {
let relativeXpath = cells[i].RelativeXpath.join('/') // 转换字符
relativeXpaths.push(relativeXpath)
}
// let tableData = getTableData(cells[0].ParentXpath, relativeXpaths);//根据验证后的信息来获取表
// console.log(tableData)
// 获取当前表结构的所有xpath，
let resultElement = combineXPaths(cells[0].ParentXpath, relativeXpaths);
// 表数据查找 返回界面需要的表结构
tableData = getTableData(resultElement)
// 返回最终结果
rtns = {
parent: parent,
parent: cells[0].ParentXpath,
relativeXpaths: relativeXpaths,
tableData: null
tableData: tableData
};
return rtns;
return rtns
}
/**
* 返回多个元素XPath的共同父节点，返回数组以方便向上移动
* @param {string[]} absolutePaths Xpath绝对路径集合
* @returns {string[]} 返回string[]的共同的根的各部分的集合
*/
function getCommonParentXPath(tags) {
function getCommonParentXPath (tags) {
let rtns = null;
if (!tags || tags.length === 0) return rtns;
let allXpaths = tags.map(path => tag.xpath.split('/'));// 分割每个路径为组成部分
// 检查输入参数是否有效
if (!tags || tags.length === 0) return null;
let allXpaths = tags.map(path => path.xpath.split('/'));// 分割每个路径为组成部分
rtns = [];// 查找公共前缀
for (let i = 0; i < allXpaths[0].length; i++) {
if (allXpaths.every(path => path[i] === allXpaths[0][i])) { // 检查所有路径是否有这个部分
rtns.push(allXpaths[0][i]);
} else {break;}//如果发现不同的，直接就可以退出了
} else { break; }//如果发现不同的，直接就可以退出了
}
return rtns;
}
......@@ -74,7 +98,7 @@ function getCommonParentXPath(tags) {
* @param {string[]} absoluteXpaths 绝对路径集合
* @returns {string[]} 返回string[]的相对路径集合
*/
function getRelativeXPaths(parentXpath, absoluteXpaths) {
function getRelativeXPaths (parentXpath, absoluteXpaths) {
let rtns = [];
let splitPaths = absolutePaths.map(path => path.split('/'));
splitPaths.map(path => rtns.push(path.slice(parentXpath.length)));
......@@ -84,18 +108,243 @@ function getRelativeXPaths(parentXpath, absoluteXpaths) {
* 验证表结构是否正确
* @param {string[]} parentXPath 父节点路径集合
* @param {string[]} relativeXPaths 相对路径集合
* @param {cells[]} cells 元素集合{xpath=XPath,name=返回的属性名,title=标题信息,type=操作类型：文本，链接，元素路径（点击动作用）,relativePath=相对路径（最终的）}
* @returns {boolean} 返回true为表结构正确
*/
function verifyTable(parentXPath, relativeXPaths) {
return false;
function verifyTable (parentXPath, relativeXPaths, cells) {
// 验证初始路径是否存在
if (!allElementsExist(relativeXPaths)) {
return false;
}
parentXPath = parentXPath.join('/')
// 去除相同部分并保留不同的部分
let modifiedRelativeXPaths = relativeXPaths.map(path => removeCommonPart(path, parentXPath));
// 自增 parentXPath 的最后一个节点的下标
parentXPath = incrementLastIndex(parentXPath);
// 拼接新路径并验证
let newPaths = modifiedRelativeXPaths.map(relativePath => parentXPath + relativePath);
// console.log(newPaths)
return allElementsExist(newPaths, cells);
}
/**
* 验证路径是否都能被找到
* @param {array[]} paths 拼接的xpath集合，
* @param {cells[]} cells 单元格数组
* @returns {boolean} 返回true，组合的路径都能被找到
*/
function allElementsExist (paths, cells) {
// 实现一个函数来检查所有路径是否存在
return paths.every(path => elementExists(path, cells));
}
/**
* 根据路径信息获取表内的数据
* @param {string[]} parentXPath 父节点路径集合
* 该函数用来移出绝对路径中的相同父节点部分
* @param {srting} paths 绝对路径
* @param {srting} commonPart 父节点
*/
function removeCommonPart (path, commonPart) {
// 实现一个函数来移除路径中的共同部分
return path.replace(commonPart, "");
}
/**
* 处理xpath父节点的最后一个节点下标
*/
function incrementLastIndex (xpath) {
// 将 XPath 分割为节点数组
let parts = xpath.split('/');
// 找到最后一个节点
let lastIndex = parts.length - 1;
let lastNode = parts[lastIndex];
// 正则表达式用于找到节点中的数字部分
let regex = /(\d+)(?!.*\d)/;
// 如果最后一个节点包含数字，则增加该数字
if (lastNode.match(regex)) {
lastNode = lastNode.replace(regex, function (match) {
return parseInt(match) + 1;
});
} else {
// 如果没有数字，假设是第一个索引并添加 [1]
lastNode += "[1]";
}
// 重新组装 XPath
parts[lastIndex] = lastNode;
return parts.join('/');
}
/**
* 检查XPath是否指向一个存在的元素，如果存在就返回，当父节点的最后一个下标换成第二行的下标时，组合同样的相对路径，向上查找相同的父节点并更新cell对应的父节点，保证当前选中是表结构
*/
function elementExists (xpath, cells) {
let documentResult = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
if (!!documentResult.singleNodeValue) {
// 如果找到元素，返回 true
return true;
} else {
// 没找到元素，开始逐级向上检查
let parts = xpath.split('/');
// 移除最后一个节点，逐级向上检查
while (parts.length > 1) {
parts.pop();
// reducedXPath 这个路径以绝对xpath向上查找
let reducedXPath = parts.join('/');
documentResult = document.evaluate(reducedXPath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
if (!!documentResult.singleNodeValue) {
// 如果在上一级找到了元素，返回 true
let xpathArray = reducedXPath.split('/');
// 移除数组中的空字符串元素，这通常出现在字符串的开头
cells.forEach(o => o.updateRelativePath(xpathArray));//更新每个cell的相对路径和父节点
return true;
}
}
// 如果遍历完所有节点还是没找到，返回 false
return false;
}
}
/**
* // 公共部分与拆解部分组合查询 找出当前节点下所有符合条件的表数据
* @param {string} commonXPath 父节点路径
* @param {string[]} relativeXPaths 相对路径集合
* @returns {any} 返回表内数据
* @returns {any} 返回表格内所有符合条件的Xpath
*/
function getTableData(parentXPath, relativeXPaths) {
let rtns = null;
return rtns;
}
\ No newline at end of file
function combineXPaths (commonXPath, paths) {
// console.log(commonXPath, paths)
// 然后去除公共路径最后一个元素的下标
// let samePath =''
let commonPath = [];
commonPath = commonXPath
if (commonPath.length > 0) {
let lastElement = commonPath[commonPath.length - 1];
let lastElementWithoutIndex = lastElement.split('[')[0];
commonPath[commonPath.length - 1] = lastElementWithoutIndex;
}
commonXPath = commonPath.join('/')
// 更新公共根节点路径，去除最后一个元素的下标
// let updatedCommonPathStr = commonPath.join('/');
let content = [];
let index = 0;
// 从给定的XPath中去除最后一个节点
function removeLastNode (xpath) {
let parts = xpath.split('/');
parts.pop();
return parts.join('/');
}
// 检查XPath是否指向一个存在的元素
function elementExists (xpath) {
let result = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
return !!result.singleNodeValue;
}
while (true) {
let indexedCommonXPath = commonXPath + '[' + (index + 1) + ']'; // XPath的下标从1开始
// 如果当前下标的元素不存在，则向上查找
while (!elementExists(indexedCommonXPath) && indexedCommonXPath.length > commonXPath.length) {
indexedCommonXPath = removeLastNode(indexedCommonXPath);
}
// 如果找到公共XPath层，则停止查找
if (indexedCommonXPath.length <= commonXPath.length) {
break;
}
// 将找到的XPath与路径组合，并存储在content数组中
let combinedPaths = paths.map(path => indexedCommonXPath + '/' + path);
content.push({ index: index, paths: combinedPaths });
index++;
}
return content;
}
/**
* // 根据找出的表结构的所有cell的Xpath 进行元素内容查找
* @param {string[]} arrayObjects 相对路径集合
* @returns {any} 返回已找到的数据
*/
function findElements (arrayObjects) {
let results = [];
// 从给定的XPath中去除最后一个节点
function removeLastNode (xpath) {
let parts = xpath.split('/');
parts.pop();
return parts.join('/');
}
// 检查XPath是否指向一个存在的元素
function elementExistss (xpath) {
let result = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
return !!result.singleNodeValue;
}
// 对每个paths数组进行查找
arrayObjects.forEach(item => {
let groupResult = { index: item.index, elements: [] };
item.paths.forEach(path => {
let currentXPath = path;
// 从XPath的最后一个节点开始查找
// console.log(!elementExistss(currentXPath))
while (!elementExistss(currentXPath) && currentXPath !== '') {
currentXPath = removeLastNode(currentXPath);
}
// 如果找到了元素
if (currentXPath !== '') {
let result = document.evaluate(currentXPath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
let element = result.singleNodeValue;
groupResult.elements.push({ xpath: currentXPath, content: element.textContent });
}
});
results.push(groupResult);
});
return results;
}
/**
* // 表结构处理，处理成界面需要的结构
* @param {string[]} resultElement 已经找到的所有数据
* @returns {any} 返回已找到的数据
*/
function getTableData (resultElement) {
let foundElements = []
let transformedData = []
// 判断是否有数据
if (resultElement) {
// console.log("Element found: ", resultElement);
// 将页面过滤出来的元素的xpath进行元素查找，并且返回元素的xpath和内容
foundElements = findElements(resultElement);
// console.log(foundElements);
// 返回表格需要的格式
transformedData = foundElements.map((group, index) => {
let transformedGroup = {};
group.elements.forEach((element, elemIndex) => {
transformedGroup[`content${elemIndex}`] = {
Xpath: element.xpath,
content: element.content,
otherName: "请填写标题"
};
});
transformedGroup["_X_ROW_KEY"] = `row_${index + 0}`; // 假设起始索引为8
return transformedGroup;
});
return transformedData;
} else {
return null
}
}
export { cell, checkTableFromXpaths }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment