javascript - 从 Google Chrome 控制台填写 react 表单

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