如何从父 div 获取特定子元素的内部元素 - selenium javascript答案

【问题标题】：How to get inner element of specific child from the parent div - selenium javascript如何从父 div 获取特定子元素的内部元素 - selenium javascript
【发布时间】：2021-03-25 08:38:33
【问题描述】：

<div class="A">
  <svg> ... </svg>
  <button> 
    <svg> ... </svg>
  </button>
  <svg> ... </svg>
</div>
<div class="A">
  <svg> ... </svg>
  <button> 
    <svg> ... </svg>
  </button>
  <svg> ... </svg>
</div>

我需要在 second div 中检索 button 元素的 svg 元素。有人可以帮我解决这个问题吗？

【问题讨论】：

标签： javascript selenium

【解决方案1】：

如果您使用的是 xpat h，那么您应该指定 svg 作为名称：

这给出了第二个元素，它是按钮的 svg 元素和 div 的子元素

(//div/button/*[name()='svg'])[2]

如果你使用的是 css 可以直接使用

这会找到第二个孩子的div，然后找到按钮的svg

   div:nth-child(2)>button>svg

【讨论】：

【解决方案2】：

试试这个 xpath：

(//div/button)[2]/*[name()='svg']

注意括号的用法，以便选择页面上 //div/button 的第二个实例。

另请参阅此答案：https://stackoverflow.com/a/3371935/1387701

【讨论】：

【解决方案3】：

您可以使用querySelectorAll。

// find all DIVs with class a
const allDivsWithClassA = document.querySelectorAll(".a");
// get the second element
const secondDiv = [...allDivsWithClassA][1];
// find its svg wrapped by button
const svgWrappedByButton = secondDiv.querySelector("button > svg");

console.log(svgWrappedByButton);

<div class="a">
  <svg></svg>
  <button> 
    <svg></svg>
  </button>
  <svg></svg>
</div>
<div class="a">
  <svg></svg>
  <button> 
    <svg></svg>
  </button>
  <svg></svg>
</div>

【讨论】：

我同意您针对较少 DOM 元素的解决方案。我刚刚添加了两个 div 以供参考，实际 DOM 中有很多 div。我猜每次做查询选择器都会很昂贵。我想要的是，获取 div -> button -> SVG 的特定实例。对于第二个元素的情况，可能与 .a:nth-child(2) 类似。但它不起作用（我收到 Web element found 错误）
@JayanthR 我根据您的需求调整了解决方案。因此，首先搜索第二个 div，然后搜索由按钮包裹的 svg 元素。

【解决方案4】：

首先，您必须为第二个 div 提供一个 ID。样式将与您在类中已有的样式保持一致，ID 将使获取元素更容易。那就试试这个吧。

function getSVG(){
  // I dont know what Id you'll give it so I named it ParentID
  var parent = document.querySelector("#ParentID");
  var getSvg = parent.querySelectorAll("svg");
  console.log(getDivs);
}

【讨论】：

如果他们有 id 这会简单得多，但示例代码在 DOM 中没有 id。
它仍然可以工作，为什么放一个 ID 会伤害代码？我不明白为什么你会因为这么一个小细节给我投反对票
用户不能总是更改页面的源代码。