angular - 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)
});

标签： angularkarma-jasmine

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)
});