puppeteer semantic-ui-react 下拉菜单如何 select 选项

Question

    <div role="listbox" aria-disabled="false" aria-expanded="false" class="ui selection dropdown content--content-type:-selector" tabindex="0" style="width: 100%;"><div class="default text" role="alert" aria-live="polite" aria-atomic="true">Select type</div><i aria-hidden="true" class="dropdown icon"></i><div class="menu transition"><div role="option" aria-checked="false" aria-selected="true" class="selected item" style=`enter code here`"pointer-events: all;"><span class="text">Single</span></div><div role="option" aria-checked="false" aria-selected="false" class="item" style="pointer-events: all;"><span class="text">Multi</span></div><div role="option" aria-checked="false" aria-selected="false" class="item" style="pointer-events: all;"></div></div></div>

木偶戏初学者。我正在寻找 select 下拉选项。

Answer 1

如果下拉元素没有唯一的 selector - 所以你可以抓住它 - 然后你可以使用带有 contains(text(), {string}) 的 XPath，在容器标签内进行搜索，在这个如果是 <span>。在我们抓取该项目后，一个简单的 click 将模拟真实用户 select 元素。

（在最后三行中，我进行了验证，只是为了查看我们是否已成功 select 编辑了下拉选项。）

让我们看看 "Single" 选项的情况：

  const optionSingle = await page.$x('//span[contains(text(), "Single")]')
  await optionSingle[0].click()

  // if we did everything correctly the `'.selected, .item'` classes will be applied on the selected item
  const selectedItemInnerText = await page.evaluate(el => el.innerText, (await page.$$('.selected, .item'))[0])
  selectedItemInnerText === 'Single' ? console.log('We\'ve succesfully selected the item :)') : console.log('Something went wrong :(')

注意：您可能需要先在列表框内单击。显然，我没有看到您的示例的 CSS，因此我无法判断此特定情况是否需要它，或者选项可以在没有它的情况下 selected。

建议： 在 Chrome DevTools 中测试 XPath（或 select 或），如下所示：$x('//span[contains(text(), "Single")]')[0].click()。如果它确实 select 所需的选项：它也将在 puppeteer 中工作。

puppeteer semantic-ui-react 下拉菜单如何 select 选项

puppeteer semantic-ui-react dropdown how to select options

semantic-ui

semantic-ui-react

puppeteer