填写表单字段的更好的脏方法我在对表单进行脏浏览器测试时使用这个方法

Adapted from Here

2023年7月更新，包括选择和复选框

const setFormFields = (formFields) => {
    const inputTypes = [
        window.HTMLInputElement,
        window.HTMLSelectElement, 
        window.HTMLTextAreaElement
    ];

const triggerInputChange = (selector, value) => {
    const node = document.querySelector(selector);
    // only process the change on elements we know have a value setter in their constructor
    if (inputTypes.indexOf(node.__proto__.constructor) > -1) {
        const setValue = Object.getOwnPropertyDescriptor(node.__proto__, 'value').set;
        let event = new Event('input', {
            bubbles: true
        });

        if(node.__proto__.constructor === window.HTMLSelectElement){
            event = new Event('change', {
                bubbles: true
            });
        } else if (node.type === 'checkbox') {
            node.checked = value;
            event = new Event('change', {
                bubbles: true
            });
        }
        setValue.call(node, value);
        node.dispatchEvent(event);
    }
    }

    Object.entries(formFields).forEach(([selector, value]) => triggerInputChange(selector, value));
}

// Usage:
setFormFields({
    '.substrate': '20',
    'name="first_name"': 'McFirsty',
    'name="last_name"': 'McLasty',
    'name="accept_terms"': true, // for checkboxes, use true for checked and false for unchecked
    'name="state"': 'VA' // for select boxes, use the value of the option you want to select
});

字符串

处理具体问题

document.querySelector('input').focus();
document.execCommand('insertText', false, 'Some Text For the Input');

型
或者如果你想每次都替换文本

document.querySelector('input').select();
document.execCommand('insertText', false, 'Some Text For the Input');

型
我有一个chrome脚本dev tools -> sources -> scripts，我在对表单进行脏测试时使用

(()=>{
    const fillText = (selector, value) => {
        document.querySelector(selector).select();
        document.execCommand('insertText', false, value);
    }

    const formFields = [
        ['[data-ref-name="company"]', 'My Company'],
        ['[data-ref-name="first_name"]', 'Styks']
    ]

    formFields.forEach(field => fillText(field[0], field[1]));
}
)()

型