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

Question

I am writing Angular unit tests, and want to query/get value of custom textbox by data-qa attribute per e.g. https://dev.to/chriszie/data-qa-attribute-a-better-way-to-select-elements-for-ui-test-automation-48lm.

How can this be done?

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

You can use CSS selectors for arbitrary attributes, including data- ones: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors — jonrsharpe, Nov 14 '20 at 17:55
hi @jonrsharpe feel free to write in code in answer, and I can send points, thanks — , Nov 14 '20 at 17:58
I'd suggest *actually trying it*, then you can [edit] to show a specific problem if you still can't get it to work. — jonrsharpe, Nov 14 '20 at 17:59

score 5 · Accepted Answer · answered Nov 14 '20 at 17:59

You can try this and If this is not suffice, you can find more examples 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 Unit Test: Query HTML Element by Data-QA Tag Attribute

1 Answers1