おっさんエンジニアの備忘録

ここは主におっさんエンジニアが技術的な事を調べたり、試してみたりしたことを備忘録的に書いていくものです。忘れっぽいからね。誰かの参考になったら嬉しい。

protractorでのE2Eテスト観点でng-bindを使うべきかどうか。

APIマニュアルを見ていて気になりました。

こちらの記述を見ていてちょっと気になったことがあったので少し調べてみたメモです。

サンプルとして以下のようなソースがありました。

<span>{{person.name}}</span>
<span ng-bind="person.email"></span>
<input type="text" ng-model="person.name"/>

ていうソースにおいて。

// Find element with {{scopeVar}} syntax.
element(by.binding('person.name')).getText().then(function(name) {
  expect(name).toBe('Foo');
});

// Find element with ng-bind="scopeVar" syntax.
expect(element(by.binding('person.email')).getText()).toBe('foo@bar.com');

// Find by model.
var input = element(by.model('person.name'));
input.sendKeys('123');
expect(input.getAttribute('value')).toBe('Foo123');

と書きましょうとありますが、ちょっと「ん?」って感じ

expect(element(by.binding('person.name')).getText()).toBe('Foo');

じゃダメ?
と思ったので、試しに実行。ちゃんと動きますね。
ただし、{{person.name}}spanタグで囲っておかないと取得されるテキストデータがページ全体に広がってしまい大変なことになるので注意が必要でした。

{{person.name}}
<span ng-bind="person.email"></span>
<input type="text" ng-model="person.name"/>

これだと、{{person.name}}の一つ上のタグが対象範囲として取得されてしまうので、同階層のテキストが全部取れちゃいます。

どうもng-bindの利用が推奨っぽいのでそっちで書いておくのが安全そうですね。
※どのみちSPANで囲むのであればそっちの方がキレイかな?