从自动完成下拉列表中选择答案

【问题标题】：select from autocomplete dropdown从自动完成下拉列表中选择
【发布时间】：2021-11-05 03:37:35
【问题描述】：

我有下面的 HTML 并试图从列表中选择，但它返回空数组。我该怎么办？？？

<div id="cdk-overlay-1" class="cdk-overlay-pane"> </div>
     <div role="listbox" class="mat-autocomplete-panel" id="mat-autocomplete-1"> </div>
<mat-option role="option" class="mat-option mat-focus-indicator ng-star-inserted" id="mat-option-35">
  </mat-option>
  <mat-option role="option" class="mat-option mat-focus-indicator ng-star-inserted" id="mat-option-36"> </mat-option>
  <mat-option role="option" class="mat-option mat-focus-indicator ng-star-inserted" id="mat-option-37"> </mat-option>
  <mat-option role="option" class="mat-option mat-focus-indicator ng-star-inserted" id="mat-option-38"> </mat-option>
  <mat-option role="option" class="mat-option mat-focus-indicator ng-star-inserted" id="mat-option-39"> </mat-option>

await page.click('input[placeholder="search"]')
await page.keyboard.type('e');
await page.keyboard.press('Enter');
  
const listbox = await page.$("div[role='listbox']")
const opt= await listbox?.$$("mat-option[role='option']");
        const allUrls = await Promise.all(opt?.map(async (option, i) => {
            return await option.innerText()
        }))
        console.log(opt);

【问题讨论】：

await 是怎么回事？为什么你必须把它放在任何地方？这些操作应该是同步的，毫无疑问它不会起作用...opt 返回的是什么？如果它是一个正确的元素列表，并且 if option.innerText() 返回正确的数据（我对此表示怀疑），那么摆脱所有等待/异步！

标签： javascript typescript playwright

【解决方案1】：

你想得到innerText吗？然后这样的事情会起作用：

// @ts-check
const playwright = require('playwright');

(async () => {
  const browser = await playwright.chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('http://whatsmyuseragent.org/');
  await page.setContent(`
<div id="cdk-overlay-1" class="cdk-overlay-pane"> </div>
<div role="listbox" class="mat-autocomplete-panel" id="mat-autocomplete-1"> </div>
<mat-option role="option" class="mat-option mat-focus-indicator ng-star-inserted" id="mat-option-35">1</mat-option>
<mat-option role="option" class="mat-option mat-focus-indicator ng-star-inserted" id="mat-option-36">2</mat-option>
<mat-option role="option" class="mat-option mat-focus-indicator ng-star-inserted" id="mat-option-37">3</mat-option>
<mat-option role="option" class="mat-option mat-focus-indicator ng-star-inserted" id="mat-option-38">4</mat-option>
<mat-option role="option" class="mat-option mat-focus-indicator ng-star-inserted" id="mat-option-39">5</mat-option>
</div> `)
  const options = page.locator("mat-option[role='option']")
  const values = await options.allTextContents()
  console.log(values)
  await browser.close();
})()

参考这里：https://playwright.dev/docs/api/class-locator

【讨论】：

我想在自动完成下拉菜单中选择一个选项。没有选择标签，我无法从列表中选择任何选项。是的 innerText 返回值。
然后看这里：playwright.dev/docs/input#select-options