【codeceptjs Ui自动化】可拖拽的UI工具与偏移标记管理

开发一个综合性、交互式的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输入不匹配任何元素，卡片提示“未找到匹配元素”。
若偏移量非数字输入，阻止操作并提示“请输入有效的偏移量”。

// UserScript
// @name Interactive Tool for Web Pages
// @namespace http://tampermonkey.net/
// @version 0.91
// @description Adds an interactive tool to web pages for testing and automation purposes.
// @author You
// @match 😕//*
// @grant none
// /UserScript

(function() {
‘use strict’;

// 等待页面加载完成
async function setupCustomHelper() {
    await waitForLoadState('networkidle');

    // 执行注入页面脚本的逻辑
    await injectPageScript();

    // 等待页面加载完成，以防注入脚本导致页面导航
    await waitForLoadState('networkidle');

    // 暴露辅助函数给浏览器端
}

async function waitForLoadState(state) {
    return new Promise(resolve => {
        if (document.readyState === state || document.readyState === 'complete') {
            resolve();
        } else {
            document.addEventListener('readystatechange', () => {
                if (document.readyState === state || document.readyState === 'complete') {
                    resolve();
                }
            });
        }
    });
}

async function injectPageScript() {
    await evaluate(() => {
        // 创建主卡片容器
        const card = document.createElement('div');
        card.id = 'draggableCard';
        card.style.position = 'fixed';
        card.style.top = '20px';
        card.style.right = '20px';
        card.style.width = '320px';
        card.style.height = '480px';
        card.style.background = 'linear-gradient(135deg, #74ebd5, #acb6e5)';
        card.style.border = '1px solid #e0e0e0';
        card.style.borderRadius = '12px';
        card.style.boxShadow = '0 8px 16px rgba(0, 0, 0, 0.2)';
        card.style.zIndex = '1000';
        card.style.padding = '16px';
        card.style.fontFamily = "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif";
        card.style.color = '#333';
        card.style.overflowY = 'auto';

        // 添加标题
        const cardTitle = document.createElement('h3');
        cardTitle.textContent = 'Interactive Tool';
        cardTitle.style.textAlign = 'center';
        cardTitle.style.marginBottom = '16px';
        cardTitle.style.fontSize = '18px';
        cardTitle.style.color = '#333';
        cardTitle.style.textShadow = '1px 1px 4px rgba(0, 0, 0, 0.1)';
        card.appendChild(cardTitle);

        // 添加触发按钮
        const createStyledButton = (id, text, color, hoverColor) => {
            const button = document.createElement('button');
            button.id = id;
            button.textC