时间戳

首页 > 解决方案 > 如何让 Puppeteer 从 antd Select（非本地选择元素）中选择项目？

javascript - 如何让 Puppeteer 从 antd Select（非本地选择元素）中选择项目？

问题描述

我试图让 puppeteer 与 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 Select 与 puppeteer 一起工作吗？

谢谢 ：）

杰斯

标签： javascriptselectdropdownpuppeteerantd

解决方案

我们现在可以使用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')

推荐阅读