xpath定位：selenium和playwrightAnt Design / 表单类页面)

selenium

比如要选择供应商

元素如下

定位

复制代码

//label[normalize-space(text())='供应商']/ancestor::div[contains(@class,'ant-form-item-row')]//input[@placeholder='请选择']

出现多个结果

修改定位如下：

复制代码

//label[normalize-space()='供应商']/parent::div/following-sibling::div//span[contains(@class,'select-input')]//input

结果是唯一的

详细分析：

复制代码

//label[normalize-space()='供应商'] 
/parent::div 
/following-sibling::div 
//span[contains(@class,'select-input')]//input

因为"请选择"不是唯一的，而"供应商"是唯一的

1.定位label本身

复制代码

//label[normalize-space()='供应商']

2.parent::div----回到label所在列

复制代码

/parent::div

结构是这样的

复制代码

div (label 容器)
 └── label 供应商

3.following-sibling::div ------ 找右侧输入区域

复制代码

/following-sibling::div

4.精准找到 Select 的 input

复制代码

//span[contains(@class,'select-input')]//input

普通输入框

复制代码

//label[normalize-space()='字段名'] /parent::div /following-sibling::div //input

AntD 下拉框（Select）

复制代码

//label[normalize-space()='字段名'] /parent::div /following-sibling::div //span[contains(@class,'select-input')]//input

TextArea

复制代码

//label[normalize-space()='字段名'] /parent::div /following-sibling::div //textarea

Ant Design / 表单类页面比selenium更方便

playwright定位优先级

从高到低

1️⃣ getByRole()

2️⃣ getByLabel()

3️⃣ getByText()

4️⃣ locator('css')

5️⃣ locator('xpath') ❌（最后兜底）

以上述供应商选择为例

getByRole()

复制代码

const supplierSelect = page.getByLabel('供应商');

• Playwright 会自动：

• 找 <label> 文本 = "供应商"

• 关联到右侧的可交互控件

• 不关心 DOM 多乱

• Ant Design 完全适配

选择供应商

复制代码

await page.getByLabel('供应商').click(); 
await page.getByRole('option', { name: '某某供应商' }).click();

✔ 优点：

• 不关心 dropdown 在 body 还是 portal

• 自动等待

• 语义清晰，可维护性极高

表单中 Select 的"标准 Playwright 写法"

复制代码

await page.getByLabel('供应商').click();
await page.getByRole('listbox').getByText('供应商名称').click();