Selenium XPath定位MeteorologicalVariables表格首个指定按钮的方案

我有一个包含多个表格的网页，所有表格的TR元素都包含相似的TD。

• ObservationStation表格中的按钮代码：

<input type="button" class="gwf-round-button" value="^" onclick="InsertRowBefore('ObservationStations', this, 'TextBox')" title="Add row before">

• MeteorologicalVariables表格中的对应按钮代码：

<input type="button" class="gwf-round-button" value="^" onclick="InsertRowBefore('MeteorologicalVariables', this, 'TextBox')" title="Add row before">

我需要选择并点击MeteorologicalVariables表格中第一个该按钮，区分不同表格按钮的唯一标识是onclick参数中的表格名。当前使用的代码无法实现需求：

edit_button = driver.find_element("xpath", '//button[text()="^" and @class="gwf-round-button"][1]')
edit_button.click()

附上MeteorologicalVariables表格的完整HTML代码：

<table id="MeteorologicalVariables" class="gwf_variable_table">
   <colgroup>
      <col>
      <col style="min-width:150px">
      <col style="min-width:200px">
      <col style="min-width:200px">
      <col style="min-width:200px">
      <col style="min-width:220px">
      <col style="min-width:220px">
      <col style="min-width:275px">
   </colgroup>
   <tbody>
      <tr style="display: table-row;">
         <td class="gwf_variable_table_control_column"></td>
         <td style="max-width:150px" class="fmc-table-label-font fmc-tb-height">Variable</td>
         <td style="max-width:200px" class="fmc-table-label-font fmc-tb-height">Station Name</td>
         <td style="max-width:200px" class="fmc-table-label-font fmc-tb-height">Sensor(s)</td>
         <td style="max-width:200px" class="fmc-table-label-font fmc-tb-height">Height / Depth (m)</td>
         <td style="max-width:220px" class="fmc-table-label-font fmc-tb-height">Record Period</td>
         <td style="max-width:220px" class="fmc-table-label-font fmc-tb-height">Measurement Frequency</td>
         <td style="max-width:275px" class="fmc-table-label-font fmc-tb-height">Notes / Details</td>
      </tr>
      <tr>
         <td class="gwf_variable_table_control_column">
            <div class="gwf_tooltip"><input type="button" class="gwf-round-button" value="^" onclick="InsertRowBefore('MeteorologicalVariables', this, 'TextBox')" title="Add row before"></div> 
            <div class="gwf_tooltip"><input type="button" class="gwf-round-button" value="X" onclick="DeleteRow('MeteorologicalVariables', this)" title="Delete current row"></div>
            <div class="gwf_tooltip"><input type="button" class="gwf-round-button" value="v" onclick="InsertRowAfter('MeteorologicalVariables', this, 'TextBox')" title="Add row after"></div>
         </td>
         <td><input type="text" class="fmc-tb-appearance fmc-tb-font fmc-tb-height" style="width:100%"></td>
         <td><textarea class="fmc-tb-appearance fmc-tb-font" style="height:60px;min-width:200px;width:200px;max-width:200px;"></textarea></td>
         <td><textarea class="fmc-tb-appearance fmc-tb-font" style="height:60px;min-width:200px;width:200px;max-width:200px;"></textarea></td>
         <td><input type="text" class="fmc-tb-appearance fmc-tb-font fmc-tb-height" style="width:100%"></td>
         <td><input type="text" class="fmc-tb-appearance fmc-tb-font fmc-tb-height" style="width:100%"></td>
         <td><input type="text" class="fmc-tb-appearance fmc-tb-font fmc-tb-height" style="width:100%"></td>
         <td><textarea class="fmc-tb-appearance fmc-tb-font" style="height:60px;min-width:275px;width:275px;max-width:275px;"></textarea></td>
      </tr>
      <tr>
         <td class="gwf_variable_table_control_column">
            <div class="gwf_tooltip"><input type="button" class="gwf-round-button" value="^" onclick="InsertRowBefore('MeteorologicalVariables', this, 'TextBox')" title="Add row before"></div>
            <div class="gwf_tooltip"><input type="button" class="gwf-round-button" value="X" onclick="DeleteRow('MeteorologicalVariables', this)" title="Delete current row"></div>
            <div class="gwf_tooltip"><input type="button" class="gwf-round-button" value="v" onclick="InsertRowAfter('MeteorologicalVariables', this, 'TextBox')" title="Add row after"></div>
         </td>
         <td><input type="text" class="fmc-tb-appearance fmc-tb-font fmc-tb-height" style="width:100%"></td>
         <td><textarea class="fmc-tb-appearance fmc-tb-font" style="height:60px;min-width:200px;width:200px;max-width:200px;"></textarea></td>
         <td><textarea class="fmc-tb-appearance fmc-tb-font" style="height:60px;min-width:200px;width:200px;max-width:200px;"></textarea></td>
         <td><input type="text" class="fmc-tb-appearance fmc-tb-font fmc-tb-height" style="width:100%"></td>
         <td><input type="text" class="fmc-tb-appearance fmc-tb-font fmc-tb-height" style="width:100%"></td>
         <td><input type="text" class="fmc-tb-appearance fmc-tb-font fmc-tb-height" style="width:100%"></td>
         <td><textarea class="fmc-tb-appearance fmc-tb-font" style="height:60px;min-width:275px;width:275px;max-width:275px;"></textarea></td>
      </tr>
</tbody>
</table>

原代码的问题在于：

1. 错误使用button标签定位，实际元素是input类型的按钮
2. 未限定目标表格范围，可能定位到其他表格的按钮

以下是几种可靠的定位方式：

方式1：通过表格ID限定范围（推荐） #

先定位目标表格，再在其内部查找第一个符合条件的按钮，逻辑清晰且稳定性高：

# 先定位MeteorologicalVariables表格
table = driver.find_element("id", "MeteorologicalVariables")
# 在表格内找到第一个^按钮
edit_button = table.find_element("xpath", ".//input[@class='gwf-round-button' and @value='^']")
edit_button.click()

方式2：通过onclick属性精准匹配 #

利用onclick参数中的表格名作为唯一标识，直接定位目标按钮：

edit_button = driver.find_element("xpath", "//input[@class='gwf-round-button' and @value='^' and contains(@onclick, 'MeteorologicalVariables')][1]")
edit_button.click()

contains(@onclick, 'MeteorologicalVariables')确保只匹配目标表格的按钮，[1]选中第一个匹配项。

方式3：结合表格层级结构定位 #

通过表格的tbody和行结构，定位第一行数据的控制列中的^按钮：

edit_button = driver.find_element("xpath", "//table[@id='MeteorologicalVariables']/tbody/tr[2]/td[@class='gwf_variable_table_control_column']/div[1]/input")
edit_button.click()

注意：tr[2]是因为第一行是表头，第二行是第一组数据行；若表头结构变化，需调整索引。

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