selenium-webdriverxpath

selenium xpath statement to select the first occurrence of a button in a specific table


I have a web page with multiple tables , all the tables have TR with a similar TD

here is that button in an ObservationStation table

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

And here it is in a MeteorlogicalVariables table

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

What I want to do is select the first occurrence of the button in the MeteorlogicalVariables table and click it. The only identifier that differentiate the buttons in the each table is in the onclick , how would I access the very first button in the MeteorlogicalVariables table ?

here is what I have now:

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

here is what the MeteorologicalVariables table looks like (the highlighted button is what I want to click): enter image description here

any help in getting this figured out is appreciated

here is the HTML for the specific table I want to click the first occurrence of ^ in

        <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>

Solution

  • select the first occurrence of the button in the MeteorlogicalVariables table

    There are various ways to do it, for eg.

    1. Follow closely the structure of the HTML:

      //table[@id="MeteorologicalVariables"]/tbody/tr[2]/td[1]/div[1]/input[1]
      

      i.e. select the first input in the first div of the first td of the second tr of the MeteorlogicalVariables table.

    2. Generate a sequence that satisfies your constraints and take the first one out of it:

      (//table[@id="MeteorologicalVariables"]//input[@value="^"])[1]
      

      i.e. Select the first input with a value of ^ in the MeteorlogicalVariables table