JavaScript/jQuery实现DOM定时自动点击及循环执行问题求助

明确需求时序 #

需要实现的页面自动操作流程严格按照以下间隔执行，完成后自动循环：

• 初始触发：点击<button class="loginbutton">LOGUJ</button>按钮
• 等待5秒：点击type为submit、value为LOGUJ的登录提交按钮
• 等待5秒：点击class为closeCover new popup的弹窗关闭元素
• 等待5秒：点击id为tutorial_item_16、class为element crimes active的功能入口
• 等待5秒：校验class为value的元素文本是否为79/79，校验通过则点击class包含formSubmit doCrime myButton success的操作按钮
• 等待30秒：重新从第一步开始执行整套流程

原有代码问题点 #

• 选择器匹配错误：大量使用不稳定的绝对路径XPath，误选了wars类、tutorial_item_14、登出按钮等和需求无关的元素
• 缺少容错和校验逻辑：直接对查询结果调用click方法，元素不存在时会抛出JS错误中断流程，也没有实现要求的79/79文本校验步骤
• 无循环逻辑：所有定时任务仅执行一次，没有实现流程跑完后30秒重启的要求
• 时序不符合要求：各步骤等待间隔和需求规定的5秒间隔不一致

可直接运行的修复版代码 #

代码使用原生JS实现，无需引入jQuery，自带元素存在判断、错误捕获，不会因为单步异常中断循环：

// 封装等待方法
const sleep = (waitTime) => new Promise(resolve => setTimeout(resolve, waitTime));

// 安全点击方法：元素存在才触发点击，避免null报错
const safeClick = (selector, isGetElementById = false) => {
    try {
        const el = isGetElementById ? document.getElementById(selector) : document.querySelector(selector);
        if (el) {
            el.click();
            console.log(`[自动操作] 已点击元素：${selector}`);
            return true;
        }
        console.warn(`[自动操作] 未找到元素：${selector}`);
        return false;
    } catch (err) {
        console.error(`[自动操作] 点击元素${selector}出错：`, err);
        return false;
    }
};

// 主流程
const runAutoProcess = async () => {
    try {
        // 第一步：点击button标签的登录按钮
        safeClick('button.loginbutton');

        await sleep(5000);
        // 第二步：点击submit类型的登录提交按钮
        safeClick('input.loginbutton[type="submit"][value="LOGUJ"]');

        await sleep(5000);
        // 第三步：关闭弹窗
        safeClick('div.closeCover.new.popup');

        await sleep(5000);
        // 第四步：点击crimes入口
        safeClick('tutorial_item_16', true);

        await sleep(5000);
        // 第五步：校验数值后点击操作按钮
        const valueEl = document.querySelector('div.value');
        if (valueEl && valueEl.textContent.trim() === '79/79') {
            console.log('[自动操作] 数值校验通过：79/79');
            safeClick('div.formSubmit.doCrime.myButton.success');
        } else {
            console.warn('[自动操作] 数值校验不通过，跳过本次点击');
        }

        // 等待30秒后循环
        console.log('[自动操作] 本轮流程执行完成，30秒后重启');
        await sleep(30000);
        runAutoProcess();
    } catch (err) {
        console.error('[自动操作] 流程执行异常，30秒后重试：', err);
        await sleep(30000);
        runAutoProcess();
    }
};

// 页面加载完成后启动流程
if (document.readyState === 'complete') {
    runAutoProcess();
} else {
    window.addEventListener('load', runAutoProcess);
}

使用说明 #

• 直接打开浏览器开发者工具控制台，粘贴代码回车即可运行
• 如果需要停止脚本，刷新页面即可终止所有定时任务
• 代码自带错误重试逻辑，单步找不到元素、点击报错都不会中断后续循环

内容的提问来源于stack exchange，提问作者RyderLSK87