浏览器控制台JavaScript：自动化悬停触发与动态元素点击

<ul id="list">
   <li>item 1</li>
   <li>item 2</li>
   <li>item 3</li>
</ul>

$("#list li").hover(
    function() {
        // 鼠标悬停时添加按钮
        $(this).append('<button id="but1" onclick="button1()">Button1</button>' +
            '<button id="but2" onclick="button2()">Button2</button>');
    },
    function() {
        // 鼠标移出时移除按钮
        $('#but1').remove();
        $('#but2').remove();
    }
);

// 按钮点击事件处理函数
function button1(){ console.log("Button1 clicked!"); }
function button2(){ console.log("Button2 clicked!"); }

/**
 * 自动化悬停并点击动态按钮的函数
 * 此函数应在浏览器控制台中运行，并确保页面已加载jQuery。
 */
async function autoHoverAndClick() {
    // 1. 获取所有列表项
    // 使用Array.from将jQuery对象转换为原生数组，以便进行for...of遍历
    const listItems = Array.from($("#list li"));

    // 2. 遍历每个列表项并执行自动化操作
    for (const item of listItems) {
        // 使用Promise确保每个列表项的操作是顺序执行的
        await new Promise(resolve => {
            // 3. 模拟鼠标悬停事件 (mouseover)
            // { bubbles: true } 确保事件能够冒泡，更真实地模拟用户行为
            item.dispatchEvent(new Event('mouseover', { bubbles: true }));
            console.log(`正在处理列表项: ${$(item).text()}`);

            // 4. 尝试点击动态生成的按钮
            // 注意：按钮可能不会立即出现在DOM中，实际应用中可能需要短暂延时或循环检查
            const but1 = $('#but1');
            const but2 = $('#but2');

            if (but1.length) { // 检查按钮是否存在
                but1.click();
                console.log(`  - Button1 已点击.`);
            } else {
                console.warn(`  - 警告: Button1 未立即找到.`);
            }

            if (but2.length) { // 检查按钮是否存在
                but2.click();
                console.log(`  - Button2 已点击.`);
            } else {
                console.warn(`  - 警告: Button2 未立即找到.`);
            }

            console.log("------------------");

            // 5. 引入延时，模拟用户停留时间，然后模拟鼠标移出事件 (mouseout)
            // 1500毫秒 (1.5秒) 的延时可以根据实际需求调整
            setTimeout(() => {
                item.dispatchEvent(new Event('mouseout', { bubbles: true }));
                console.log(`列表项: ${$(item).text()} 处理完毕，鼠标移出。`);
                resolve(); // 解决Promise，允许下一个列表项的操作开始
            }, 1500);
        });
    }
    console.log("所有列表项处理完毕！自动化流程结束。");
}

// 在浏览器控制台中执行自动化函数
// autoHoverAndClick();

// 确保页面加载了jQuery，通常在浏览器控制台可以直接使用
// 如果目标页面没有jQuery，您可能需要手动注入，例如：
// var script = document.createElement('script');
// script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.x.x/jquery.min.js';
// document.head.appendChild(script);

// 原始的悬停逻辑 (如果目标页面已经有此逻辑，则无需重复粘贴)
$("#list li").hover(
    function() {
        $(this).append('<button id="but1" onclick="button1()">Button1</button>' +
            '<button id="but2" onclick="button2()">Button2</button>');
    },
    function() {
        $('#but1').remove();
        $('#but2').remove();
    }
);

// 按钮点击事件处理函数 (如果目标页面已经有此逻辑，则无需重复粘贴)
function button1(){ console.log("Button1 clicked!"); }
function button2(){ console.log("Button2 clicked!"); }

/**
 * 自动化悬停并点击动态按钮的函数
 * @returns {Promise<void>}
 */
async function autoHoverAndClick() {
    const listItems = Array.from($("#list li"));

    for (const item of listItems) {
        await new Promise(resolve => {
            // 模拟鼠标悬停事件
            item.dispatchEvent(new Event('mouseover', { bubbles: true }));
            console.log(`正在处理列表项: ${$(item).text()}`);

            // 尝试点击动态生成的按钮
            const but1 = $('#but1');
            const but2 = $('#but2');

            if (but1.length) {
                but1.click();
                console.log(`  - Button1 已点击.`);
            } else {
                console.warn(`  - 警告: Button1 未立即找到.`);
            }

            if (but2.length) {
                but2.click();
                console.log(`  - Button2 已点击.`);
            } else {
                console.warn(`  - 警告: Button2 未立即找到.`);
            }

            console.log("------------------");

            // 延时后模拟鼠标移出事件
            setTimeout(() => {
                item.dispatchEvent(new Event('mouseout', { bubbles: true }));
                console.log(`列表项: ${$(item).text()} 处理完毕，鼠标移出。`);
                resolve();
            }, 1500); // 1.5秒延时
        });
    }
    console.log("所有列表项处理完毕！自动化流程结束。");
}

// 调用函数开始自动化流程
autoHoverAndClick();