如何使用Playwright遍历Combobox的所有动态生成选项？

要遍历动态生成的下拉框选项，核心是先触发选项加载、确保元素就绪，再逐个交互处理。以下是两种可靠的实现方案：

方案一：直接遍历DOM元素（适配文本重复场景） #

这种方式通过定位DOM元素索引来选择，避免选项文本重复导致的匹配错误，同时处理DOM元素失效问题：

// 首次打开下拉框，触发动态选项加载
await page.getByRole('button', { name: 'Open' }).first().click();
// 等待至少一个选项可见，确保加载完成
await page.getByRole('option').first().waitFor({ state: 'visible' });

// 获取总选项数
const totalOptions = await page.getByRole('option').count();

for (let i = 0; i < totalOptions; i++) {
  // 非首次选择需重新打开下拉框（选择后下拉框通常会自动收起）
  if (i > 0) {
    await page.getByRole('button', { name: 'Open' }).first().click();
    await page.getByRole('option').nth(i).waitFor({ state: 'visible' });
  }

  // 选择当前索引的选项
  await page.getByRole('option').nth(i).click();

  // 此处添加选项选择后的业务操作，比如等待页面更新、验证结果等
  // 示例：等待页面网络请求完成（替换为你的实际等待逻辑）
  await page.waitForLoadState('networkidle');
}

方案二：通过选项文本遍历（简洁易读） #

如果所有选项文本唯一，可先批量获取文本列表，再根据文本精准选择：

// 打开下拉框并提取所有选项文本
await page.getByRole('button', { name: 'Open' }).first().click();
const optionTexts = await page.getByRole('option').evaluateAll(options => 
  options.map(opt => opt.textContent.trim())
);

// 遍历文本列表，逐个选择对应选项
for (const text of optionTexts) {
  await page.getByRole('button', { name: 'Open' }).first().click();
  await page.getByRole('option', { name: text }).click();

  // 选项选择后的业务操作
  await page.waitForLoadState('networkidle');
}

关键注意点 #

• DOM失效处理：动态下拉框在选择后可能重新渲染选项DOM，直接复用之前获取的元素会触发stale element reference错误，因此每次选择后需重新打开下拉框并定位最新元素。
• 等待逻辑替代：示例中的waitForLoadState是通用等待方式，实际应替换为等待页面特定元素或状态变化的代码，比如await page.waitForSelector('.target-element')。
• 加载状态确认：必须确保选项完全加载后再操作，避免因元素未就绪导致的定位失败。

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