如何在Codeception中定位动态ID的主题删除按钮？

开发者阿泽

2026-8-22

定位动态ID的删除按钮（Codeception自动化测试）

我刚接触自动化测试，正在学习Codeception工具。编写自动化测试时，需在测试流程末尾删除创建的主题。但创建新主题时，系统会为其生成一个带动态ID的删除按钮，请问该如何定位每个新主题对应的此按钮？

对应的页面元素代码：

<span data-theme_id="12445247" class="control_item icon-box_hover empty_link with_icon_link js-deleteTheme">                                                    
    <span class="icon-delete-summary mod__hover"></span>Delete
</span>

### 解决方案
- **通过存储主题ID精准定位**
  创建主题时，先抓取系统生成的`theme_id`（可以从接口响应、页面主题详情区域获取），再用这个ID拼接定位器：
  ```php
  // 假设$themeId是创建主题后获取到的动态ID
  $I->click(['css' => 'span[data-theme_id="' . $themeId . '"]']);
  // 或者用XPath写法
  $I->click(['xpath' => '//span[@data-theme_id="' . $themeId . '"]']);

这是最可靠的方式，因为每个主题ID唯一，不会误触其他删除按钮。

文本+类名组合定位（单主题场景适用）
如果测试流程只创建一个主题，可结合按钮文本和固定类名定位：

// CSS定位：包含Delete文本且带js-deleteTheme类的span
$I->click(['css' => 'span.js-deleteTheme:contains("Delete")']);
// XPath定位
$I->click(['xpath' => '//span[contains(@class, "js-deleteTheme") and normalize-space(text())="Delete"]']);

注意：页面存在多个Delete按钮时，这种方法可能定位错误，仅适合单主题测试场景。

关联主题名称定位
若主题名称和删除按钮在同一DOM层级下，可先定位主题名称，再找到对应删除按钮：
```
// 假设$themeName是创建的主题名称，删除按钮在主题名称的父元素同级下
$I->click(['xpath' => '//div[normalize-space(text())="' . $themeName . '"]/../span[@class="js-deleteTheme"]']);
```
这种方式依赖页面DOM结构稳定，需确保主题名称和删除按钮的层级关系不变。