CodeceptJS中获取多span元素的文本合并处理技巧

在实际Web自动化测试中，我们经常会遇到页面元素被拆分为多个span标签的情况。本文将以CodeceptJS框架为例，深入探讨如何正确处理这类元素的文本获取问题。

问题场景分析

假设页面中存在如下HTML结构：

<h2>
  <span>"1"</span>
  <span>"One"</span>
</h2>

开发者期望获取合并后的文本"1 One"，但直接使用grabTextFrom()或grabTextFromAll()方法时，得到的却是"1One"这样没有空格分隔的字符串。

技术原理剖析

CodeceptJS的文本获取方法底层依赖于浏览器API，其默认行为是：

1. 对于单个元素选择器，返回元素的innerText
2. 对于多个元素选择器，返回各元素innerText的数组

当元素被拆分为多个span时，浏览器API会将这些span的文本直接拼接，而不会自动添加空格。

解决方案推荐

方法一：合并文本数组

const textArray = await I.grabTextFromAll('h2 span');
const mergedText = textArray.join(' '); // 使用空格连接

方法二：获取父元素文本

const fullText = await I.grabTextFrom('h2');

方法三：自定义提取逻辑

const text = await I.executeScript(() => {
  return Array.from(document.querySelectorAll('h2 span'))
    .map(span => span.innerText)
    .join(' ');
});

最佳实践建议

1. 优先考虑获取父元素文本，这通常能保持页面显示的原样格式
2. 当需要精确控制时，使用数组合并方法
3. 对于复杂场景，考虑使用executeScript自定义提取逻辑
4. 在断言时注意文本中的空格和格式问题

扩展思考

这种文本处理问题在实际测试中非常常见，理解其背后的原理有助于我们：

• 更好地设计测试用例
• 编写更健壮的断言
• 处理各种复杂的页面结构
• 提高测试代码的可维护性

掌握这些技巧后，开发者可以更灵活地应对各种页面文本提取需求，确保自动化测试的准确性和可靠性。