Angular 单元测试：按数据-QA 标记属性查询 HTML 元素

Question

我正在编写 Angular 单元测试，并希望通过 data-qa 属性 query/get 自定义文本框的值，例如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

你可以试试这个，如果这还不够，你可以找更多的例子here

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

Angular 单元测试：按数据-QA 标记属性查询 HTML 元素

Angular Unit Test: Query HTML Element by Data-QA Tag Attribute

karma-jasmine

angular