无法使用带有 selenium 的 xpath 在表中定位元素

Question

I want to click on a button inside my table each row has a update button I want to click on a specfic button inside my table.

Here is a what my table looks like:

<table _ngcontent-vhp-c82="" datatable="" id="dtOptionsComments" class="display table table-striped table-bordered dt-responsive dataTable dtr-inline" aria-describedby="dtOptionsComments_info" style="width: 100%;" width="100%">
  <thead _ngcontent-vhp-c82="">
    <tr _ngcontent-vhp-c82="">
      <th _ngcontent-vhp-c82="" class="no-marking sorting_disabled" rowspan="1" colspan="1" style="width: 50.4px;" aria-label=""></th>
      <th _ngcontent-vhp-c82="" class="sorting sorting_asc" tabindex="0" aria-controls="dtOptionsComments" rowspan="1" colspan="1" style="width: 1109.4px;" aria-label="Comment.Comment Shipping.ShippingDatatable.aria.sortDescending" aria-sort="ascending">Comentario Shipping.Shipping</th>
    </tr>
  </thead>
  <tbody>
    <tr class="odd">
      <td class="no-marking dtr-control">
        <a href="javascript:void(0);">
          <span data-toggle="modal" data-target="#update-modal" update-comment-text="6 MESES DE GARANTIA" update-comment-id="5" class="material-icons md-18 clickable"> edit </span>
        </a>
        <a href="javascript:void(0);">
          <span data-toggle="modal" data-target="#delete-modal" delete-comment-id="5" class="material-icons clickable">delete</span>
        </a>
      </td>
      <td class="sorting_1">6 MESES DE GARANTIA</td>
    </tr>
    <!-- MORE ROWS!!! -->
  </tbody>
  <tfoot _ngcontent-vhp-c82="">
    <tr _ngcontent-vhp-c82="">
      <td _ngcontent-vhp-c82="" class="no-marking" rowspan="1" colspan="1">
        <a _ngcontent-vhp-c82="" href="javascript:void(0);">
          <span _ngcontent-vhp-c82="" class="material-icons clickable"> add_box </span>
        </a>
      </td>
      <td _ngcontent-vhp-c82="" rowspan="1" colspan="1">
        <input _ngcontent-vhp-c82="" formcontrolname="addComment" type="text" id="addComment" name="addComment" class="form-control ng-untouched ng-pristine ng-invalid">
        <!---->
      </td>
    </tr>
  </tfoot>
</table>

Here is my code trials:

IWebElement btnUpdate = _driver.FindElement(By.XPath("//*[update-comment-id='" + commentAction.GetLastQuoteInsertId().ToString() + "']"));
btnUpdate.Click();

I have validated that the function GetLastQuoteInsertId returns the proper value

Why is my xPath selector wrong how can I fix it thank you for your help.

Answer 1

You were almost there. While considering a xpath the attribute_name should be always preceded by a @ sign.

Additionally to make the xpath more canonical as the element is a <span> element you can mention //span to start the xpath.

Effectively, your line of code will be:

IWebElement btnUpdate = _driver.FindElement(By.XPath("//span[@update-comment-id='" + commentAction.GetLastQuoteInsertId().ToString() + "']"));
btnUpdate.Click();