如何在Playwright(TypeScript)中选择ivu-select-dropdown元素？

• 先触发下拉框展开
  点击前ivu-select-dropdown处于display: none隐藏状态，Playwright默认无法定位隐藏元素，得先让它显示出来。可以点击下拉箭头或选择框输入区域：

  // 点击下拉箭头触发展开
  await page.click('.ivu-select-arrow');
  // 或者点击选择框的输入框
  await page.click('.ivu-select-input');
  

• 等待并定位目标元素
  下拉框展开后，等待元素变为可见再定位，避免因渲染延迟导致失败：

  // 等待元素可见后获取
  const dropdown = await page.waitForSelector('.ivu-select-dropdown', { state: 'visible' });
  // 也可以直接用locator（Playwright会自动等待元素可交互）
  const dropdown = page.locator('.ivu-select-dropdown');
  

• 定位下拉框内的具体选项
  如果要选择某个选项（比如示例中的"5Cells"），可以直接通过文本或自定义类名定位：

  // 通过选项文本定位
  await page.click('.ivu-select-item:has-text("5Cells")');
  // 或者结合自定义类名定位，更精准
  await page.click('.custom-select-item-for-preview:has-text("5Cells")');
  

• 适配结构变化的稳定定位
  考虑到页面结构可能变动，建议结合父容器的特征缩小定位范围，避免误定位：

  // 先定位到自定义父容器，再操作内部元素
  const parentContainer = page.locator('.custom-autocomplete-targets');
  await parentContainer.locator('.ivu-select-arrow').click();
  const dropdown = await parentContainer.locator('.ivu-select-dropdown').waitFor({ state: 'visible' });
  

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