如何用angular编写单元测试用例，以检查我的HTML页面中是否存在多个标签？

我是angular的新手，刚刚开始用angular编写单元测试用例。 首先，我只想检查我的页面是否有特定的标签和文本

<div class="form-group row">
            <label for="staticEmail" class="col-lg-4 col-form-label">Comments</label>
            <div class="col-lg-8">
                <textarea class="form-control h-85"></textarea>
            </div>
</div>
<div class="form-group row">
            <label class="col-lg-4 col-form-label">City</label>
            <div class="col-lg-8">
                <input class="form-control" type="text">
            </div>
</div>

然后第二次测试失败，结果表明

预期“评论”包含“城市”

我也试过，但结果是一样的

it('should render   in an anchor tag', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.query(By.css('label')).nativeElement.innerText;
    expect(compiled).toContain('City');
  });

---

querySelector

方法根据查询选择它能找到的第一个元素。我想您正在查找

查询选择器all

：

expect(compiled.querySelectorAll('label')[1].textContent).toContain('City');

如果您只想测试是否有任何标签包含

City

，我想这也适用：

const labels = Array.from(compiled.querySelectorAll('label')).map(
  ({ textContent }) => textContent
);
expect(labels).toContain('City');

---

我们可以使用ID或任何东西来选择特定的标签吗？您可以使用任何您认为必要的CSS选择器。

。nativeElement

返回一个正常的HTMLElement，您可以在它上面调用任何您用来调用它的东西。我的问题解决了！非常感谢。

const labels = Array.from(compiled.querySelectorAll('label')).map(
  ({ textContent }) => textContent
);
expect(labels).toContain('City');