Question

我正试图让木偶操作者使用antd Select，但无法弄明白。 Puppeteer会因为无法找到选择器而保持计时。

<Select
    id="select-whale-type-dropdown"
    showSearch
    placeholder="Choose one..."
    notFoundContent="Whale Type not found"
>
<Select.Option value="Blue Whale" key="Blue Whale">
    Blue Whale
</Select.Option>
<Select.Option value="Humpback Whale" key="Humpback Whale">
    Humpback Whale
</Select.Option>
<Select.Option value="Pilot Whale" key="Pilot Whale">
    Pilot Whale
</Select.Option>

错误讯息：

1) Frontend crawl test
   Whale crawl
     Selects Humpback Whale as Whale Type:
 Error: waiting for selector "#select-whale-type-dropdown" failed: timeout 30000ms exceeded
  at Timeout.WaitTask._timeoutTimer.setTimeout (node_modules/puppeteer/lib/FrameManager.js:845:60)

当我们仍在使用react-bootstrap的下拉列表时，它工作正常，似乎antd不使用本机select元素。知道如何获得antd选择与puppeteer合作吗？

谢谢：）

尔杰斯

Answer 1

我们现在可以使用aria-controls属性。

<div class="ant-select-selection
        ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="dc58f58e-d287-4a0b-a9aa-d5ce3435102a" aria-expanded="false" data-__meta="[object Object]" data-__field="[object Object]" tabindex="0">

然后

document.querySelectorAll('#dc58f58e-d287-4a0b-a9aa-d5ce3435102a')

Answer 2

您是对的，未使用本机<select>元素。 AntD <Select>拥有的功能远远超出它的支持范围。

所以你需要看看AntD实际呈现的内容，并指示Puppeteer寻找代码。输入字段部分如下所示：

<div class="ant-select ant-select-enabled">
    <div class="ant-select-selection
            ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true"
         aria-expanded="false" tabindex="0">
        <div class="ant-select-selection__rendered">
            <div unselectable="unselectable" class="ant-select-selection__placeholder"
                 style="display: block; user-select: none;">Choose one...
            </div>
            <div class="ant-select-search ant-select-search--inline" style="display: none;">
                <div class="ant-select-search__field__wrap">
                    <input id="select-whale-type-dropdown" autocomplete="off"
                           class="ant-select-search__field" value="">
                    <span class="ant-select-search__field__mirror">&nbsp;</span>
                </div>
            </div>
        </div>
        <span class="ant-select-arrow" unselectable="unselectable" style="user-select: none;"><b></b></span></div>
</div>

然后下拉列表呈现为页面顶部的绝对定位div，如下所示：

<div style="position: absolute; top: 0px; left: 0px; width: 100%;">
    <div>
        <div class="ant-select-dropdown ant-select-dropdown--single ant-select-dropdown-placement-bottomLeft  ant-select-dropdown-hidden"
             style="width: 400px; left: 198.5px; top: 1196.08px;">
            <div style="overflow: auto;">
                <ul class="ant-select-dropdown-menu  ant-select-dropdown-menu-root ant-select-dropdown-menu-vertical"
                    role="menu" aria-activedescendant="" tabindex="0">
                    <li unselectable="unselectable" class="ant-select-dropdown-menu-item" role="menuitem"
                        aria-selected="false" style="user-select: none;">Blue Whale
                    </li>
                    <li unselectable="unselectable" class="ant-select-dropdown-menu-item" role="menuitem"
                        aria-selected="false" style="user-select: none;">Humpback Whale
                    </li>
                    <li unselectable="unselectable" class="ant-select-dropdown-menu-item" role="menuitem"
                        aria-selected="false" style="user-select: none;">Pilot Whale
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

因此Puppeteer应该查找input#select-whale-type-dropdown字段，单击它然后查找ul＆gt; li菜单项标记。如果页面上有多个<Select>，请使用dropdownClassName属性为绝对定位的div分配不同的类名，以使它们可单独寻址。

如何让Puppeteer从antd中选择项目选择（非原生选择元素）？

2 个答案: