分裂器のcssContainingTextロケータ機能の理解

Question

現在、分度器を使用してフレームワークを作成中です。私は、分度器APIによって与えられたcssContainingTextロケータを使用しようとしていました。しかし、ロケータはinvalidElement例外を与えられず、私にとっては怪しいようでした。

ページのHTMLは、私が変なふうにInvalidLocator例外を与え、次のlocator-

element(by.cssContainingText('.field-name','someText'));を使用してテキストsomeTextを、使用しようとしていたこの

 <tbody> 
     <tr class="row2"> 
      <td class="action-checkbox">...</td> 
      <th class="field-name"> 
       <a href="some_link">someText</a> 
      </th> 
      <td class="field-slug">sometext</td> 
     </tr> 
     <tr class="row3"> 
      <td class="action-checkbox">...</td> 
      <th class="field-name"> 
       <a href="some_link">someOtherText</a> 
      </th> 
      <td class="field-slug">someothertext</td> 
     </tr> 
     <tr class="row4">...</tr> 
      <td class="action-checkbox">...</td> 
      <th class="field-name"> 
       <a href="some_link">someThirdText</a> 
      </th> 
      <td class="field-slug">somethirdtext</td> 
     </tr> 

のように見えます。次のロケータelement(by.cssContainingText('a','someText'))を使用すると、コードは正常に動作します。

説明文からわかるように、hereを与えられた投射器の実装では、cssContainingTextは、CSSセレクタを使用してすべての要素を探し出し、必要なテキストと突き合わせます。

CSS Selectorのクラス名を.field-nameにして、目的の文字列に一致させても問題ありません。しかし、これは失敗し、私は理解できません。これに関する入力は参考になります。

Answer 1

API documentation of cssContainingTextからGitHubのコードを表示し、それに従うことができます。

それはclientsidescripts.jsにおけるコンテンツの検索のこのようにダウンしています：

var elementText = element.textContent || element.innerText || ''; 

if (elementText.indexOf(searchText) > -1) { 
    matches.push(element); 
} 

（あなた<a>タグが持っている）indexOf()が完全一致を必要とし、あなたのth要素がinnerTextもtextContentもないとして、あなたはしないでくださいth要素を使用して結果を取得します。

textContentとinnerTextの違いについては、this answer in SOとto this one as wellを参照してください。あなたのケースでは

：

[textContent] 
someText 
[/textContent] 
[innerText]someText[/innerText] 

var properties = ['innerHTML', 'innerText', 'textContent', 'value']; 
 

 
// Writes to textarea#output and console 
 
function log(obj) { 
 
    console.log(obj); 
 
    var currValue = document.getElementById('output').value; 
 
    document.getElementById('output').value = (currValue ? currValue + '\n' : '') + obj; 
 
} 
 

 
// Logs property as [propName]value[/propertyName] 
 
function logProperty(obj, property) { 
 
    var value = obj[property]; 
 
    log('[' + property + ']' + value + '[/' + property + ']'); 
 
} 
 

 
// Main 
 
log('=============== ' + properties.join(' ') + ' ==============='); 
 
for (var i = 0; i < properties.length; i++) { 
 
    logProperty(document.getElementById('test'), properties[i]); 
 
}

<div id="test"> 
 
    Warning: This element contains <code>code</code> and <strong>strong language</strong> and <a href="www.google.com">a Google link</a>. 
 
</div> 
 
<textarea id="output" rows="12" cols="80" style="font-family: monospace;"></textarea>