Protractor框架下如何正确获取页面多个span元素的文本？

你遇到的核心问题是Protractor的异步特性导致的——直接打印的是异步操作返回的Promise对象，而不是实际的文本值。我来帮你一步步搞定：

问题根源 #

Protractor基于WebDriverJS，所有元素定位、文本获取这类操作都是异步的，返回的是Promise（或者ElementArrayFinder，本质也是可异步解析的对象）。直接用console.log拼接这个对象，只会输出类似[object Promise]的内容，根本拿不到你想要的文本数组。

修复步骤 #

1. 调整辅助方法，返回文本的Promise数组

先确保getAllSpansContainText最终返回的是每个span的文本，而非元素本身。假设你的getAllSpanByText返回的是ElementArrayFinder，可以用map批量获取每个元素的文本：

static getAllSpansContainText(text: string) {
  // 对每个找到的span调用getText()，返回文本的Promise数组
  return this.getAllSpanByText(text, true).map(spanElement => spanElement.getText());
}

如果getAllSpanByText还没实现，直接用Protractor内置定位器更简单：

static getAllSpansContainText(text: string) {
  return element.all(by.cssContainingText('span', text)).map(span => span.getText());
}

2. 把属性改成异步方法

异步操作没法直接通过属性返回结果，建议把jobStasuses改成异步方法：

static async getJobStatuses() {
  // 等待Promise解析，拿到实际的文本数组
  return await CommonPage.getAllSpansContainText('ACCEPTED');
}

3. 在测试代码中用async/await等待结果

最后在测试类里，必须等异步操作完成后再打印：

it('should get job statuses correctly', async () => {
  const jobStatuses = await ffcPage.getJobStatuses();
  console.log('Job Statuses: ', jobStatuses);
});

要是不想用async/await，也可以用then()链式处理Promise：

it('should get job statuses correctly', () => {
  ffcPage.getJobStatuses().then(statuses => {
    console.log('Job Statuses: ', statuses);
  });
});

验证效果 #

修改后控制台会输出预期的文本数组，比如Job Statuses: ["ACCEPTED", "ACCEPTED"]，完美符合你的需求。

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