c# - xpath 定位器 c# 正确的查找技术

Question

我正在努力掌握我的 xPath 发现，但我遇到了一个问题。我的目标是从表中获取复选框。您能给我一些建议，应该如何始终设置定位器吗？

假设我的目标是指向需要单击的复选框 的input。

首先我尝试了非常简单的方法:

By.XPath("//input[@type = 'checkbox'][1]") 

我有两个复选框，所以我指向第一个。结果 - 失败。

下一步:

By.XPath("//div[@class = 'receipt-grid-container h-90']//tbody/tr[1]/td[5]/input");

我从主类开始“向下”，通过 tbody 和 table 元素。由于我的复选框位于第 5 列内，我试图通过以/input 结尾来找到它。结果 - 也失败了。

最后的方法，我认为它可以通过“向下”来完成，所以:

By.XPath("//div[@class = 'receipt-grid-container h-90']//tbody/tr[1]/td[5]/div/input");

然而，我也失败了。谁能告诉我如何找到它？另外，当我们搜索 xpath 时，是否需要像我在上面所做的那样从“从上到下”技术开始？或者我们可以使用例如 xPath Axes 以不同的方式开始

<div class="receipt-grid-container h-90">
   <div style="height: auto; overflow: auto;">
      <div>
         <table style="background-color: rgb(255, 255, 255); width: 100%; border-collapse: collapse; border-spacing: 0px; table-layout: fixed; font-family: Roboto, sans-serif;">
            <thead style="border-bottom: 1px solid rgb(224, 224, 224);">
               <tr style="border-bottom: 1px solid rgb(224, 224, 224); color: rgba(0, 0, 0, 0.87); height: 48px;">
                  <th width="35%" style="font-weight: normal; font-size: 12px; padding-left: 24px; padding-right: 24px; height: 56px; text-align: left; white-space: nowrap; text-overflow: ellipsis; color: rgb(158, 158, 158); position: relative; background-color: inherit;">
                     <!-- react-text: 1986 -->Name<!-- /react-text -->
                  </th>
                  <th width="15%" style="font-weight: normal; font-size: 12px; padding-left: 24px; padding-right: 24px; height: 56px; text-align: left; white-space: nowrap; text-overflow: ellipsis; color: rgb(158, 158, 158); position: relative; background-color: inherit;">
                     <!-- react-text: 1988 -->Quantity<!-- /react-text -->
                  </th>
                  <th width="20%" style="font-weight: normal; font-size: 12px; padding-left: 24px; padding-right: 24px; height: 56px; text-align: left; white-space: nowrap; text-overflow: ellipsis; color: rgb(158, 158, 158); position: relative; background-color: inherit;">
                     <!-- react-text: 1990 -->EUR<!-- /react-text -->
                  </th>
                  <th width="15%" style="font-weight: normal; font-size: 12px; padding-left: 24px; padding-right: 24px; height: 56px; text-align: left; white-space: nowrap; text-overflow: ellipsis; color: rgb(158, 158, 158); position: relative; background-color: inherit;">
                     <!-- react-text: 1992 -->Refunded<!-- /react-text -->
                  </th>
                  <th width="15%" style="font-weight: normal; font-size: 12px; padding-left: 24px; padding-right: 24px; height: 56px; text-align: left; white-space: nowrap; text-overflow: ellipsis; color: rgb(158, 158, 158); position: relative; background-color: inherit;">
                     <!-- react-text: 1994 -->Refund<!-- /react-text -->
                  </th>
               </tr>
            </thead>
         </table>
      </div>
      <div style="height: inherit; overflow: hidden auto;">
         <table style="background-color: rgb(255, 255, 255); width: 100%; border-collapse: collapse; border-spacing: 0px; table-layout: fixed; font-family: Roboto, sans-serif;">
            <tbody>
               <tr style="border-bottom: 1px solid rgb(224, 224, 224); color: rgba(0, 0, 0, 0.87); height: 48px;">
                  <td width="35%" style="padding-left: 24px; padding-right: 24px; height: 48px; text-align: left; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background-color: inherit;">Coca-Cola 0,5 l</td>
                  <td width="15%" style="padding-left: 24px; padding-right: 24px; height: 48px; text-align: left; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background-color: inherit;">1 pcs</td>
                  <td width="20%" style="padding-left: 24px; padding-right: 24px; height: 48px; text-align: left; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background-color: inherit;">3.00</td>
                  <td width="15%" style="padding-left: 24px; padding-right: 24px; height: 48px; text-align: left; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background-color: inherit;">0</td>
                  <td width="15%" style="padding-left: 24px; padding-right: 24px; height: 48px; text-align: left; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background-color: inherit;">
                     <div style="cursor: pointer; position: relative; overflow: visible; display: table; height: auto; width: 100%;">
                        <!-- react-empty: 2005 --><input type="checkbox" value="on" style="position: absolute; cursor: inherit; pointer-events: all; opacity: 0; width: 100%; height: 100%; z-index: 2; left: 0px; box-sizing: border-box; padding: 0px; margin: 0px;">
                        <div style="display: flex; width: 100%; height: 100%;">
                           <div style="transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; float: left; position: relative; display: block; flex-shrink: 0; width: 24px; margin-right: 16px; margin-left: 0px; height: 24px;">
                              <div>
                                 <svg viewBox="0 0 24 24" style="display: inline-block; color: rgba(0, 0, 0, 0.87); fill: rgba(0, 0, 0, 0.87); height: 24px; width: 24px; user-select: none; transition: opacity 1000ms cubic-bezier(0.23, 1, 0.32, 1) 200ms; position: absolute; opacity: 1;">
                                    <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
                                 </svg>
                                 <svg viewBox="0 0 24 24" style="display: inline-block; color: rgba(0, 0, 0, 0.87); fill: rgb(0, 188, 212); height: 24px; width: 24px; user-select: none; transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, transform 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms; position: absolute; opacity: 0; transform: scale(0);">
                                    <path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
                                 </svg>
                              </div>
                              <div></div>
                              <div style="position: absolute; height: 100%; width: 100%; top: 0px; left: 0px;"></div>
                           </div>
                        </div>
                     </div>
                  </td>
               </tr>
               <tr style="color: rgba(0, 0, 0, 0.87); height: 48px;">
                  <td width="35%" style="padding-left: 24px; padding-right: 24px; height: 48px; text-align: left; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background-color: inherit;">Fanta Zero 0,5 l</td>
                  <td width="15%" style="padding-left: 24px; padding-right: 24px; height: 48px; text-align: left; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background-color: inherit;">1 pcs</td>
                  <td width="20%" style="padding-left: 24px; padding-right: 24px; height: 48px; text-align: left; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background-color: inherit;">3.00</td>
                  <td width="15%" style="padding-left: 24px; padding-right: 24px; height: 48px; text-align: left; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background-color: inherit;">0</td>
                  <td width="15%" style="padding-left: 24px; padding-right: 24px; height: 48px; text-align: left; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background-color: inherit;">
                     <div style="cursor: pointer; position: relative; overflow: visible; display: table; height: auto; width: 100%;">
                        <!-- react-empty: 2023 --><input type="checkbox" value="on" style="position: absolute; cursor: inherit; pointer-events: all; opacity: 0; width: 100%; height: 100%; z-index: 2; left: 0px; box-sizing: border-box; padding: 0px; margin: 0px;">
                        <div style="display: flex; width: 100%; height: 100%;">
                           <div style="transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; float: left; position: relative; display: block; flex-shrink: 0; width: 24px; margin-right: 16px; margin-left: 0px; height: 24px;">
                              <div>
                                 <svg viewBox="0 0 24 24" style="display: inline-block; color: rgba(0, 0, 0, 0.87); fill: rgba(0, 0, 0, 0.87); height: 24px; width: 24px; user-select: none; transition: opacity 1000ms cubic-bezier(0.23, 1, 0.32, 1) 200ms; position: absolute; opacity: 1;">
                                    <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
                                 </svg>
                                 <svg viewBox="0 0 24 24" style="display: inline-block; color: rgba(0, 0, 0, 0.87); fill: rgb(0, 188, 212); height: 24px; width: 24px; user-select: none; transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, transform 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms; position: absolute; opacity: 0; transform: scale(0);">
                                    <path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
                                 </svg>
                              </div>
                              <div></div>
                              <div style="position: absolute; height: 100%; width: 100%; top: 0px; left: 0px;"></div>
                           </div>
                        </div>
                     </div>
                  </td>
               </tr>
            </tbody>
         </table>
      </div>
   </div>
</div>

Answer 1

根据您分享的HTML，您的用例可能是点击 checkbox Coca-Cola 或项目 Fanta Zero 的复选框。因此，要单击相应的复选框，您可以创建一个函数，如下所示:

public void click_checkbox(string softdrink)
{
    driver.FindElement(By.XPath("//div[contains(@class,'receipt-grid-container')]//table/tbody//td[contains(.,'" + softdrink + "')]//following::input[1]")).Click();
}

现在您可以调用函数 click_checkbox() 来调用您想要点击的所需项目，如下所示:

click_checkbox("Coca-Cola")
//or
click_checkbox("Fanta Zero")