角度2のフォームコントロールで分度器を使用するには？

Question

私はangle2で分度器を使い始めました。私は以下の分度器でサンプルテストを書いた

<input type="text" id="name"> 


describe('angularjs homepage', function() { 
it('should say my name', function() { 
    browser.get('http://localhost:3000/?'); 
var greeting =element(by.id('name')).sendKeys('john'); 
expect(greeting.getAttribute('value')).toEqual('john'); 
}); 
}); 

これはうまくいきました。しかし、私は、フォームにこの

<input type="text" [formControl]="testControl" /> 

のようなものを使用していると私は私がId's or namesに言及したくないので、入力に言及した任意のidは、var greeting=element(by.formcontrol('testControl')).sendKeys('john'); のようなものをコントロール名を使用してテストを書くことができることをcontrol.Is持っていけません入力のために。 あなたは私を助けてくれますか？私が間違っているなら私を訂正してください。ありがとう

Answer 1

入力を見つけるためにCSSセレクターを試してみることができますか？以下の例を見てください。

element(by.css("input[formControl='testControl']")) 

Answer 2

これは、分度器が要素が表示される前に、browser.get（）の直後に要素を探している可能性があります。 CSS/XPathのセレクタは通常動作するので、これを試してみてください。これがさらに進む前に、ページ上の（タイムアウト付き）特定の要素の可視性を待つために分度器を強制します

describe('angularjs homepage', function() { 
it('should say my name', function() { 
    browser.get('http://localhost:3000/?'); 
var EC= protractor.ExpectedConditions; 
browser.wait(EC.visibilityOf($('yourElementHere'), 60000); 
var greeting =element(by.id('name')).sendKeys('john'); 
expect(greeting.getAttribute('value')).toEqual('john'); 
}); 
}); 

。

Answer 3

また、これに問題があり、受け入れられた回答が機能しています。 私は次のようにユーティリティメソッドを作成することになった：

const input = (name: string) => element(by.css('input[ng-reflect-name=\"' + name + '\"]')); 

使用法：

input('firstName').sendKeys('John');