Protractor中访问子元素文本属性返回null的问题排查

我来帮你搞定这个坑！你遇到的text返回null的问题，主要是两个地方出了错：XPath的路径写法不对，还有对ng-repeat元素的定位逻辑有误，咱们一步步来修正。

先说说原代码的问题 #

• 你用element(by.repeater('abc'))只会定位到第一个ng-repeat的<div>元素，不是所有的重复项，应该用element.all()来获取全部。
• 你的XPath用了//span[@class="xyz"]，这个是从整个DOM根节点开始搜索，不是在当前父元素下查找，所以即使循环也会拿到重复的结果或者空值。
• 循环里调用parent.count()是错的，因为parent是单个元素，根本没有count()方法，应该获取所有repeat元素的数量。

正确的写法示例 #

下面给你几种靠谱的实现方式，选你习惯的来用：

方式1：遍历每个repeat元素，再查找子元素

用each()方法遍历所有父元素，在每个父元素内用相对路径XPath（加个.）或者CSS选择器定位子元素：

// 获取所有ng-repeat的父div元素
const parentElements = element.all(by.repeater('abc'));

// 遍历每个父元素，获取子span的文本
parentElements.each(async (parent) => {
  // 用相对路径XPath：.//表示从当前元素开始查找
  const childText = await parent.element(by.xpath('.//span[@class="xyz"]')).getText();
  // 或者用CSS选择器更简洁：
  // const childText = await parent.element(by.css('.xyz')).getText();
  console.log("Value: ", childText);
});

方式2：直接定位所有子元素

既然子元素都在ng-repeat的元素里，也可以直接链式定位，一步到位：

// 直接定位所有ng-repeat下的.xyz元素
const childElements = element.all(by.repeater('abc').element(by.css('.xyz')));

childElements.each(async (child) => {
  const text = await child.getText();
  console.log("Value: ", text);
});

方式3：用for循环遍历（如果你偏好这种写法）

注意要先获取元素数量，并且用async/await处理异步操作：

const parentElements = element.all(by.repeater('abc'));
// 先获取总数量，因为count()是异步的
const totalItems = await parentElements.count();

for (let index = 0; index < totalItems; index++) {
  // 获取第index个父元素，再找子span
  const childText = await parentElements.get(index).element(by.css('.xyz')).getText();
  console.log(`Value ${index}: ${childText}`);
}

额外注意点 #

• Protractor所有的元素操作都是异步的，一定要用async/await或者Promise来处理，不然你打印的会是Promise对象，而不是实际的文本内容。
• 尽量优先用CSS选择器，比XPath更简洁易维护，比如.xyz就可以定位到class为xyz的元素。

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