Question

我一直试图通过复制+将脚本粘贴到Chrome控制台来编写机器人来自动填充网站上的某些表单。（没有非法的。）然而，问题是这个网站是用React编写的，这意味着他们用于表单的受控组件会干扰简单的form.value更改。如果我尝试使用类似form.value = answer的内容填写表单，我仍然需要在表单上进行手动按键才能使其正常工作，这不适合我的自动化需求。

到目前为止我尝试了什么：
- 之后填写form.value并点击按键/键盘/键盘 - 填写form.value减去一个字母并随后触发按键，对应于错过的字母。

之后由于一些奇怪的原因，在我进行手动按键操作之前，输入键无法提交。

任何人都可以帮助我吗？谢谢！

Answer 1

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

Adapted from Here

(()=>{
    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
                });
            }
            setValue.call(node, value);
            node.dispatchEvent(event);
        }
    }

    const formFields = [
        ['company', 'Shorts & Company'],
        ['first_name', 'McFirsty'],
        ['last_name', 'McLasty'],
        ['address1', '123 N. In The Woods'],
        ['city', 'Trunkborns'],
        ['state', 'WA'],
        ['zip', '55555']
    ];

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

解决具体问题

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]));
}
)()

从Google Chrome控制台填写反应表单

1 个答案: