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

我更喜欢你的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 3

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

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

Answer 4

确保 By 是从 @angular/platform-browser 而不是 protractor 导入的。

Answer 5

基于布尔显示文本的示例测试用例：

 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() 如果您从 .ts 文件更新标题

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

5 个答案: