Playwright的wait funtion测试

Playwright的wait funtion测试

强制等待

/**
 * Selects an option from a PrimeFaces/JSF dropdown menu.
 * @param {*} page 
 * @param {*} locator 
 * @param {*} option 
 * @param {*} timeout 
 */
const selectDropDown = async (page, locator, option, timeout = 500) => {
  await page.locator(locator).click();
  await page.waitForTimeout(timeout);
  await page.getByRole('option', { name: option }).click();
  await page.waitForTimeout(timeout);
}

等待元素加载

/**
 * Selects an option from a PrimeFaces/JSF dropdown menu.
 * @param {*} page 
 * @param {*} locator 
 * @param {*} option 
 * @param {*} timeout 
 */
const selectDropDown = async (page, locator, option, timeout = 500) => {
  // 1. Click the dropdown trigger
  await page.locator(locator).click();

  // 2. Wait for the option text to be visible anywhere on the page
  // This is robust for PrimeFaces where options are often divs/li with text content
  const optionLocator = page.getByText(option, { exact: true }).first();
  
  // Wait up to 5 seconds for the option to appear
  await expect(optionLocator).toBeVisible({ timeout: 5000 });

  // 3. Click the option
  await optionLocator.click();
}

执行结果

根本原因分析

role="option" 不适用于 PrimeFaces/JSF 组件

你之前的代码使用了 `page.getByRole('option', { name: option })。

• 标准 HTML <select> ：浏览器会自动给 <option> 标签赋予 role="option"。

• PrimeFaces/JSF 自定义下拉框: 这些框架通常使用 <div>, <li>, 或 <span> 来模拟下拉菜单，而不是原生的 <select>。

  • 如果底层元素是 <li class="ui-selectitem">PWY</li>，它没有 role="option" 属性。
  • 因此，getByRole('option') 永远返回空，导致 toBeVisible 超时失败。

解决方案

我们需要放弃 getByRole('option')，改用更通用的文本匹配或 CSS 类匹配。