具有多个同名类的 codeception CSS 路径答案

【问题标题】：codeception CSS path having multiple class with same name具有多个同名类的 codeception CSS 路径
【发布时间】：2014-04-07 02:01:39
【问题描述】：

以下代码：

<div class="row">
  <div class=" col-md-4">
    <p>Try entering some values for this widget</p>
    <form class="form-inline ng-valid ng-dirty" role="form">
      <p>This widget is outside of a niwa-big-number-model directive - it should get its values from the form </p>
      <div class="big-number content widget green ng-isolate-scope" units="%" value="75" title="Humidity">
      <div class="body">
        <h1 class="ng-binding">Humidity </h1>
        <div class="bigNum ng-binding">
        </div>
      </div>
    </div>
    <div class=" col-md-4">
      <niwa-big-number-model class="ng-isolate-scope">
      <div class="big-number-model"/>
        <p class="ng-scope">This widget is fed from a niwa-big-number-model directive</p>
        <div class="big-number content widget green ng-scope ng-isolate-scope" units="°C" value="15.5" title="Model Test">
        <div class="body">
          <h1 class="ng-binding">Model Test </h1>
          <div class="bigNum ng-binding">
          </div>
        </div>
      </niwa-big-number-model>
</div>

任务：

我想找到 title= Model Test 的 CSS 路径，因为在上面的代码中有多个同名的类，很难获得确切的 CSS 路径。我尝试的如下：

$I->see('Model Test','.bigNum.body:nth-child(2)');

还是失败了谁能告诉我 title= model test 的确切 CSS 路径吗？

【问题讨论】：

标签： html css angularjs codeception

【解决方案1】：

有很多方法可以得到这个，这取决于你的页面上是否有其他重复的标记。最简单的方法之一是：

.big-number-model h1 {}

另一个是：

.big-number-model .body .ng-binding {}

只要找到任何不重复的类，并在需要时添加其他嵌套的特殊性。 Fiddle so you can play around with it.

【讨论】：