CODEWITHSUNDEEP
angular
ohadinho
ohadinho

Reputation: 7144

Angular2 testing - Get element by Id

I'm writing an Angular2 test component and i've noticed this line in the tutorials:

de = fixture.debugElement.query(By.css('h1'));

de is defined as DebugElement type.

How can I get DebugElement by id?

That may seem extremely simple but I can't find any direction in the docs.

Upvotes: 62

Views: 111514

Answers (3)

Vijay Barot
Vijay Barot

Reputation: 352

You can use following syntax to get an attribute value from an HTML element:

To retrieve an HTML element:

const element = fixture.debugElement.nativeElement.querySelector('name of element'); // example a, h1, p

To get an attribute value from that element:

const attributeValue = element.attributeName // like textContent/href

Upvotes: 2

J J B
J J B

Reputation: 9250

You can also use by.css

de = fixture.debugElement.query(By.css('#theid'));

Upvotes: 99

hazan kazim
hazan kazim

Reputation: 958

  const fixture = TestBed.createComponent(DashboardComponent);
  const compiled = fixture.debugElement.nativeElement;

  • using id

    expect(compiled.querySelector('#from').textContent).toContain('From Date');

  • using css

    expect(compiled.querySelector('.from').textContent).toContain('From Date');

Upvotes: 28

Related Questions