如何使用Selenium和C#在元素迭代中定位每个商品的名称文本？

问题场景 #

正在用C#做自动化测试，目标是抓取模拟电商页面首页商品列表的名称。页面有34个class为col-sm-4的div容器，每个容器内包含商品名称的p标签。尝试的代码要么返回选择器错误，要么重复返回第一个商品名称34次。

错误代码1（返回选择器错误）：

IList<IWebElement> productos = driver.FindElements(By.CssSelector("div[class=col-sm-4]"));

foreach (IWebElement element in productos)
{
    IWebElement asd = element.FindElement(By.XPath("./div[1]/div[1]/div[1]/p[1]"));
    TestContext.Progress.WriteLine(asd.Text);
}

错误代码2（重复返回第一个商品内容）：

//div[@class='productinfo text-center']//p

问题原因分析 #

1. 第一个代码中的XPath路径./div[1]/div[1]/div[1]/p[1]不符合页面实际DOM结构，导致找不到元素抛出错误。
2. 第二个XPath用//开头，会从整个文档根节点重新查找，而非基于每个col-sm-4容器的相对路径，因此每次都匹配到第一个符合条件的p标签，造成重复输出。

正确的选择器写法与代码示例 #

方法1：使用CSS选择器（简洁高效）

直接定位每个col-sm-4容器下的商品名称p标签，无需嵌套查找：

// 直接获取所有商品名称元素
IList<IWebElement> productNames = driver.FindElements(By.CssSelector("div.col-sm-4 div.productinfo.text-center p"));

foreach (IWebElement nameElement in productNames)
{
    TestContext.Progress.WriteLine(nameElement.Text);
}

若要先遍历容器再找子元素，确保CSS选择器为相对路径：

IList<IWebElement> productos = driver.FindElements(By.CssSelector("div.col-sm-4"));

foreach (IWebElement element in productos)
{
    // 在当前容器内查找子元素
    IWebElement nameElement = element.FindElement(By.CssSelector("div.productinfo.text-center p"));
    TestContext.Progress.WriteLine(nameElement.Text);
}

方法2：使用相对XPath

若使用XPath，必须以.开头表示相对路径，基于当前容器元素查找子节点：

IList<IWebElement> productos = driver.FindElements(By.CssSelector("div.col-sm-4"));

foreach (IWebElement element in productos)
{
    // 从当前元素开始查找子节点
    IWebElement nameElement = element.FindElement(By.XPath(".//div[@class='productinfo text-center']//p"));
    TestContext.Progress.WriteLine(nameElement.Text);
}

也可直接一次性获取所有商品名称：

IList<IWebElement> productNames = driver.FindElements(By.XPath("//div[@class='col-sm-4']//div[@class='productinfo text-center']//p"));

foreach (IWebElement nameElement in productNames)
{
    TestContext.Progress.WriteLine(nameElement.Text);
}

关键注意点 #

• 使用FindElement/FindElements时，相对路径必须以.开头（XPath）或直接用子选择器（CSS），否则会从文档根节点重新查找。
• CSS选择器中，多个class直接用.连接（如div.productinfo.text-center），比属性选择器更简洁。
• 优先使用CSS选择器，Selenium对CSS的支持更稳定高效，XPath适合复杂层级或条件查找。

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