Selenium JavaScript 如何从父div获取指定子元素的内部元素

方案1：链式定位（推荐，易维护） #

逻辑为先定位所有符合class="A"的div，取第二个（JS数组0索引，取索引1），再在该父元素上下文定位内部button下的svg，避免受页面其他元素干扰：

const { By } = require('selenium-webdriver');

// 先获取所有class包含A的div元素，多类名场景可替换为div[class~="A"]
const allADivs = await driver.findElements(By.css('div.A'));
// 取第二个div元素（索引1，JS数组从0开始计数）
const secondADiv = allADivs[1];
// 在该div内部定位button下的svg
const targetSvg = await secondADiv.findElement(By.css('button svg'));

如果需要处理动态渲染场景，加显式等待即可：

const { until } = require('selenium-webdriver');
// 等待父元素加载完成
const secondADiv = await driver.wait(
  async () => {
    const elements = await driver.findElements(By.css('div.A'));
    return elements[1] || null;
  },
  10000
);
// 再定位子元素
const targetSvg = await secondADiv.findElement(By.css('button svg'));

方案2：XPath 一步定位（代码更紧凑） #

直接通过XPath匹配第二个class="A"的div，再定位其内部的svg：

const targetSvg = await driver.findElement(
  By.xpath("(//div[contains(concat(' ', normalize-space(@class), ' '), ' A ')])[2]//button/svg")
);

注意：这里用contains+空格拼接的写法，是为了适配class="A other"这类多类名的场景，避免把class="AB"这类元素误判为符合要求的节点。

优化注意事项 #

• 如果父div内部结构后续有调整，链式定位的方案只需要修改子元素的定位规则，不需要重新调整父元素的选择器，维护成本更低
• 尽量不要用裸索引定位全局元素，所有选择器都要尽可能缩小范围，减少误匹配
• 动态加载的页面必须加显式等待，不要依赖强制sleep

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