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

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

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