Selecting a native-base `<Select>` option using Playwright

Question

我正在尝试使用 Playwright 选择 Native-Base

<Select>

选项，但我不知道如何引用此组件创建的 HTML

<select>

输入。

我的 React Native 代码如下所示：

<Select
  testID="nb-select-component"
  defaultValue="yes"
>
  <Select.Item label="Yes" value="yes" />
  <Select.Item label="No" value="no" />
</Select>

这在 HTML 中呈现如下：

<div>
  <select>
    <option value="yes">Yes</option>
    <option value="no">No</option>
  </select>
  <div>
    <input readonly type="hidden" data-testid="nb-select-component" />
  </div>
</div>

注意

testID

传播到

<input readonly />

元素，而不是

<select>

元素。

如果我可以获取

<select>

HTML 元素，我的 Playwright 代码将如下所示：

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

但是我不知道如何从 Playwright 访问

<select>

HTML 元素或更改

<Select>

本机基础组件的值。

Answer 1

Playwright 支持 XPath 查询，所以如果我隔离

<input data-testid="nb-select-component" />

，我可以使用 Xpath 从祖父母的

<select>

中检索

<div>

元素，如下所示：

const selectElement = page.locator(
  '//input[@data-testid="html-select-element"]' + // xpath to <input>
  '../../select' // grandparent's first child: <select>
);
await selectElement.selectOption({ "value": "yes" });