如何用Playwright定位并选择Native-Base <Select>组件的选项？

方法1：通过DOM层级关系定位元素 # 利用带testID的隐藏输入框，通过DOM结构关联找到同级的<select>元素： // 先定位带testID的hidden input，再向上找到祖父节点，最后定位内部的select const selectElement = page.locator('data-testid=nb-select-component').locator('..').locator('..').locator('select'); await selectElement.selectOption({ value: "no" }); 也可以用更简洁的XPath选择器： const selectElement = page.locator('[data-testid="nb-select-component"]').locator('xpath=../../select'); await selectElement.selectOption({ value: "no" }); 方法2：修改Native-Base组件，给添加自定义标识 #

如果能修改组件代码，可通过Native-Base的_web属性，直接给渲染后的<select>元素添加testID：

<Select
  testID="nb-select-component"
  defaultValue="yes"
  _web={{
    nativeProps: {
      'data-testid': 'html-select-element'
    }
  }}
>
  <Select.Item label="Yes" value="yes" />
  <Select.Item label="No" value="no" />
</Select>

之后就能用你原本的Playwright代码直接定位：

const selectElement = page.locator("data-testid=html-select-element");
await selectElement.selectOption({ value: "yes" });

方法3：模拟真实用户交互流程 #

如果前面的方法不适用，可模拟用户点击下拉框再选择选项的真实操作：

// 点击Native-Base Select组件的外层容器触发下拉
await page.locator('data-testid=nb-select-component').locator('..').locator('..').click();
// 通过选项文本选择
await page.getByText('No').click();
// 也可以通过value属性选择
await page.locator(`option[value="no"]`).click();

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