我一直在尝试编写一个机器人来自动完成网站上的某些表格,方法是将脚本复制+粘贴到 Chrome 控制台中。 (没有违法。)但是,问题是这个网站是用 React 编写的,这意味着他们用于表单的受控组件会干扰简单的 form.value
变化。如果我尝试使用类似于 form.value = answer
的内容填写表格,我仍然需要在表单上进行手动按键才能使其工作,这不适合我的自动化需求。
到目前为止我已经尝试过:
- 填写form.value
然后触发按键/按键/按键。
- 填写form.value
减去一个字母并在之后触发按键,对应于错过的字母。
之后由于某些奇怪的原因,在我手动按键之前,输入键也无法提交。
谁能帮我吗?谢谢!
最佳答案
填写表单字段的更好脏方法
我在对表单进行脏浏览器测试时使用它
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]));
}
)()
关于javascript - 从 Google Chrome 控制台填写 react 表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50035325/