Angular2 testing - Get element by Id

Question

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.

RandomUs1r · Accepted Answer · 2018-11-19 22:09:33Z

99

You can also use by.css

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

edited Nov 19, 2018 at 22:09

RandomUs1r

4,2182 gold badges27 silver badges47 bronze badges

answered Dec 30, 2016 at 16:08

J J B

9,3001 gold badge30 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

ohadinho Over a year ago

I'm getting: TypeError: platform_browser_1.By.id is not a function

Adam Hughes Over a year ago

What does the call to .debugElement.nativeElement return?

Adam Hughes Over a year ago

I was able to get the same results using .debugElement instead of .debugElement.nativeElement ... ie the return was a button that had a disabled attribute. Thank you for this answer as well, saved my day

J J B Over a year ago

@AdamHughes Yes, that's how I had it, if you review the revision here stackoverflow.com/posts/41399194/revisions you will see that. I'm looking into if there is a prefered method.

Tar Over a year ago

If anyone gets tripped by the By is not defined error, this import might help: import { By } from "@angular/platform-browser";

|

hazan kazim · Accepted Answer · 2018-07-02 07:22:49Z

28

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

answered Jul 2, 2018 at 7:22

hazan kazim

9589 silver badges11 bronze badges

Comments

reduckted · Accepted Answer · 2019-05-02 09:21:15Z

2

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

edited May 2, 2019 at 9:21

reduckted

2,5463 gold badges31 silver badges37 bronze badges

answered Jul 11, 2018 at 10:44

Vijay Barot

3523 silver badges8 bronze badges

Collectives™ on Stack Overflow

Angular2 testing - Get element by Id

3 Answers 3

11 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related