How to get Angular 2 element through class name in Jasmine

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

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.

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];