开发一个综合性、交互式的UI工具，结合了DOM操作和用户交互，并利用CodeceptJS框架创建一个定制化的自动化测试工具。如果需要一份需求文档来描述整个逻辑和交互，请参考以下内容：
需求文档：可拖拽的UI工具与偏移标记管理
背景
在自动化测试中，用户需要一个直观的界面来选择和标记DOM元素，同时允许设置偏移量以进行更精确的定位。此工具旨在通过可视化操作简化测试脚本编写流程，结合CodeceptJS提高效率。
功能需求
核心功能
-
UI 初始化与布局
- 在页面上动态生成一个可拖拽的卡片，包含以下元素：
- XPath输入框
- X/Y偏移量输入框
- 当前选中元素显示区域
- 错误提示信息容器
- 确认按钮
- 在页面上动态生成一个可拖拽的卡片，包含以下元素：
-
DOM 元素高亮
- 通过用户输入的XPath定位页面上的一个或多个元素，并显示红色圆点标记每个元素的中心。
- 在标记旁显示序号。
-
元素选中
- 支持用户点击标记点选择目标元素，同时在UI显示选中元素序号。
-
偏移标记管理
- 根据用户输入的X/Y偏移量，计算并在页面上显示一个蓝色圆点标记偏移后的目标位置。
- 支持拖动标记点更新偏移量，并动态显示连接线。
-
实时更新偏移
- 在用户拖拽偏移标记时，实时更新UI中的X/Y偏移量显示，移除多余的偏移标记。
-
错误提示与用户反馈
- 当用户输入无效的XPath或偏移量时，显示相应的错误提示信息。
附加功能
- 支持用户在卡片外点击拖动卡片位置。
- 自动调整标记点、序号以及偏移标记在不同屏幕分辨率下的位置。
- 与CodeceptJS工具集成，允许动态获取Playwright页面实例并实现自动化脚本执行。
技术需求
-
前端交互
- 使用原生JavaScript动态生成UI元素并管理交互逻辑。
- 使用DOM API实时更新页面中的标记点及其样式。
-
测试框架集成
- 与CodeceptJS和Playwright整合，实现页面操作的记录和标记点的定位。
-
样式
- 可拖拽卡片设计需符合响应式设计原则，支持移动和桌面端访问。
交互逻辑
-
卡片交互
- 用户可通过鼠标拖动卡片。
- 输入框支持失去焦点时自动验证内容。
- 确认按钮点击时触发标记生成逻辑。
-
元素标记
- 用户输入XPath，系统自动高亮匹配的DOM元素，显示标记点及其序号。
- 点击标记点时，卡片内更新当前选中元素信息。
-
偏移标记
- 用户输入偏移量后，点击确认按钮，在页面上显示偏移标记。
- 用户可拖动偏移标记实时更新位置，并显示连接线。
-
错误提示
- 输入非法XPath或偏移量，卡片内显示对应提示信息。
约束条件
- 偏移量仅支持整数输入，非法输入需阻止后续操作。
- XPath匹配范围仅限于当前页面中的元素。
- 所有生成的标记点和偏移标记需在操作完成后自动清理。
操作步骤
正常流程
- 用户打开工具，输入XPath并按下回车键，页面显示所有匹配元素的标记。
- 用户点击标记点选择目标元素，卡片更新选中元素信息。
- 用户输入X/Y偏移量，点击确认，页面显示偏移后的标记。
- 用户可以拖动偏移标记调整位置，实时更新偏移量。
异常处理
- 若XPath输入不匹配任何元素，卡片提示“未找到匹配元素”。
- 若偏移量非数字输入，阻止操作并提示“请输入有效的偏移量”。