React前端Selenium测试：如何定位并点击指定位置的元素

你之前尝试的.details-header[0]是错误的CSS选择器语法——[0]属于属性选择器，会查找带有0属性的元素，而非索引为0的元素，所以无法定位目标。以下是两种可靠的实现方式：

方法1：直接用CSS选择器定位目标元素 #

利用CSS伪类直接定位最后一个.details-header下的首个子元素，推荐用nth-last-of-type(1)规避父容器中其他类型元素（如示例里的section）的干扰：

// 定位最后一个.details-header的首个子元素
IWebElement targetElement = driver.FindElement(By.CssSelector(".details-header:nth-last-of-type(1) > :first-child"));

// 执行点击（如果普通Click()无效，用JavaScriptExecutor）
IJavaScriptExecutor executor = (IJavaScriptExecutor)driver;
executor.ExecuteScript("arguments[0].click()", targetElement);

如果父容器中只有.details-header类型的div，也可以简化为.details-header:last-child > :first-child。

方法2：先获取所有头部元素，再取最后一个 #

通过FindElements获取所有.details-header元素集合，再索引到最后一个元素，最后定位其首个子元素：

// 获取页面中所有.details-header元素
IList<IWebElement> allHeaders = driver.FindElements(By.CssSelector(".details-header"));

// 取最后一个头部元素（集合索引从0开始，所以用Count-1）
IWebElement lastHeader = allHeaders[allHeaders.Count - 1];

// 定位该头部下的首个子元素
IWebElement firstChild = lastHeader.FindElement(By.CssSelector(":first-child"));

// 执行点击
IJavaScriptExecutor executor = (IJavaScriptExecutor)driver;
executor.ExecuteScript("arguments[0].click()", firstChild);

补充说明 #

React页面常存在动态渲染，若元素定位失败，可先添加显式等待确保元素加载完成：

WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
IWebElement targetElement = wait.Until(d => d.FindElement(By.CssSelector(".details-header:nth-last-of-type(1) > :first-child")));

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