前端UI组件【免费下载链接】ckeditor4The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.项目地址https://gitcode.com/gh_mirrors/ck/ckeditor4点击查看免费下载导读本文围绕 CKEditor 4 仓库中tests/plugins/tableselection/manual/irregular.md这一 Bender 手动回归测试展开讲解 Table Selection表格视觉化选择插件在面对每行单元格数量不等的不规则表格时如何正确完成全选单元格操作。读完本文你将理解 Bender 手动测试的标签语法与执行方式掌握getCellsBetween如何借助表格映射table map在不规则行结构中安全遍历单元格并看到同一场景对应的自动化测试证据。一、测试文档本体解读关联文档位于 tests/plugins/tableselection/manual/irregular.md全文是一个标准的 Bender 手动测试脚本bender-tags: bug, trac16755, 4.7.0, tp2078 bender-ui: collapsed bender-ckeditor-plugins: wysiwygarea, toolbar, tableselection, elementspath Have fun with visual table selection! # Procedure 1. Open console. 1. Select all cells. ## Expected Result Cells are selected. ## Unexpected Result Error is thrown into console.1.1 标签bender-tags的含义bug表明这是一个缺陷回归测试用于验证某个已修复 bug 不再复发trac16755关联 CKEditor 官方 Trac 系统中的问题编号 16755Table Selection 功能系列缺陷4.7.0该功能视觉化表格选择在 4.7.0 版本引入测试针对这一特性基线tp2078对应的测试计划编号。类似的trac16755标签在整个手动测试目录中大量出现如 mouse.md、tableselection.md说明这一批手动测试都服务于同一个功能特性集的回归验证。1.2 测试步骤与预期测试要求打开控制台Open console——用于捕获可能抛出的 JavaScript 异常全选所有单元格Select all cells。预期结果所有单元格被正确选中即出现视觉化高亮选区非预期结果控制台抛出错误。也就是说本测试专门验证当表格每行单元格数量不一致时全选操作不应触发任何运行时异常。这类表格在CKEDITOR的表格映射table map中会形成参差不齐的二维结构是表格选区算法最容易出边界问题的地方。1.3 配套 HTML 中的不规则表格测试的实际载体是配套文件 irregular.html其中内置了典型的不规则表格table border1 tr tdCell 1.1/td tdCell 1.2/td tdCell 1.3/td tdCell 1.4/td /tr tr tdCell 2.1/td tdCell 2.2/td tdCell 2.3/td /tr tr tdCell 3.1/td tdCell 3.2/td /tr tr tdCell 4.1/td tdCell 4.2/td tdCell 4.3/td tdCell 4.4/td /tr /table四行单元格数分别为4、3、2、4且不使用colspan/rowspan来补齐属于最直接的不规则行结构。HTML 中还包含两个环境守卫if ( bender.tools.env.mobile ) { bender.ignore(); } bender.tools.ignoreUnsupportedEnvironment( tableselection ); CKEDITOR.replace( editor1 );移动端环境直接ignore跳过ignoreUnsupportedEnvironment( tableselection )会检查插件对环境的最低要求——从 plugins/tableselection/plugin.js 的isSupportedEnvironment看该插件明确不支持 IE 11 以下的浏览器!( CKEDITOR.env.ie CKEDITOR.env.version 11 )不满足条件时测试会被自动跳过编辑器通过CKEDITOR.replace( editor1 )以经典classic/iframe模式初始化加载插件清单为wysiwygarea, toolbar, tableselection, elementspath。二、视觉化表格选择Visual Table Selection机制要理解本测试为何存在需要先了解 Table Selection 插件的核心机制。CKEditor 4 的原生 DOM 选区难以直接表达多个单元格同时选中的状态除 Firefox 外大多数浏览器不支持跨单元格的原生选择因此插件采用**伪选区fake selection**方案其代码核心在 plugins/tableselection/plugin.js。2.1 伪选区的实现路径当编辑器内选区变化时selectionCheck事件触发fakeSelectionChangeHandlerplugin.js调用tabletools.getSelectedCells收集选区覆盖的所有td/th该函数实现在 plugins/tabletools/plugin.js通过CKEDITOR.dom.walker遍历 range为每个单元格添加cke_table-faked-selection类在可编辑区域根元素上添加cke_table-faked-selection-editor类并在所在table上写入data-cke-table-faked-selection-table属性。这些类对应的样式定义在 plugins/tableselection/styles/tableselection.css选中单元格显示为深灰色背景.cke_table-faked-selection编辑器获得焦点时变为蓝色背景.cke_editable:focus .cke_table-faked-selection#0076cb同时隐藏真实选区的高亮::selection背景透明并给带选区属性的表格设置cursor: cell。fakeSelectCellsplugin.js则为每个单元格创建一个包裹整个单元格的 range通过selectRanges一次性提交多 range 选区。可见全选所有单元格最终会落到对每个单元格各建一个 range的路径上任何一步的索引越界都可能抛错——这正是不规则表格回归测试的监控对象。三、源码原理getCellsBetween 如何应对不规则行3.1 问题本质行索引与列偏移的错位不规则表格的难点在于原生 DOM 提供的tr.rowIndex和td.cellIndex是基于实际 DOM 顺序的索引而选区语义需要的是首尾单元格之间所有单元格的集合。当每行列数不同或存在 colspan/rowspan时视觉上同一列的单元格在不同行里索引各不相同直接按索引相减会漏选或越界。插件解决此问题的关键函数是getCellsBetween( first, last )plugins/tableselection/plugin.js其算法分四步构建表格映射map CKEDITOR.tools.buildTableMap( firstTable )定位首尾用getRowIndex即getAscendant( tr, true ).$.rowIndex见 plugin.js取行号在map[startRow]、map[endRow]中线性查找首尾单元格的列偏移若起点在终点之后则交换保证正向遍历按矩形遍历双重循环for ( i startRow; i endRow; i )×for ( j start; j end; j )收集map[i][j]对应的单元格标记去重由于 colspan/rowspan 会让同一单元格在 map 中占据多个槽位源码注释明确指出Table maps treat cells with colspan/rowspan as a separate cells因此用selected_cell标记marker保证每个单元格只入列一次最后clearAllMarkers清理。3.2 不规则行为什么安全buildTableMap定义在 plugins/tabletools/plugin.js它把每行展开为数组并对colSpan/rowSpan做槽位填充。当某行实际列数小于起点/终点列偏移时内层for ( j start; j end; j )会因为该行aMap[i].length不足而自然终止不会越界访问while ( aMap[ r ][ c ] )的自增也保证了即使有空洞也会正确跳过。因此对 4/3/2/4 这种阶梯行矩形遍历至多产生空列而不产生异常。另外getCellsBetween还专门处理了两种边界嵌套表格选区从外层表开始、在内层表结束时firstTable.contains( lastTable )会把终点修正为最近的td/thplugin.js跨表限制鼠标拖选时仅在同一表格内生效fakeSelectByMouse中比较getAscendant( table )见 plugin.js防止选区扩散到相邻表格。3.3 键盘与全选路径除鼠标拖选外插件还通过keyboardIntegrationplugin.js接管方向键、Backspace、Delete、Enter 等按键在伪选区下的行为保证删除/回车操作同样基于单元格集合而非单个 range 执行。而全选Ctrl/CmdA 或 selectall 命令的场景由selectall集成测试覆盖见 tests/plugins/tableselection/manual/integrations/selectall/selectall.md——其预期是整页内容被选中即全选必须正确退出表格伪选区而不是停留在表格选区内。四、自动化测试佐证同一场景的双保险手动测试同一场景也被固化为自动化断言。在 tests/plugins/tableselection/getcellsbetween.js 中test getCellsBetween (irregular cells number in rows): function( editor, bot ) { bot.setHtmlWithSelection( CKEDITOR.document.getById( getCellsBetween-irregular ).getValue() ); var inputCells editor.editable().find( td ), cells; cells CKEDITOR.plugins.tableselection.getCellsBetween( inputCells.getItem( inputCells.count() - 1 ), inputCells.getItem( 0 ) ); assert.isArray( cells ); assert.areSame( 13, cells.length ); }配套的 getcellsbetween.html 中getCellsBetween-irregular文本域内的表格与手动测试irregular.html逐字一致同样是 4/3/2/4 结构。该测试刻意采用从最后一个单元格到第一个单元格的反向调用getCellsBetween( last, first )验证了反向起点不会产生负索引或死循环对应源码中 startRow/start 的交换逻辑返回的单元格总数精确等于 134 3 2 4说明矩形遍历在不规则行中既没有漏选也没有把空槽位误算成单元格。由此可以推断手动测试irregular.md的全选所有单元格且控制台无错误在自动化层面由getCellsBetween的矩形遍历 标记去重 越界自然终止机制共同保证。五、如何运行与使用这类手动测试本仓库采用Bender.js测试框架配置见 bender.js、bender.ci.js手动测试与自动化测试共用一个目录体系。运行方式如下安装依赖并启动 Bender 服务项目根目录执行npm install与./node_modules/.bin/bender server在浏览器中打开 Bender 提供的测试页面选择tests/plugins/tableselection/manual/irregular.html对应条目按文档步骤操作打开开发者工具控制台 → 在编辑器中全选表格的所有单元格判定标准所有单元格出现视觉化高亮选区预期结果且控制台无任何异常输出若出现报错即为非预期结果说明回归发生。手动测试的元数据由 Bender 解析bender-ckeditor-plugins决定测试页面加载的插件集bender-tags决定其在测试矩阵中的归类与浏览器过滤bender-ui: collapsed表示测试页面默认折叠展示。六、延伸不规则表格相关的兄弟测试tests/plugins/tableselection/manual/目录下围绕同一功能特性均标注trac16755还有一系列可交叉参考的手动测试mouse.md验证从单元格间隙开始拖选、右键弹出合并菜单等鼠标交互tableselection.md功能总览包含单格点击不激活视觉选区新选区取代旧选区视觉选区不产生撤销步骤等检查点nestedtable.md 与 nestedtablescroll.md嵌套表格场景keystrokes.md键盘方向键、删除键与伪选区的协作selectall 集成测试全选与表格选区的互斥关系。将这些测试与本文的irregular.md合读可以拼出 Table Selection 插件完整的回归测试矩阵鼠标、键盘、嵌套结构、不规则结构、集成插件五大维度。总结irregular.md是一份短小但指向明确的手动回归测试它用 4/3/2/4 的阶梯行表格验证全选所有单元格不抛错。其背后是getCellsBetweenbuildTableMap的矩形遍历算法对不规则行的健壮处理而 getcellsbetween.js 中的自动化断言13 个单元格、反向调用与手动测试互为印证。理解这一场景有助于在集成或二次开发 Table Selection 功能时针对非规整表格数据提前设计防御性校验。赞分享前端UI组件【免费下载链接】ckeditor4The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.项目地址https://gitcode.com/gh_mirrors/ck/ckeditor4点击查看免费下载相关推荐CKEditor 4 Table Selection 可视化选区 vs 原生选区跨表格结束选择的回归测试深度解析CKEditor 4 Table Selection 可视化选区 vs 原生选区跨表格结束选择的回归测试深度解析 CKEditor 4 的 tablesele前端UI组件CKEditor 4 Table Selection 手动测试指南带 caption 表格的单元格选择验证CKEditor 4 Table Selection 手动测试指南带 caption 表格的单元格选择验证 导读 本文以 CKEditor 4 官方手动测试用前端UI组件CKEditor 4 Table Selection 与 Basic Styles 集成原生选区样式化回归测试剖析CKEditor 4 Table Selection 与 Basic Styles 集成原生选区样式化回归测试剖析 本文围绕 CKEditor 4 仓库中 t前端UI组件上一篇ComfyUI ControlNet Aux 中的 Scribble PiDiNet 预处理器实现分析下一篇Starward项目中的绝区零语音资源包解压问题分析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考