How to get Angular 2 element through class name in Jasmine

Question

I can get element with using the

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

But what I should to do when I want get element through class name. Something like this

fixture.debugElement.query(By.css('class="name"'))

Solution 1

You use By.css to pass a css selector. So any selector you can use with css, you can use with By.css. And a selector for a class is simply .classname (with period).

By.css('.classname')          // get by class name
By.css('input[type=radio]')   // get input by type radio
By.css('.parent .child')      // get child who has a parent

These are just some example. If you know css, then you should know how to use selectors.

EDIT: To use By.css() be sure to import { By } from '@angular/platform-browser';

Solution 2

Just to add some other usefull ways for selecting elements:

// get element with multiple classes

fixture.debugElement.query(By.css('.className1.className2'));


// get a certain element from a group of elements with the same class name

fixture.debugElement.queryAll(By.css('.className'))[1];

Solution 3

I would prefer user id on your DOM element and then in angular2 unit test you can call something like below to get reference of your desired DOM element and test what ever you like.

//typscript syntax

fixture = TestBed.createComponent(<your component>);

let result = fixture.nativeElement.querySelector('<id attribute name of html element>');

expect(result.id).toEqual("id  of your DOM element.").

Hope this help.

Solution 4

Make sure By is imported from @angular/platform-browser and not protractor.

Solution 5

Sample Test Case based on boolean display text:

 it('should set title based on title flag from parent', () => {
    component.title ="APP";
    fixture.detectChanges();
    const title = fixture.debugElement.query(By.css('label')).nativeElement;
    expect(title.innerHTML).toContain('APP');
  });

fixture.detectChanges() is must if you updated title from .ts file

View more solutions

Comments

[ATHER]

Thanks for your answer. How to check if the css is missing. I am trying to check if a link is enabled and if the css does not have class "disabled" that means the link is enabled. So how to test an absense of a class?

[vicmac]

It doesn't work for me on angular 5 and jasmine, I'm getting Failed: By is not defined. Any Ideas?

[vicmac]

Sorry for By function to work we need, import { By } from '@angular/platform-browser';

[B.Altair]

is it possible to use By.css() for a custom selector ? for instance By.css('my-own-input[name="nameInput"]')

[juanitourquiza]

This is the solution stackoverflow.com/a/49378567/2400373

[amphetamachine]

I'm trying this in Angular 9, and it's telling me Cannot find name 'By'.

[humbleCoder]

import { By } from '@angular/platform-browser';

[phoenixstudio]

This does not provide an answer to the question. You can search for similar questions, or refer to the related and linked questions on the right-hand side of the page to find an answer. If you have a related but different question, ask a new question, and include a link to this one to help provide context. See: Ask questions, get answers, no distractions

[Ju66ernaut]

I spent way too much time trying to understand why it was not working for me. I was taking VS code's suggestion and using protractor at first. This was helpful.

[Ashish Duklan]

What can be the downside of using document.getElement instead of using fixture? It worked for me.