Playwright(TypeScript)获取下拉框预选中值为空，断言失败求解决

以下是几种排查和解决的思路：

• 确保元素完成初始化
  元素能被定位到不代表它的预选中值已经被页面逻辑赋值。可以增加等待逻辑，确保元素状态稳定后再取值：

  await this.page.waitForSelector("#recommendations_recommendation", { state: "visible", timeout: 5000 });
  const dropdownValue = await this.page.$eval<string, HTMLSelectElement>("#recommendations_recommendation", ele => ele.value);
  expect(dropdownValue).toBe("Approve");
  

  或者直接等待value不为空：

  await this.page.waitForFunction(
    (selector) => document.querySelector<HTMLSelectElement>(selector)?.value !== "",
    "#recommendations_recommendation"
  );
  const dropdownValue = await this.page.$eval<string, HTMLSelectElement>("#recommendations_recommendation", ele => ele.value);
  expect(dropdownValue).toBe("Approve");
  

• 直接获取选中的option值
  部分页面的预选中是通过给<option>标签添加selected属性实现的，而非直接设置select元素的value。这种情况下可以直接定位选中的option：

  const selectedOptionValue = await this.page.$eval<string>(
    "#recommendations_recommendation option:checked",
    ele => ele.value
  );
  expect(selectedOptionValue).toBe("Approve");
  

  如果需要验证文本内容，也可以这样写：

  const selectedOptionText = await this.page.$eval<string>(
    "#recommendations_recommendation option:checked",
    ele => ele.textContent?.trim() || ""
  );
  expect(selectedOptionText).toBe("Approve");
  

• 排查动态加载逻辑
  如果下拉框的选项是异步加载的，预选中值可能在元素渲染后才被设置。可以先等待选项加载完成：

  await this.page.waitForSelector("#recommendations_recommendation option", { timeout: 5000 });
  const dropdownValue = await this.page.$eval<string, HTMLSelectElement>("#recommendations_recommendation", ele => ele.value);
  expect(dropdownValue).toBe("Approve");
  

• 打印DOM状态调试
  在取值前打印元素的HTML，确认实际的预选中状态：

  const dropdownHtml = await this.page.$eval<string>(
    "#recommendations_recommendation",
    ele => ele.outerHTML
  );
  console.log("当前下拉框DOM:", dropdownHtml);
  const dropdownValue = await this.page.$eval<string, HTMLSelectElement>("#recommendations_recommendation", ele => ele.value);
  expect(dropdownValue).toBe("Approve");
  

  通过打印的HTML，可以直观看到select的value属性，以及哪个option带有selected标记，快速定位问题。

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