了解 Protractor 中的 cssContainingText 定位器功能

Posted 2023-05-07

【中文标题】了解 Protractor 中的 cssContainingText 定位器功能

【英文标题】：Understanding the cssContainingText locator functionality in Protractor

【发布时间】：2017-11-01 17:39:39

【问题描述】：

我目前正在使用 Protractor 创建一个框架。我试图使用 Protractor API 给出的cssContainingText 定位器。但是，定位器未能给出invalidElement 异常，这对我来说似乎很奇怪。

页面的 html 如下所示

     <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>

我试图使用以下定位器使用文本someText-

element(by.cssContainingText('.field-name','someText'));，这奇怪地给出了InvalidLocator 异常。当我使用以下定位器element(by.cssContainingText('a','someText')) 时，代码运行良好。

根据我从here 给出的解释和here 给出的量角器实现中了解到的，cssContainingText 首先使用 CSS 选择器定位所有元素，然后匹配所需的文本。

所以，对我来说，为 CSS 选择器使用 .field-name 类名然后匹配所需的字符串似乎完全没问题。但是，这失败了，我无法理解。对此的投入会有所帮助。

【问题讨论】：

在所有浏览器上都失败了吗？还是有特定的浏览器？当我使用 Protractor 的源代码并在此页面中注入并查找 findByCssContainingText('.post-taglist', 'javascript') 时，它可以工作，所以奇怪的是它对你来说失败了

是的，它在所有浏览器上都失败了。我尝试过使用 Chrome Dev build 60+ 和最新的 FF。是的，我也很困惑，因为我希望定位器能够工作

在 Chrome 的开发控制台中试试这个。 window.document.querySelectorAll('.field-name')[0].textContent 或 window.document.querySelectorAll('.field-name')[0].innerText。这很奇怪，因为我在这里尝试时也无法重现：angular.github.io/protractor-cookbook/ng1/calculator 在查询 '.ng-scope' 或 '.ng-binding' 时

【参考方案1】：

您可以在 GitHub 中查看和关注代码，从 API documentation of cssContainingText 开始。

归结为这种在clientsidescripts.js中搜索内容的方式：

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

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

由于indexOf() 需要完全匹配，而您的th 元素既没有innerText 也没有textContent（您的<a> 标记有），因此使用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>