使用async/await编写返回element.all的自定义方法遇类型错误求指导

我来帮你排查这个问题～核心矛盾出在async函数的返回特性和你声明的返回类型不匹配上，咱们一步步拆解：

问题根源 #

你给方法标记了async，但声明的返回类型是ElementArrayFinder，这两者是冲突的：

• async函数的返回值会自动被JavaScript包装成Promise对象，不管你return的是什么
• ElementArrayFinder本身是Protractor提供的一个特殊对象（带有Promise链式调用能力，但它不是Promise）

所以TypeScript会报错，因为你承诺返回ElementArrayFinder，但实际返回的是Promise<ElementArrayFinder>。

另外你的代码里还有个小问题：return await element.all(byEl)是多余的——element.all()直接返回ElementArrayFinder，不需要用await去“等待”它（除非你想把它解析成实际的元素数组）。

两种解决方案 #

方案1：保持返回ElementArrayFinder #

如果你还是想返回原生的ElementArrayFinder（方便后续链式调用Protractor的API），有两种写法：

写法A：不用async/await，用Protractor的Promise链式调用

static getElements(byEl: any): ElementArrayFinder {
  // 先等待元素出现，再返回element.all的结果
  return browser.wait(Util.EC.presenceOf(element(byEl)), 30000, 'Element not found')
    .then(() => element.all(byEl));
}

写法B：用async/await，但修改返回类型为Promise

static async getElements(byEl: any): Promise<ElementArrayFinder> {
  await browser.wait(Util.EC.presenceOf(element(byEl)), 30000, 'Element not found');
  // 这里不用await，直接返回ElementArrayFinder
  return element.all(byEl);
}

调用这个方法的时候，你需要用await来获取里面的ElementArrayFinder：

const elements = await YourClass.getElements(by.css('.your-selector'));

方案2：直接返回解析后的元素数组（更符合async/await的风格） #

如果你希望直接拿到实际的DOM元素数组（而不是Protractor的封装对象），可以把返回类型改成Promise<Element[]>，这样async/await用起来更自然：

static async getElements(byEl: any): Promise<Element[]> {
  await browser.wait(Util.EC.presenceOf(element(byEl)), 30000, 'Element not found');
  // await element.all()会直接返回解析后的Element数组
  return await element.all(byEl);
}

这种写法下，调用后直接拿到的就是可以操作的元素数组，不用再处理Protractor的链式API。

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