操作mat-autocomplete自动完成下拉框选取元素返回空数组如何解决

• 新增元素等待逻辑，避免提前查询未渲染内容
  你输入搜索词、按回车后，Angular需要异步处理数据、渲染下拉选项，此时立刻查询会拿到空结果，需要先等待目标元素渲染完成：

// 等待listbox加载出现
await page.waitForSelector("div[role='listbox']", {timeout: 3000})
// 等待至少一个option渲染完成
await page.waitForSelector("mat-option[role='option']", {timeout: 3000})

• 修正元素查询逻辑
  从你给出的HTML结构来看，<mat-option>节点不属于<div role="listbox">的子节点，所以用listbox.$$查询子元素自然返回空值，直接从页面全局查询option即可：

const opt = await page.$$("mat-option[role='option']")

如果实际页面中mat-option是mat-autocomplete组件的子节点，也可以指定父节点缩小查询范围：

const opt = await page.$$("#mat-autocomplete-1 mat-option[role='option']")

• 修正文本获取API
  Puppeteer/Playwright框架中获取元素文本的API是textContent()，不是原生DOM的innerText()，对应修改即可。

修改后的完整可运行代码 #

await page.click('input[placeholder="search"]')
await page.keyboard.type('e');
await page.keyboard.press('Enter');

// 新增等待逻辑
await page.waitForSelector("div[role='listbox']", {timeout: 3000})
await page.waitForSelector("mat-option[role='option']", {timeout: 3000})

// 直接全局查询option
const opt= await page.$$("mat-option[role='option']");
const allUrls = await Promise.all(opt.map(async (option, i) => {
    return await option.textContent()
}))
console.log(opt);
console.log(allUrls);

内容的提问来源于stack exchange，提问作者genc