Angular 单元测试：通过 Data-QA 标签属性查询 HTML 元素

Question

我正在编写 Angular 单元测试，并且想要按属性查询/获取自定义文本框的值，data-qa例如https://dev.to/chriszie/data-qa-attribute-a-better-way-to-select-elements-for -ui-test-automation-48lm。

如何才能做到这一点？

 <app-textbox
    type="text"
    data-qa="productname"
 >
 </app-textbox>

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


it('test value', () => {
   let data = fixture.debugElement.query(By  -- (not sure what to write here)
});

Answer 1

您可以尝试一下，如果这还不够，您可以在这里找到更多示例

it('test value', () => {
   const input = fixture.debugElement.query(By.css('input[data-qa="productname"]')) 
   OR
   const input = fixture.debugElement.nativeElement.querySelector('input[data-qa="productname"]')
   console.log(input)
});