量角器在Web UI中找到一个弹出元素

Question

我试图将鼠标悬停在给定元素上，以便出现帮助提示框。我需要帮助以找到要采取行动的要素。

我是新来的量角器。我面前有文档，并且我还查看了许多有关量角器和元素查找的SO帖子。总的来说，我做得还不错，但是我有一个有点复杂，无法发挥我的newb能力。 我尝试了by.className（），by.css（）的许多变体，并且它找到了多个元素，或者没有。 acp-help-circle在给定的UI中出现6次。我只分享了一段代码（当然，为了简洁起见）。

<ng-include src="'OtherSettingsTemplate'" class="ng-scope"><div class="nok-content-panel panel panel-default ng-scope ng-isolate-scope" is-collapsed="true">
  <div class="panel-heading ng-scope util-clickable" ng-class="{'util-clickable':contentPanel.collapsable}" ng-click="contentPanel.headerClick($event);">
    <i ng-show="contentPanel.collapsable" class="toggle-icon icon-states acp-caret-bottom" ng-class="{'acp-caret-bottom' : !contentPanel.isCollapsed, 'acp-caret-right': contentPanel.isCollapsed}" style=""></i>

    <b class="ng-binding ng-scope">Other</b>
    <div class="right ng-scope">
      <i class="acp-help-circle ng-scope" popover-placement="left" popover-trigger="'hovertooltip'" uib-popover-html="'Doc Control and Doc Manager cannot be enabled at the same time for the same configuration. Please only enable the feature used within your Licensed Property Manager configuration.'" nok-popover="Doc Control and Doc Manager cannot be enabled at the same time for the same configuration. Please only enable the feature used within your Licensed Property Manager configuration."></i>
    </div>
  </div>
  <div class="panel-collapse ng-scope in collapse" uib-collapse="contentPanel.isCollapsed" style="" aria-expanded="true" aria-hidden="false">
  <div class="panel-body">
    <div class="content-wrapper">
    <form name="editApp.otherSettingsForm" class="otherSettingsForm ng-pristine ng-valid ng-scope" novalidate="">
      <fieldset>
        <div class="fieldsRow">
          <div class="col-title">
            <span class="label ng-binding">Document Control</span>
          </div>
          <div class="col-lef">
            <nok-switch-button ng-model="editApp.configuration.otherSettings.dcEnabled" size="medium" is-disabled="editApp.configuration.otherSettings.docManagerEnabled &amp;&amp; !editApp.configuration.otherSettings.dcEnabled" class="ng-pristine ng-untouched ng-valid ng-isolate-scope ng-not-empty"><div class="switch-button medium switch-button-off" ng-click="switchButton.toggleSwitch()" ng-class="{'switch-button-on': switchButton.on,
                'switch-button-off': !switchButton.on,
                disabled: switchButton.isDisabled,
                readonly: switchButton.isReadonly}" style="">
    <div class="switch-button-container">
        <span translate="components.switch-button.onLabel" translate-values="" class="ng-scope">On</span>
        <label>
            <span></span>
            <span></span>
            <span></span>
        </label>
        <span translate="components.switch-button.offLabel" translate-values="" class="ng-scope">Off</span>
    </div>
</div>
</nok-switch-button>
          </div>
          <div class="col-right">
          </div>
        </div>
        <div class="fieldsRow">
          <div class="col-title">
            <span class="label ng-binding">Inky</span>
          </div>
          <div class="col-lef">
            <nok-switch-button ng-model="editApp.configuration.otherSettings.inkyEnabled" size="medium" class="ng-pristine ng-untouched ng-valid ng-isolate-scope ng-not-empty"><div class="switch-button medium switch-button-off" ng-click="switchButton.toggleSwitch()" ng-class="{'switch-button-on': switchButton.on,
                'switch-button-off': !switchButton.on,
                disabled: switchButton.isDisabled,
                readonly: switchButton.isReadonly}" style="">
    <div class="switch-button-container">
        <span translate="components.switch-button.onLabel" translate-values="" class="ng-scope">On</span>
        <label>
            <span></span>
            <span></span>
            <span></span>
        </label>
        <span translate="components.switch-button.offLabel" translate-values="" class="ng-scope">Off</span>
    </div>
</div>
</nok-switch-button>
          </div>
          <div class="col-right">
          </div>
        </div>
        <div class="fieldsRow p-t-10">
          <div class="col-title">
            <span class="label ng-binding">Doc Manager</span>
          </div>
          <div class="col-lef">
            <nok-switch-button ng-model="editApp.configuration.otherSettings.docManagerEnabled" size="medium" is-disabled="editApp.configuration.otherSettings.dcEnabled &amp;&amp; !editApp.configuration.otherSettings.docManagerEnabled " class="ng-pristine ng-untouched ng-valid ng-isolate-scope ng-not-empty"><div class="switch-button medium switch-button-off" ng-click="switchButton.toggleSwitch()" ng-class="{'switch-button-on': switchButton.on,
                'switch-button-off': !switchButton.on,
                disabled: switchButton.isDisabled,
                readonly: switchButton.isReadonly}" style="">
    <div class="switch-button-container">
        <span translate="components.switch-button.onLabel" translate-values="" class="ng-scope">On</span>
        <label>
            <span></span>
            <span></span>
            <span></span>
        </label>
        <span translate="components.switch-button.offLabel" translate-values="" class="ng-scope">Off</span>
    </div>
</div>
</nok-switch-button>
          </div>
          <div class="col-right">
          </div>
        </div>
      </fieldset>
    </form>
  </div>
  </div>
</div>
</div>
</ng-include>

只是我尝试过的许多迭代中的一部分...

element(by.className('acp-help-circle'))  //finds > 1. The class is not unique.
element(by.cssContainingText('Doc Control and Doc Manager cannot be enabled at the same time for the same configuration. Please only enable the feature used within your Licensed Property Manager configuration.'))  //this finds none.

感谢您的帮助