js的命令大全有吗？F12调试命令

KiaPol · 发表于 2024-12-26 18:05:18

网页有shadow 用不了填表
只能用js的命令

但是就记得个click（）和Inner
有人能提供下吗
判断网页加载完毕等这样的命令

壮志豪情 · 发表于 2024-12-26 18:05:19

// 等待页面加载完成后执行操作
await waitForPageLoad();
simulateInput('#username', 'test');

// 等待特定元素出现后操作
await waitForElement('#loginButton');
simulateClick('#loginButton');

// 等待多个元素都出现
await waitForElements(['#username', '#password', '#loginButton']);

// 等待页面变化完成后操作
await waitForPageStable();
simulateInput('#searchBox', 'query');

// 等待网络请求完成
await waitForNetworkIdle();
console.log('所有请求已完成');

// 检查元素状态
if (isElementVisible('#submitButton') && isElementInteractive('#submitButton')) {
simulateClick('#submitButton');
}

// 组合使用示例
async function login(username, password) {
await waitForPageLoad();
await waitForElement('#loginForm');

simulateInput('#username', username);
simulateInput('#password', password);

await waitForPageStable();
simulateClick('#loginButton');

await waitForNetworkIdle();
console.log('登录流程完成');
}

[JavaScript] 纯文本查看 复制代码

// 基础输入框操作
function simulateInput(selector, value) {
    const element = document.querySelector(selector);
    if (!element) {
        console.error('元素未找到:', selector);
        return false;
    }

    let reactInstance = null;
    for (const key in element) {
        if (key.startsWith('__reactProps$')) {
            reactInstance = element[key];
            break;
        }
    }

    if (reactInstance && reactInstance.onChange) {
        reactInstance.onChange({
            target: {
                value: value
            }
        });
        return true;
    }

    // 如果不是 React 元素，使用原生方式
    element.value = value;
    element.dispatchEvent(new Event('input', { bubbles: true }));
    element.dispatchEvent(new Event('change', { bubbles: true }));
    return true;
}

// 模拟点击操作
function simulateClick(selector) {
    const element = document.querySelector(selector);
    if (!element) {
        console.error('元素未找到:', selector);
        return false;
    }
    
    element.click();
    return true;
}

// 复选框操作
function simulateCheckbox(selector, checked) {
    const element = document.querySelector(selector);
    if (!element) {
        console.error('元素未找到:', selector);
        return false;
    }

    element.checked = checked;
    element.dispatchEvent(new Event('change', { bubbles: true }));
    return true;
}

// 下拉框选择
function simulateSelect(selector, value) {
    const element = document.querySelector(selector);
    if (!element) {
        console.error('元素未找到:', selector);
        return false;
    }

    element.value = value;
    element.dispatchEvent(new Event('change', { bubbles: true }));
    return true;
}

// 单选框操作
function simulateRadio(name, value) {
    const elements = document.querySelectorAll(`input[name="${name}"]`);
    if (!elements.length) {
        console.error('未找到单选框组:', name);
        return false;
    }

    for (const element of elements) {
        if (element.value === value) {
            element.checked = true;
            element.dispatchEvent(new Event('change', { bubbles: true }));
            return true;
        }
    }
    
    console.error('未找到对应值的单选框:', value);
    return false;
}

// 文本区域操作
function simulateTextarea(selector, value) {
    const element = document.querySelector(selector);
    if (!element) {
        console.error('元素未找到:', selector);
        return false;
    }

    element.value = value;
    element.dispatchEvent(new Event('input', { bubbles: true }));
    element.dispatchEvent(new Event('change', { bubbles: true }));
    return true;
}

// 表单提交
function simulateSubmit(formSelector) {
    const form = document.querySelector(formSelector);
    if (!form) {
        console.error('表单未找到:', formSelector);
        return false;
    }

    form.submit();
    return true;
}

// 清除表单
function clearForm(formSelector) {
    const form = document.querySelector(formSelector);
    if (!form) {
        console.error('表单未找到:', formSelector);
        return false;
    }

    form.reset();
    return true;
}

// 等待页面加载完成
function waitForPageLoad() {
    return new Promise((resolve) => {
        if (document.readyState === 'complete') {
            resolve();
        } else {
            window.addEventListener('load', resolve);
        }
    });
}

// 等待特定元素出现
function waitForElement(selector, timeout = 10000) {
    return new Promise((resolve, reject) => {
        const element = document.querySelector(selector);
        if (element) {
            resolve(element);
            return;
        }

        const observer = new MutationObserver((mutations, obs) => {
            const element = document.querySelector(selector);
            if (element) {
                obs.disconnect();
                resolve(element);
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });

        // 设置超时
        setTimeout(() => {
            observer.disconnect();
            reject(new Error(`等待元素超时: ${selector}`));
        }, timeout);
    });
}

// 等待多个元素都出现
function waitForElements(selectors, timeout = 10000) {
    return Promise.all(selectors.map(selector => waitForElement(selector, timeout)));
}

// 等待页面变化完成（适用于单页应用）
function waitForPageStable(timeout = 1000) {
    return new Promise((resolve) => {
        let timer;
        const observer = new MutationObserver(() => {
            if (timer) clearTimeout(timer);
            timer = setTimeout(() => {
                observer.disconnect();
                resolve();
            }, timeout);
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true,
            attributes: true
        });
    });
}

// 等待网络请求完成
function waitForNetworkIdle(timeout = 1000) {
    return new Promise((resolve) => {
        let timer;
        let pendingRequests = 0;

        const originalFetch = window.fetch;
        const originalXHR = window.XMLHttpRequest.prototype.send;

        window.fetch = async function(...args) {
            pendingRequests++;
            try {
                const response = await originalFetch.apply(this, args);
                return response;
            } finally {
                pendingRequests--;
                checkRequests();
            }
        };

        window.XMLHttpRequest.prototype.send = function(...args) {
            pendingRequests++;
            this.addEventListener('loadend', () => {
                pendingRequests--;
                checkRequests();
            });
            return originalXHR.apply(this, args);
        };

        function checkRequests() {
            if (timer) clearTimeout(timer);
            if (pendingRequests === 0) {
                timer = setTimeout(() => {
                    resolve();
                }, timeout);
            }
        }

        checkRequests();
    });
}

// 检查页面是否处于加载状态
function isPageLoading() {
    return document.readyState !== 'complete';
}

// 检查元素是否可见
function isElementVisible(selector) {
    const element = document.querySelector(selector);
    if (!element) return false;
    
    const style = window.getComputedStyle(element);
    return style.display !== 'none' && 
           style.visibility !== 'hidden' && 
           style.opacity !== '0';
}

// 检查元素是否可交互
function isElementInteractive(selector) {
    const element = document.querySelector(selector);
    if (!element) return false;
    
    return !element.disabled && 
           !element.readonly && 
           isElementVisible(selector);
}

afu45 · 发表于 2024-12-26 19:17:18

https://www.w3cschool.cn/javascript/dict

壮志豪情 · 发表于 2024-12-27 00:32:20

// 填写输入框
simulateInput("#email", "test@example.com");

// 点击按钮
simulateClick("#submit-button");

// 选中复选框
simulateCheckbox("#terms", true);

// 选择下拉框选项
simulateSelect("#country", "CN");

// 选择单选框
simulateRadio("gender", "female");

// 填写文本区域
simulateTextarea("#message", "这是一段测试文本");

// 提交表单
simulateSubmit("#myForm");

// 清除表单
clearForm("#myForm");

[JavaScript] 纯文本查看 复制代码

// 基础输入框操作
function simulateInput(selector, value) {
    const element = document.querySelector(selector);
    if (!element) {
        console.error('元素未找到:', selector);
        return false;
    }

    let reactInstance = null;
    for (const key in element) {
        if (key.startsWith('__reactProps$')) {
            reactInstance = element[key];
            break;
        }
    }

    if (reactInstance && reactInstance.onChange) {
        reactInstance.onChange({
            target: {
                value: value
            }
        });
        return true;
    }

    // 如果不是 React 元素，使用原生方式
    element.value = value;
    element.dispatchEvent(new Event('input', { bubbles: true }));
    element.dispatchEvent(new Event('change', { bubbles: true }));
    return true;
}

// 模拟点击操作
function simulateClick(selector) {
    const element = document.querySelector(selector);
    if (!element) {
        console.error('元素未找到:', selector);
        return false;
    }
    
    element.click();
    return true;
}

// 复选框操作
function simulateCheckbox(selector, checked) {
    const element = document.querySelector(selector);
    if (!element) {
        console.error('元素未找到:', selector);
        return false;
    }

    element.checked = checked;
    element.dispatchEvent(new Event('change', { bubbles: true }));
    return true;
}

// 下拉框选择
function simulateSelect(selector, value) {
    const element = document.querySelector(selector);
    if (!element) {
        console.error('元素未找到:', selector);
        return false;
    }

    element.value = value;
    element.dispatchEvent(new Event('change', { bubbles: true }));
    return true;
}

// 单选框操作
function simulateRadio(name, value) {
    const elements = document.querySelectorAll(`input[name="${name}"]`);
    if (!elements.length) {
        console.error('未找到单选框组:', name);
        return false;
    }

    for (const element of elements) {
        if (element.value === value) {
            element.checked = true;
            element.dispatchEvent(new Event('change', { bubbles: true }));
            return true;
        }
    }
    
    console.error('未找到对应值的单选框:', value);
    return false;
}

// 文本区域操作
function simulateTextarea(selector, value) {
    const element = document.querySelector(selector);
    if (!element) {
        console.error('元素未找到:', selector);
        return false;
    }

    element.value = value;
    element.dispatchEvent(new Event('input', { bubbles: true }));
    element.dispatchEvent(new Event('change', { bubbles: true }));
    return true;
}

// 表单提交
function simulateSubmit(formSelector) {
    const form = document.querySelector(formSelector);
    if (!form) {
        console.error('表单未找到:', formSelector);
        return false;
    }

    form.submit();
    return true;
}

// 清除表单
function clearForm(formSelector) {
    const form = document.querySelector(formSelector);
    if (!form) {
        console.error('表单未找到:', formSelector);
        return false;
    }

    form.reset();
    return true;
}

		自动登录	找回密码
密码			注册

[完成] js的命令大全有吗？F12调试命令

最佳答案

评分