web-dev-qa-db-ja.com

Jasmineのクラス名でAngular 2要素を取得する方法

を使用して要素を取得できます

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

しかし、クラス名を介して要素を取得したい場合にすべきこと。このようなもの

fixture.debugElement.query(By.css('class="name"'))
unit-testingangularjasmine
24
user2510058

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

58
Paul Samsotha

要素を選択する他の便利な方法を追加するだけです：

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

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

この助けを願っています。

4
MikBTC