如何在TestCafe中读取SVG标签内的子元素标签值？

假设你的SVG结构类似这样：

<svg id="target-svg">
  <text class="item-label">标签1</text>
  <rect data-value="150" class="chart-shape"></rect>
  <circle data-info="测试" r="15"></circle>
</svg>

方法1：用原生DOM选择器批量获取 #

这是最灵活的方式，支持按类名、标签名、属性筛选：

// 获取SVG容器
const svgContainer = document.getElementById('target-svg');

// 1. 读取所有带class="item-label"的文本内容
const labelElements = svgContainer.querySelectorAll('.item-label');
labelElements.forEach(el => {
  const labelText = el.textContent;
  console.log('标签文本：', labelText);
});

// 2. 读取元素的属性值（比如data-*、几何属性）
const shapeElements = svgContainer.querySelectorAll('rect, circle');
shapeElements.forEach(el => {
  const dataValue = el.getAttribute('data-value');
  const radius = el.getAttribute('r');
  console.log('属性值：', dataValue || radius);
});

方法2：修正child节点遍历逻辑（解决你之前child函数失效的问题） #

之前用child函数没成功，大概率是没过滤SVG里的空白文本节点，试试这种方式：

const svg = document.getElementById('target-svg');
// 遍历所有子节点，仅处理元素节点（nodeType=1）
for (const node of svg.childNodes) {
  if (node.nodeType === 1) {
    // 读取文本内容（针对text标签）
    if (node.tagName === 'TEXT') {
      console.log('文本值：', node.textContent);
    }
    // 读取自定义属性
    const attrVal = node.getAttribute('data-info');
    if (attrVal) console.log('自定义属性：', attrVal);
  }
}

方法3：按标签名批量读取 #

如果目标子元素是同一种标签（比如全是<text>），可以直接用：

const textNodes = document.getElementById('target-svg').getElementsByTagName('text');
for (const el of textNodes) {
  console.log('文本内容：', el.textContent);
}

关于你之前CSS类名读取失败的排查点 #

• 确认类名选择器写法正确：必须以.开头（比如.chart-shape，不是chart-shape）
• 检查SVG元素的类名是否正确渲染到DOM中（用浏览器开发者工具查看）
• 如果SVG是动态生成的，要确保代码在DOM加载完成后执行（比如放在document.addEventListener('DOMContentLoaded', function() { ... })里）

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