如何通过父元素定位子元素并使用Playwright的page.fill()方法？

当然可以，你完全可以借助父元素的.page-options类缩小定位范围，精准找到这两个输入框并完成填充。结合你提供的HTML结构，这里有几种可靠的实现方式：

方式一：直接使用链式CSS选择器定位 #

利用CSS的相邻兄弟选择器和文本匹配选择器，能直接定位到对应label旁边的输入框，这种方式不依赖元素顺序，稳定性更高：

// 填充Page ID输入框
await page.fill('.page-options label:contains("Page ID") + input', '你的账号');

// 填充Page Password输入框
await page.fill('.page-options label:contains("Page Password") + input', '你的密码');

选择器说明： #

• .page-options：限定在登录区域内查找，避免影响页面其他input元素
• label:contains("Page ID")：匹配包含"Page ID"文本的label标签
• + input：选中紧跟在该label后的同级input元素

方式二：先获取父元素，再在范围内定位子元素 #

如果需要多次操作登录区域内的元素，可以先定位父元素，再在其范围内查找子元素，代码更简洁：

// 定位登录区域父元素
const loginContainer = page.locator('.page-options');

// 在父元素范围内填充输入框
await loginContainer.locator('label:contains("Page ID") + input').fill('你的账号');
await loginContainer.locator('label:contains("Page Password") + input').fill('你的密码');

备选：基于元素顺序的定位（不推荐） #

如果label文本可能发生变化，也可以通过子元素的顺序来定位，但这种方式依赖HTML结构的顺序，一旦页面结构调整就会失效，仅作备选：

// 定位第一个输入框（Page ID）
await page.fill('.page-options div:nth-child(1) input', '你的账号');

// 定位第二个输入框（Page Password）
await page.fill('.page-options div:nth-child(2) input', '你的密码');

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