Playwright C#如何定位多个相同元素中的指定位置元素？

定位单个元素的正确方法 #

方法1：使用Nth()方法（推荐） #

直接在定位器后链式调用Nth(index)，索引从0开始计数：

var nameField = page.Locator("div[data-ph-key='Name']").Nth(0); // 取第一个匹配元素
await nameField.FillAsync("");

方法2：使用First/Last属性 #

如果只需要取第一个或最后一个元素，可直接用内置属性：

// 取第一个元素
var firstField = page.Locator("div[data-ph-key='Name']").First;
await firstField.FillAsync("");

// 取最后一个元素
var lastField = page.Locator("div[data-ph-key='Name']").Last;
await lastField.FillAsync("");

方法3：CSS选择器直接指定位置 #

用CSS的:nth-of-type()或:nth-child()伪类（注意CSS索引从1开始）：

var nameField = page.Locator("div[data-ph-key='Name']:nth-of-type(1)"); // 取第一个匹配元素
await nameField.FillAsync("");

类似Selenium的元素集合操作 #

如果需要先获取所有匹配元素再按需操作，可通过AllAsync()方法获取元素列表：

// 获取所有匹配的元素集合
var allNameFields = await page.Locator("div[data-ph-key='Name']").AllAsync();

// 操作第一个元素
await allNameFields[0].FillAsync("");
// 操作第二个元素
await allNameFields[1].FillAsync("");

你之前报错的可能原因 #

从错误信息看，定位器是div[data-ph-key='Name']，但你部分代码里写的是div[data-key='Name']，属性名少了ph后缀，这会导致定位器匹配的元素不符合预期，进而触发strict mode的报错。先检查定位器的属性名是否和页面实际一致。

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