如何利用油猴脚本点击react中dropdown的元素

miaoxu

类似于这种的ant selector（https://ant-design.gitee.io/components/select-cn/），想选中其中的任意一项，但是元素定位不到（flex布局），选择selector，然后click也不生效，想要问问大佬们有啥好的办法吗？
试过类似于https://stackoverflow.com/questions/72525568/tampermonkey-automation-of-selecting-option-in-a-menu的方法，但是是针对input类型的，select类型的不太适用

cxxjackie

1. const elmGetter = new ElementGetter();
   
2. async function selectItem(inputId, title) {
   
3.     const input = await elmGetter.get('#' + inputId);
   
4.     const select = input.parentNode.parentNode;
   
5.     const mousedown = new Event('mousedown');
   
6.     select.dispatchEvent(mousedown);
   
7.     const prop = Object.keys(input).find(p => p.startsWith('__reactProps'));
   
8.     select[prop].onMouseDown(mousedown);
   
9.     const option = await elmGetter.get(`#${inputId}_list + .rc-virtual-list [title="${title}"]`);
   
10.     option[prop].onClick();
    
11. }
    
12. selectItem('rc_select_1', 'Jack');

复制代码

React事件触发：https://bbs.tampermonkey.net.cn/thread-1250-1-1.html
ElementGetter：https://bbs.tampermonkey.net.cn/thread-2726-1-1.html

steven026

这是假select，实际上是div，找到div点击就行

1. document.querySelector('.ant-select-item-option-content').click()

复制代码

miaoxu

steven026 发表于 2022-10-17 22:45
这是假select，实际上是div，找到div点击就行

我试了，但是没有点击的效果，加了sleep也不行，我想要的其实是点击之后选择其中的指定元素，大佬能帮忙再看看不

steven026

miaoxu 发表于 2022-10-18 10:33

我试了，但是没有点击的效果，加了sleep也不行，我想要的其实是点击之后选择其中的指定元素，大佬能帮忙 ...

直接点的是jack元素

这不是原生的select，不要以select来理解，直接当div理解就行，找到下拉框选项的div，直接点击选项就行

miaoxu

steven026 发表于 2022-10-18 10:36
[md]!(data/attachment/forum/202210/18/103536y70d7ai5ayl722ya.png)
直接点的是jack元素

大佬，我按照你的代码试了之后，还是没有啥变化，document.querySelector(".ant-select-selection-item").click()，页面原来是lucky还是lucky没有变成jack，就很奇怪，是我理解的有问题吗

miaoxu

cxxjackie 发表于 2022-10-18 13:04
React事件触发：https://bbs.tampermonkey.net.cn/thread-1250-1-1.html
ElementGetter：https://bbs.tamp ...

感谢大佬，因为用的是单位的网站，不方便截图，所以拿ant design的作为demo，我刚刚试了一下，能够点击，但是选中指定的还是有点问题。可能是我赋值不对。我在试试。

cxxjackie

miaoxu 发表于 2022-10-18 15:16
感谢大佬，因为用的是单位的网站，不方便截图，所以拿ant design的作为demo，我刚刚试了一下，能够点击， ...

也有可能事件类型不一样，不一定是click，还有可能需要传参，这个页面不需要我就省略了，你可以打印一下option[prop]看看。

miaoxu

cxxjackie 发表于 2022-10-18 13:04

React事件触发：https://bbs.tampermonkey.net.cn/thread-1250-1-1.html
ElementGetter：https://bbs.tamp ...

大佬，分析页面元素有没有教程啊，我看了代码发现只针对我给的页面，用在实际项目就很难定位了。想问下，然后再重新挑战自己项目的定位。

一迁移就不会了，能说下怎么定位那个选项的元素吗，我在页面上选不到，也就不能用浏览器直接查找元素位置，把html保存下来之后，如上图所示，直接蒙圈了。他里面的不是div而是span，不知道该如何定位，

<div class="ant-select-tree-treenode" aria-hidden="true" style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;">
    <div class="ant-select-tree-indent">
        <div class="ant-select-tree-indent-unit"></div>
    </div>
</div>
<div class="ant-select-tree-list" style="position: relative;">
    <div class="ant-select-tree-list-holder" style="max-height: 256px; overflow-y: hidden; overflow-anchor: none;">
        <div>
            <div class="ant-select-tree-list-holder-inner" style="display: flex; flex-direction: column;">
                <div class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open" draggable="false" aria-grabbed="false">
                    <span aria-hidden="true" class="ant-select-tree-indent"></span>
                    <span class="ant-select-tree-switcher ant-select-tree-switcher-noop"></span>
                    <span title="2022年项目——总院生产单元" class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-normal">
                        <span class="ant-select-tree-title">2022年项目——总院生产单元</span>
                    </span>
                </div>
                <div class="ant-select-tree-treenode ant-select-tree-treenode-disabled ant-select-tree-treenode-switcher-open" draggable="false" aria-grabbed="false">
                    <span aria-hidden="true" class="ant-select-tree-indent"></span>
                    <span class="ant-select-tree-switcher ant-select-tree-switcher_open">
                        <span role="img" aria-label="caret-down" class="anticon anticon-caret-down ant-select-tree-switcher-icon">
                            <svg viewBox="0 0 1024 1024" focusable="false" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                                <path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path>
                            </svg>
                        </span>
                    </span>
                    <span title="2022年项目——总院生产单元" class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-open">
                        <span class="ant-select-tree-title">2022年项目——总院生产单元</span>
                    </span>
                </div>
                <div class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last" draggable="false" aria-grabbed="false">
                    <span aria-hidden="true" class="ant-select-tree-indent">
                        <span class="ant-select-tree-indent-unit"></span>
                    </span>
                    <span class="ant-select-tree-switcher ant-select-tree-switcher-noop"></span>
                    <span title="2022年项目一期" class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-normal">
                        <span class="ant-select-tree-title">2022年项目一期</span>
                    </span>
                </div>
                <div class="ant-select-tree-treenode ant-select-tree-treenode-disabled ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last" draggable="false" aria-grabbed="false">
                    <span aria-hidden="true" class="ant-select-tree-indent"></span>
                    <span class="ant-select-tree-switcher ant-select-tree-switcher_open">
                        <span role="img" aria-label="caret-down" class="anticon anticon-caret-down ant-select-tree-switcher-icon">
                            <svg viewBox="0 0 1024 1024" focusable="false" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                                <path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path>
                            </svg>
                        </span>
                    </span>
                    <span title="2022年项目——总院生产单元" class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-open">
                        <span class="ant-select-tree-title">2022年项目——总院生产单元</span>
                    </span>
                </div>
                <div class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last" draggable="false" aria-grabbed="false">
                    <span aria-hidden="true" class="ant-select-tree-indent">
                        <span class="ant-select-tree-indent-unit ant-select-tree-indent-unit-end"></span>
                    </span>
                    <span class="ant-select-tree-switcher ant-select-tree-switcher-noop"></span>
                    <span title="2022年项目二期" class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-normal">
                        <span class="ant-select-tree-title">2022年项目二期</span>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="ant-select-tree-list-scrollbar ant-select-tree-list-scrollbar-show" style="width: 8px; top: 0px; bottom: 0px; right: 0px; position: absolute; display: none;">
        <div class="ant-select-tree-list-scrollbar-thumb" style="width: 100%; height: 128px; top: 0px; left: 0px; position: absolute; background: rgba(0, 0, 0, 0.5); border-radius: 99px; cursor: pointer; user-select: none;"></div>
    </div>
</div>
</div>

李恒道

miaoxu 发表于 2022-10-18 21:10
[md]```
大佬，分析页面元素有没有教程啊，我看了代码发现只针对我给的页面，用在实际项目就很难定位了。 ...

可以参考
React事件触发：https://bbs.tampermonkey.net.cn/thread-1250-1-1.html
那个文章
先尝试用插件确定出来数据的位置
然后再根据数组确定元素操控数据就好了