Codeception如何定位点击多个同名CSS类中的第一个元素

你给出的页面DOM结构如下：

<div class="test">
  <div class="test2">test</div>
  <div class="test2">test2</div>
  <div class="test2">test3</div>
  <div class="test2">test4</div>
</div>

针对这个结构，有3种稳定的实现方式，按推荐优先级排序：

• 方法1：CSS伪类精准定位（稳定性最高）
  给选择器加上父容器限定，搭配:first-child伪类直接匹配目标元素，不受页面其他位置同class元素的干扰：

  $I->click('.test > .test2:first-child');
  

  这里用>直接匹配父级下的直接子元素，比普通后代选择器的精准度更高。

• 方法2：Codeception内置顺序定位
  Codeception的click方法支持传入第二个参数指定匹配元素的序号，注意序号从1开始计数，传入1即为第一个匹配元素：

  // 匹配所有class为test2的元素，选择第1个点击
  $I->click(['class' => 'test2'], 1);
  

  这种写法更简洁，但如果页面其他位置新增了class为test2的元素，可能出现定位偏移，适合页面结构简单的场景。

• 方法3：先抓取元素集合再操作（适合需要前置校验的场景）
  如果点击前需要先校验元素数量、属性等信息，可以先抓取所有匹配元素，再操作第一个：

  // 抓取test容器下所有test2元素
  $test2List = $I->grabMultiple('.test .test2');
  // 可选：先校验元素数量符合预期
  $I->assertEquals(4, count($test2List));
  // 点击第一个元素
  $I->click($test2List[0]);
  

• 避坑提示：不要直接写$I->click('.test2')，这种写法虽然默认也会点击第一个匹配元素，但只要页面其他位置提前插入了class为test2的元素，就会导致点击错误，用例稳定性很差。

内容的提问来源于stack exchange，提问作者Tejas Gajjar