'By' 类型的参数不可分配给 'Predicate<DebugElement>' 类型的参数

Argument of type 'By' is not assignable to parameter of type 'Predicate<DebugElement>'

我正在试用 Protractor (5.4.2) 并尝试测试我的 Angular 组件。 我创建了以下测试,灵感来自 Joe Eames 的 Unit testing in Angular course

课程中的(工作)示例

我的(错误)代码

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DetailsComponent } from './details.component';
import { By } from 'protractor';

describe('DetailsComponent', () => {
    let fixture: ComponentFixture<DetailsComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [DetailsComponent]
        })
            .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(DetailsComponent);

        fixture.detectChanges();
    });

     it('contains 3 titles', () => {
        expect(fixture.debugElement.queryAll(By.css('.card-title')).length).toBe(3);
    });
});

但是在测试方法中调用.query时出现如下类型错误:

Argument of type 'By' is not assignable to parameter of type 'Predicate'.

我不明白为什么会出现此错误,因为我的代码看起来与示例类似。

发生此错误是因为您从 protractor 而不是 @angular/platform-browser 模块导入了 By

将此 import { By } from 'protractor'; 更改为 import { By } from '@angular/platform-browser';