如何在Jasmine中通过类名获取Angular 2元素

Question

我可以使用它获得元素

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

但是,当我想通过类名获取元素时,我该怎么做.像这样的东西

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

Answer 1

您By.css用来传递css选择器.所以任何你可以使用css的选择器,你都可以使用By.css.而一个类的选择器就是.classname(带句点).

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

这只是一些例子.如果您了解css,那么您应该知道如何使用选择器.

编辑: 要By.css()确保使用import { By } from '@angular/platform-browser';

Answer 2

确保By是从@angular/platform-b​​rowser导入的，而不是protractor。

Answer 3

我更喜欢您的 DOM 元素上的用户 ID，然后在 angular2 单元测试中，您可以调用如下所示的内容来获取所需 DOM 元素的参考并测试您喜欢的内容。

//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.").

希望这有帮助。

Answer 4

只是添加一些其他有用的方式来选择元素：

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