如何在JavaScript版Selenium中获取子元素？

你当前的写法错误在于混淆了Selenium定位器对象和原生DOM元素的用法——By.id("nav-search-submit-text")返回的是Selenium的定位器实例，并非网页的DOM元素，所以不能直接访问.children[0]属性。以下是几种正确获取子元素并点击的方法：

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

通过CSS选择器直接定位目标子元素，一步到位：

await chromeDriver.findElement(By.cssSelector("#nav-search-submit-text > *:first-child")).click();

如果知道子元素的具体标签（比如是span），可以更精准：

await chromeDriver.findElement(By.cssSelector("#nav-search-submit-text > span:first-child")).click();

方法2：先定位父元素，再从父元素内查找子元素 #

先获取父元素，再基于父元素的上下文查找子元素：

// 先找到父元素
const parentElement = await chromeDriver.findElement(By.id("nav-search-submit-text"));
// 查找父元素下的第一个子元素（用CSS选择器）
await parentElement.findElement(By.cssSelector("*:first-child")).click();

也可以用XPath实现：

const parentElement = await chromeDriver.findElement(By.id("nav-search-submit-text"));
await parentElement.findElement(By.xpath("./*[1]")).click();

方法3：执行原生JavaScript代码（备选方案） #

如果习惯原生DOM操作，也可以通过Selenium执行JS代码来实现：

await chromeDriver.executeScript(() => {
  document.getElementById("nav-search-submit-text").children[0].click();
});

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