React 谷歌浏览器自动化脚本求助,大佬们过来康康

2022-11-10 13:47:25 +08:00
 jtwor

情况:
目前遇到一个是 react 做的页面,目标很简单就是对该页面的控件进行赋值,整个控件组最终是 form 提交的,由于需求限制只能使用 chrome console 运行 js 脚本对控件进行赋值,也不可以直接模拟接口提交需要界面交互。

脚本例如:
document.getElementById("xxx").value=123; 这种 text 控件是可以赋值的,没有任何问题

问题:
该页面的下拉框都是 input 控件 type 为 search 而且为 readonly ,用上面简单的赋值没有任何作用,所以只能模拟人为事件的思路进行赋值,但小弟无法用 DOM 操作进行任何模拟点击的操作(即下拉框点击 click 也无效)。

然后经过一轮摸索找到个操作 react 中 DOM 的方法,但这个方法好像只能模拟赋值是保持冒泡事件,但最终还是没有赋值

const triggerInputChange = (selector,value)=>{
        const node = document.querySelector(selector);

        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);
        }
    }
515 次点击
所在节点    问与答
1 条回复
jtwor
2022-11-10 14:10:20 +08:00
有些尴尬发不了图,被检查说带短链了,测试

imgur.com/a/ENwiuzx

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/894120

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX