为什么在Typescript类中的这种结构在编译时会很好地导致运行时错误？

Question

我正在为茉莉花量角器写作。 我精通Java和浏览器测试，但对JavaScript和Protractor不熟悉。

我正在努力将代码移至使用异步的“新”样式，并等待进行控制流更改（如果我对此理解有误，我表示歉意），而当遇到问题时，这涉及到转换我的页面对象类。 最初，我试图在“ Line A”处键入函数作为Promise，但是出现了“ type any []不能转换为ElementArrayFinder类型”的错误。 在建议下，我将其更改为当前可编译的“ Promise”，但由于给定代码以下的错误而无法运行。 在进行转换之前，我只是毫无问题地传递了ElementArrayFinder对象，并且我的代码可以正常工作，因此我以前使用过代码，我只需要弄清楚如何使其在新结构中工作即可。

// my po class
...
// Breadcrumb methods
async getBreadCrumbs(): Promise<any> {  // Line A
   return await element.all(by.css('bread-crumbs span'));
}

async getProjectNameBreadCrumbText() {
    const breadCrumbs: ElementArrayFinder = await this.getBreadCrumbs();
    return await breadCrumbs.get(2).getText();
}

async getProjectMapperBreadCrumbText() {
    const breadCrumbs: ElementArrayFinder = await this.getBreadCrumbs();
    return await breadCrumbs.get(3).getText();
}

在Webstorm中似乎可以正常编译而没有IDE错误，但是在运行它时出现错误：

Failed: breadCrumbs.get is not a function
TypeError: breadCrumbs.get is not a function

如果这很重要，则使用上述PO类的代码在运行时调用代码时会导致失败：

it('test case', async function() {
...
await expect(mapperPage.getProjectMapperBreadCrumbText()).toEqual(mapperPage.MAPPER_BREADCRUMB);
...
});

对于如何编写此代码，我持建设性的批评态度，我主要是通过将代码位拼凑起来来提高它的性能。

Answer 1

由于您从getBreadCrumbs（）返回了element.all（by.css（'bread-crumbs span'）） ， 因此其他函数实际上正在接收WebElement数组，而不是ElementArrayFinder 。 所以你应该可以打电话

面包屑[n]的.getText（）

在你的职能

我个人的建议是让您远离返回选择器的函数，而是将它们设置为页面对象类的属性：

公共面包屑= element.all（by.css（'面包屑跨度'））;

这将getProjectNameBreadCrumbText（）简化为：

async getProjectNameBreadCrumbText(): Promise<string> { return this.breadCrumbs.get(2).getText(); }

和您的测试：

it('test case', async function() { ... expect(await mapperPage.getProjectMapperBreadCrumbText()) .toEqual(mapperPage.MAPPER_BREADCRUMB); ... });

如果您希望我能为我提供在禁用Promise Manager的情况下用于异步/等待的页面对象，规范和配置的一般格式。

Answer 2

因为element.all(by.css('bread-crumbs span')); 似乎导致undefined 。 除非您在tsconfig中将其关闭，否则Undefined会匹配Typescript中的任何类型。 Typescript也会转换为JavaScript，并且在运行时不会强制类型正确性。 因此，尤其是如果您使用的是第三方脚本，请不要在不检查类型声明的情况下依赖它们。