Angular 5 组件测试通过 ID 获取 debugElement答案

【问题标题】：Angular 5 component test get debugElement by IDAngular 5 组件测试通过 ID 获取 debugElement
【发布时间】：2018-05-14 09:10:13
【问题描述】：

我有一个组件，其中包含 3 个选择下拉列表，没有附加 css 类，每个都有一个唯一的 Id。在我的组件中，我想将元素作为 DebugElements 获取，以便在触发各种事件后测试它们的状态。在 Angular 网站上有 debugElement.query(By.css('[attribute]'));。如何通过.id 获取我的下拉列表

【问题讨论】：

By.css('#someId')?
工作了，谢谢，不知道你能做到这一点
element, .class, #id, [attribute]

标签： angular unit-testing testing angular-components

【解决方案1】：

感谢@jonrsharpe

By.css('#someId')

【讨论】：

从哪里导入“By”？
@AnandRaj import { By } from "@angular/platform-browser";

【解决方案2】：

Angular 7 按 ID 获取 debugElement

debugElement.query 迭代所有 debugElements 并通过谓词返回那些发现为 true 的元素。这个例子展示了如何在一行代码中做到这一点。

var test = fixture.debugElement.query((de)=>{return de.nativeElement.id==="someId"});

【讨论】：